#2 Collection View ｜用照片牆過過出國的癮

因為疫情關係已經好久沒有出國了，雖然最近出國旅遊解禁了，但尚未買好機票的我，就先用各國美麗的風景照片過過出國的癮吧!!!

學習目標

1. Collection View Controller
2. 新增自訂的Cocoa Touch Class & Swift File類別
3. 自訂Struct型別
4. 拉@IBOutlet & @IBAction
5. @IBSegueAction 傳送資料
6. Navigation Controller

StoryBoard架構

• 第一頁(Country)ViewCountroller：有五大洲的按鈕
• 第二頁(Travel)CollectionViewController：依據點選的按鈕，在第二頁顯示該洲的國家圖片
• 第三頁(BigPic)ViewCountroller：點選國家圖片後，在第三頁會顯示大張圖片

第一頁(Country) View Controller五大洲按鈕

• 新增Cocoa Touch Class檔案，自訂View Controller類別，並改好對應的Class

產生自訂的View Controller類別

• 建立5個Button，設為Stack View並設定以下條件：
  Axis: 以垂直排列
  Alignment: Stack View以Fill填滿的方式對齊可設置的範圍
  Distribution: 以Fill Equally的方式排列與設置尺寸，讓Stack View中的所有Button元件大小相等
• 拉Navigation Controller & 設定Navigation Bar樣式

建立5個Button

Stack View條件

第二頁(Country) Collection View Controller顯示照片牆

• 從UIKit中建立Collection View Controller (dataSource和delegate已連線)

• 新增Cocoa Touch Class與Swift File檔案，分別建立CollectionViewController與Collection View Cell類別，改好對應的Class，並設置Cell ID (名稱與Collection View Cell一樣)

新增自訂的 collection view controller & collection view cell 類別

改好對應的Class，並設置Cell ID

• 在Collection View Cell中新增一個image view與label，Collection View的 Estimate Size 要設為 None，這裡不透過 auto layout 計算 cell 大小。

新增image view與label

Estimate Size 設為 None，不透過 auto layout 計算 cell 大小

第三頁(BigPic) View Controller顯示大張圖片

• 新增Cocoa Touch Class檔案，自訂View Controller類別，並改好對應的Class

產生自訂的ViewController類別

• 新增一個image view與label至view中，並設置constraints

新增image view與label，設置constraints

在Assets中加入要顯示的圖片

Assets加照片

程式撰寫

自訂型別(Travel)

自訂型別儲存多個資料

第一頁 Country View Controller

• 五個按鈕拉@IBOutlet & @IBAction，並拉Segue到第二頁Collection View Controller，要記得幫Segue ID取名稱

五個按鈕拉@IBOutlet & @IBAction

拉Segue到第二頁Collection View Controller，幫Segue ID取名稱

• 從 segue 拉線產生@IBSegueAction，產生下個畫面的controller，將資
  料存入下個畫面的屬性中

從 segue 拉線產生@IBSegueAction function

將資料存入下個畫面的property

第一頁傳到第二頁 @IBSegueAction程式碼

第二頁 Country Collection View Controller

• 刪除或註解以下兩段程式

第一段
//private let reuseIdentifier = "Cell"
第二段
// self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

拉@IBOutlet 至Travel Collection View Cell

拉@IBOutlet

• 宣告陣列

宣告儲存Travel屬性的scenes

• 各國圖片顯示於Cell中

numberOfSections, collectionView (numberOfItemsInSection, cellForItemAt)程式碼

• 拉segue到第三頁，並從 segue 拉線產生@IBSegueAction，可點選cell中的圖片，在第三頁顯示大張圖片與文字

拉Segue到第三頁Big Pic View Controller，幫Segue ID取名稱

從 segue 拉線產生@IBSegueAction function

第二頁傳到第三頁 @IBSegueAction程式碼

第三頁 Big Pic View Controller

• 拉@IBOutlet與宣告儲存的圖片與文字

顯示大張圖片與文字的程式碼

遇到的困難

1. segue拉線的目標要注意是否跟程式碼一致，在第二頁傳送資料到第三頁時因為不一致，求救了Peter才得到解答😅
2. IBSegueAction Function不熟悉，還需要多多多多練習！

GitHub

GitHub - alicelee812/CollectionView

Reference

#53 照片牆(Grid Photo Wall)

作業#36照片牆Grid Photo Wall

利用 flow layout 的 collection view 製作照片牆