搭配 sketch & zeplin 製作 iOS 的App Store 畫面
- 利用以下彈窗叫出 Table View Controller
2. 選擇Table View Controller再利用以下方式分別召喚出Navigation Controller and Tab bar Controller
3. 接下來為了實現跟App Store 一樣的Navigation bar設計，因此仿造以下 彼得潘小王子的教學 將Navigation bar 背景設定為透明：
另外 App Store 上方的 navigation bar 是透明的，可修改專案的 AppDelegate.swift 檔，找到 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool，在 { } 裡貼上以下程式將 bar 變透明。
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {let image = UIImage()UINavigationBar.appearance().setBackgroundImage(image, for: .default)UINavigationBar.appearance().shadowImage = imagereturn true}
但詭異的是在下了這段程式碼後只有Status Bar變透明，非常的詭異，但如果不下這段程式碼Navigation bar下方又會出現一條淺灰色線，這樣就無法跟App Store一模一樣了….
於是突發奇想把其中一段程式碼用“//” Disable掉，竟然就得到自己想要的效果了，也把惱人的灰色線條移除：
let image = UIImage()//UINavigationBar.appearance().setBackgroundImage(image, for: .default)UINavigationBar.appearance().shadowImage = image
頭像的部分一開始也是因為置入時竟然是顯示系統的藍色卡關卡了一下，於是參考了彼得潘這篇教學。
4. 緊接著進入主軸製作Scroll view的部分，首先選擇在左側選擇“Table view”，在右側選擇Content下拉選擇Static Cells
5. 在Table View Cell裡面加入Scroll View 後裡面再包一個View在裡面，隨後為了方便編輯把View拖拉到Exit下方，編輯完後再拖到Scroll Veiw裡面設定位置
6. 在Scroll View上面將“Paging Enable”打勾後，再到Identity Inspector 設定Content Size
7. 設定下方的Scroll view時，照本宣科的複製上方的做法卻造成卡關卡最久的一個部分，因為下方的Scroll view根據本人自己的判斷它看起來是包含兩個table (元件的使用時機也是最令人困惑的部分)，因此一開始做的時候如法泡製上方Scroll View的做法，不同的地方只是在View裡面包了兩個Table View，然而也因為這樣做造成使用模擬器跑圖的時候一直出現Build Fail的訊息，即使看了警告訊息一一排解也無法解決
所幸在上課中場休息時便詢問彼得潘小王子，見小王子隨手一拉才發現原來要在View 裡面插入一個叫做Container View的元件後，再叫出Table View Controller，再用“牽線（從Container View元件按住Control鍵拉線到Table View Controller後再下拉選單選“”Embed）”的方式將Table View Controller Embed到Container View裡面，接著就可以完成UI的刻畫啦
8. 最後因為下方的Table 點擊空白處時會出現Active的狀態，也就是會出現灰色的底色，因此在Selection的下拉選單選擇“None”讓他被點擊時是沒有反應的
補充＿本作業尚未完成需要再研究的事項有：
- 大頭像的位置應該要與左邊的Title對齊
