Swift 學習筆記

復刻 Netflix APP 初步練習｜Netflix clone, UIkit, xcode

Kyle Lu

22 Mar 2025 • 8 min read

身為資深劇迷，Netflix 可以說是我的第三個家（第一個家是史萊姆，第二個是動畫瘋～巴哈我大哥）。

上禮拜開始，我決定要給自己一個挑戰 — 試著刻出一個 Netflix App…其中的 3 頁！

畢竟有多少機會能把自己喜歡的片單都排進全球熱門排行呢🔥？

其實一開始只是想藉這個機會，好好熟悉 Xcode 的 Interface Builder，學習用表格建立一個電子書 app，所以先找了設計師前輩做的 UI。但後來想想，既然要做，乾脆就模仿此時此刻的 Netflix UI，雖然這樣更有挑戰性，但這樣日後回顧時會更有趣！

學習目標

搭配 tab bar controller & navigation controller
學習 table view controller with static cells
學習 scroll view 用法
使用 segue 串接頁面
熟悉常用元件的屬性

Demo

經過這陣子跟 Interface Builder 搏感情，終於刻出 87 分滿意的畫面，真是恍如隔世啊～

開發階段

第一步：挑選設計稿

知道這次電子書 app 是為了要學習表格式 app 的做法，思考了一陣子決定選擇 Netflix，於是到 Figma community 選擇喜歡的素材。

在這裡我花了大概 1 個小時，實在太有趣了～沒想到有這麼多設計師會熱心分享自己復刻的 App UI 素材，包含 IG、Spotify、Threads…等。

注意右下角有作者最後更新的日期，有些作者會標榜 1.0 和 2.0，但不同作者的更新時間不一樣，很可能會遇到 A 作者的 2.0 比 B 作者 1.0 還早發佈的情況，想要找最新素材的同學可以留意一下。

第二步：設計基礎框架

參考 Netflix 原本的 App 架構，我使用：

Tab Bar Controller 做為基底
Table View Controller 當容器
Navigation Controller 進出不同頁面

搭配這些元素之後，APP 的雛形就出爐囉！

拆解首頁、分集介紹頁架構

通常是 Tab Bar Controller 在第一個，後面可以跟許多 Navigation Controller

Tab Bar Controller 在第一個，後面可以跟許多 Navigation Controller

用 table view controller 當首頁、分集介紹頁的容器，容器架構都是這樣：

上方：以 container view 作為任意門，呼叫 view controller

下方：以 table view（紅框處）, scroll view（黃框處）做出片單

第三步：美化設計細節

打造了骨骼精奇的架構，再來就是進行醫美手術拉皮的部分，這部分就要出動 Interface Builder，我針對：

字型、大小
圖片、顏色
按鈕、標籤

等等元素調整格式，讓畫面看起來更接近原生 Netflix。

這時候已經 87 分像了！
邊滑 APP 邊思考要塞哪些片單進去，我就這樣霸氣的掌控 Netflix 的 AI（有夢最美），決定哪些片單要讓它紅！

利用 Interface Builder 的 Attributes Inspector 調整屬性，包含字體圖片的顏色格式等

利用 Interface Builder 的 Size Inspector 調整尺寸、位置等

第四步：串接不同頁面

最後一道工法就是用 Segue 把各頁面的按鈕和畫面串連起來。

這藍線一個沒連好就是剪不斷理還亂

修修改改好幾次之後...

我的復刻 Netflix — KLix APP 終於大功告成🎉

還興奮的請 AI 幫我畫個 APP 的 icon 以茲紀念！

開發小結

雖然只是初步刻 APP 的 UI 畫面，還沒到真正 coding 的階段，不過在各種畫面和屬性之間打轉，從原本的粗心漏看欄位，到可以強勢置入喜歡的片單，點擊後還可以對應產生頁面，還是很開心、很有成就感！

第一版和目前畫面對比

這是我的第一版畫面，其實我原本單純想照著 Figma 的範例做，因為設計師都已經把料備好了，我就不用煩惱內容，專心疊積木就好。

Simulator Screen Recording - iPhone 15 Pro - 2023-11-20 at 23.46.13.gif

只是看到同學們陸續都上傳作業了，讓我開始思考人生想到其實既然要做，跟著目前最新的 UI 做，雖然比較有挑戰性，但更有趣、更有現代感！就決定調整首頁主視覺。

如果再做一次，我會特別留意素材、元件和 view 這幾點（那不就是全部了嗎？）：

素材相關

可以先用現成的，等架構都沒問題再來一口氣更新，比較省時間。
圖片先批次處理成同樣的尺寸和解析度，可以省下後續許多瑣碎調整的工夫。

元件屬性相關

想調整 Tab bar 和 Navigation bar 的顏色，要找關鍵字叫做「Style」的，而不是 color ，否則會找到一把火牙起來。
button 的 image 跟斯斯一樣有兩種，一種是 symbol 會跟文字排列，放入的圖片多大就是多大；一種是取代文字，整張 button 就是一張圖，這種就可以透過 custom 調整大小。
1 個 button 如果塞不下/不能自由調整 symbol 或字型，可以拆成 2 個 button。

view 相關

table view 的 section header 內建不能變顏色和大小，可以另外新增 Table View Cell 來裝 Label 。
scroll view 的做法很特殊，要記得新增超長的 view 在裡面，以及留意 contentSize 的長度。

Storyboard 佈局大合照

時間的關係，主要集中火力在練習 table view 相關的元件，目前播放影片都是用圖片暫代，期待開始 coding 後，可以換成真正會動的影片！（不過礙於版權還是不能放真正片源啦～）

Github 交作業

https://github.com/kkylelu/netflix_onepage

參考文件

版權聲明

本作品中所使用的所有圖片及素材，皆來自網絡公開分享資源。如果有任何圖片或素材不小心用了你的作品，請聯絡我以便適當處理。本作品沒有這些圖片或素材的版權，也不會用來盈利。