#53 串連 API 仿作德魯納酒店 IG 頁面 — (2) collection view 製作照片牆

最近迷上這部精彩的韓劇「德魯納酒店」，片中 IU 飾演存在人世間一千年的半人半鬼酒店老闆娘，負責接待入住到酒店剛離開人世仍有懸念的鬼魂們，和怕鬼的酒店的人類經理呂珍九共同經歷很多凶險刺激的片段。片中時不時會有嚇人的鬼怪裝扮，但整體是很溫馨又帶點搞笑的故事啦～尤其是 IU 在劇集中時而任性、時而冷豔，百變的造型每種都能駕馭，立馬被圈粉。

開槍這段真的是太帥啦！！！

學會了基礎 Table cell 的運用，今天就利用德魯納酒店的劇照來排個整齊的照片牆吧～

參考教學是彼得潘的這篇：

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

其中必需要注意的是很容易忘記從 CollectionViewController 裡刪除這段程式：(因為我們要自行設計 Table cell ，與原先格式不同)

self.collectionView!.register(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

接著寫程式將每個圖片的間隔設為1、一列呈現三張圖片：

func setCellSize(){
        let itemSpace: CGFloat = 1     //設定圖片間隔
        let cellCount: CGFloat = 3     //設定一列呈現的圖片數量
        
        let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout
        
        let width = floor((collectionView.bounds.width - itemSpace*(cellCount-1))/cellCount)         //function floor將小數點後的數字捨去
        flowLayout?.itemSize = CGSize(width: width, height: width)
        
        flowLayout?.estimatedItemSize = .zero
        flowLayout?.minimumLineSpacing = itemSpace
        flowLayout?.minimumInteritemSpacing = itemSpace
    }
override func viewDidLoad() {
        super.viewDidLoad()
        setCellSize()
    }

結果就出現如同 IG 般整齊排列的照片牆啦！！ 好讚～～(IU 腦粉覺得開心)

設定選取圖片後可以到下一頁看放大圖：

從 TableCell 拉 Segue 到下一個 TableViewController，利用 indexPathsForSelectedItems 辨識出選取的圖片，到下一頁放大。

建立 IG 上方使用者的基本資料欄位：

首先新增一個 Collection Reusable View，作用類似於一般的 Table View Cell，故也必須新增一個 InstagramCollectionReusableView.swift 與之連結，繼承 UICollectionReusableView (路徑：New > File > Cocoa Touch Class > UICollectionReusableView)。

與 Table View Cell 相同，物件的 outlet 拉到 CollectionReusableView.swift 上，而操作的內容則仍是放在主畫面的頁面，以我們命名的 reusableView 呼叫他。

將 Collection Reusable View 物件的 outlet 拉到 CollectionReusableView.swift

主畫面內進行其他指令

1. 呼叫 collection reusable view:

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView { 程式 }

2. 將 collection reusable view 命名為 reusableView:

guard let reusableView =
      collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "\(InstagramCollectionReusableView.self)", for: indexPath) as? InstagramCollectionReusableView 
else {return UICollectionReusableView()}

3. 設定為開頭畫面 ofKind:UICollectionView.elementKindSectionHeader

4. 新增 identifier: “\(InstagramCollectionReusableView.self)”

5. 呼叫label的內容前面需要加上 reusableView

//將顯示頭像設定成圓形
let width = reusableView.logoImageView.frame.size.width
reusableView.logoImageView.layer.cornerRadius = width/2

如此就大功告成了！完成 IG 的頁面配置～十分賞心悅目💕

GitHub在此

Jean-You/hotelDelLuna

參考資料

串接 Instagram API, CollectionViewController製作

#15 模仿 Instagram App (IG), Collection View Header & Cell 製作#2

有興趣的朋友可參考上一篇，複習 Table View 的基本運用：

#51 製作電影排行榜-(1) Table View 基本功能