【iOS - 使用純 Code 的方式建立 UICollectionView】

這在 iPhone 的應用上很常見,像是常用的瀏覽照片或是手機 APP 列表等等都是相關的應用,它和 UITableView 很像但又不全然相同,不同於 UITableView 的是它必須透過 UICollectionViewFlowLayout 來設置它的屬性,例如 Cell 的寬高、Cell 與 Cell 間的間距等等;又或者可以通過遵從UICollectionViewDelegateFlowLayout 這個代理來實作亦可。法蘭克將會示範使用 UICollectionViewFlowLayout 來設置 UICollectionView 的屬性,在還沒開始之前 CollectionView 的應用有哪些。
iOS 相簿
Instagram Profile

建立 Single View Application 專案後,並在 ViewController 的 ViewDidLoad 加入以下程式碼:

第 1 行 => 跟 TableView 一樣遵從 CollectionViewDataSource、CollectionViewDelegate 來設定 CollectionView 的資料。

第 7 行 => 生成 CollectionViewFlowLayout 以用來設定 CollectionView 的屬性。

第 8 行 => section 與 section 之間的距離(如果只有一個 section,可以想像成 CollectionView 的 frame)。

第 9 行 => CollectionViewcell 的寬、高。

第 10 行 => 滑動方向為「垂直」的話即「上下」的間距;滑動方向為「平行」則為「左右」的間距。

第 11 行 => 滑動方向為「垂直」的話即「左右」的間距;滑動方向為「平行」則為「上下」的間距。

備註:vertical 和 horizontal 即為 CollectionView 的滑動方向。

補充說明第 10 行和第 11 行

第 12 行 => 滑動方向,預設為垂直。若設為垂直,則 cell 的加入方式為由左至右,滿了才會換行;若是垂直則由上往下,滿了才會換列。這在最後會會使用圖示說明之。

第 14 行 => 生成 CollectionView,第一個參數設定其 frame,第二個參數傳入 UICollectionViewFlowLayout。

第 17 行 => 註冊 Cell 的識別名稱。

第 23 ~ 25 行 => 設定該 CollectionView 只有一個 section。

第 32 ~ 36 行 => 設定 cell 的資料來源,僅改變背景顏色。這邊偶數和奇數使用不同的背景顏色主要是要讓各位看看垂直和水平方向的 UICollectionView 加入 cell 的方式不一樣。

第 38 ~ 40 行 => 點擊 cell 所觸發的 func,這邊印出 row 的用意也是讓各位看看垂直和水平方向的 UICollectionView 加入 cell 的方式不一樣。

以上已完成設定,先啟動看看縱向的 UICollectionView 排列方式會是如何。


接著試著調整以下這個屬性,讓 CollectionView 變成水平。

layout.scrollDirection = UICollectionViewScrollDirection.horizontal

大家有看出 CollectionViewCell 加入的方式有什麼不一樣嗎???沒有也沒沒關係,可以試著點擊每個 CollectionView 後再查看 console 印出的 indexPth 訊息,若還是還看不出來也沒關係,以下讓法蘭克來說明之。


垂直:

由左至右開始加入 CollectionViewCell,超過 CollectionView寬度則會換行。

水平:

由上至下開始加入 CollectionViewCell,超過 CollectionView 的高度則會換列。


結論:

該範例已放上 GitHub,若有問題可再問與答中詢問,下篇將會介紹使用 Storyboard + Xib 來建立 CollectionView。

若有任何問題歡迎在問與答提出,如果您喜歡我的文章,請多按幾下「拍手」給我鼓勵,或是按「follow」讓我持續提供好文章給您。

Like what you read? Give 法蘭克的iOS世界 a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.