#7模仿App畫面—Instagram

在還沒有學到程式的情況下，運用以下元件來模仿Instagram的頁面。

✨ Tab bar controller

✨ Navigation controller

✨ Table view controller

✨ Staticells

在Figma製作App畫面

在前往Xcode前，先在Figma繪製Instagram的頁面，因為是第一次使用Figma，對它還不熟悉，所以先在Figma Community下載了一頁Instagram Ui Kit，其他頁面再模仿著畫。

繪製完後直接在Figma製作Prototype。

最後我在Photoshop製作Mockup，完成後就可以開啟Xcode啦。

運用Scroll view 、圓形View製作Instagram story

• 增加一個table view controller，table view的content設為：static cells、header heigh和footer heigh設為：0。
• 放進scroll view至table view cell，高度設為一樣高。
• 先在頁面外製作要捲動的view，把image view加進view中，並設為圓形，同時再放button在image view上。

讓 view 變圓角的 layer.cornerRadius

• 製作好的view拉進scroll view內，scroll view的content size設為和view一樣寬，即可滾動。

• 實現貼文部分的分頁滾動效果，和上述的scroll view方法一樣，不同的是要在Paging Enabled處打勾。

• 一個table view cell的畫面都製作完成後，在table view section的rows增加table view cell數量。

運用table view 製作照片牆

• 一個table cell放3個image view
• table view的seperator設為：none
• 設定table view section的rows

Tab Bar Controller

• 先製作一個view controller，點擊右下角的 Embed In 按鈕，選取Tab bar Controller

• 之後增加的view controller，可以從tab bar segue到新的view controller，如圖所示選擇view controllers

• 改變tab bar的樣式從bar item做更改。

Navigation Bar

• 點選view controller後，點擊右下角Emben In 按鈕，選擇navigation controller。

• 在navigation bar加上bar button item

• 可以到navigation bar 右邊的屬性面板更改樣式

• 搜尋功能可以更快找到想要的元件

誤刪Assets

💦作業完成後，卻不小心手滑刪掉Assets，我一直按cmd+z也覆水難收，好險原來它還在專案的資料夾中，被這篇文章救了一命。

少了 Assets.xcassets 的我該怎麼辦

專案完成 模擬器畫面

附上Github檔

GitHub - AlvieForWork/i-n-s-t-a-g-r-a-m

參考文章

模仿一頁精美的 App 畫面 (可將其它作業要求的各種 UI 加到此作業，比方陰影效果，點選文字顯示網頁等)