設定 flow layout 的 collection cell & 間距固定大小

比方想讓 cell 固定大小 102 * 102，實現以下的照片牆頁面，我們有三種設定 cell 大小的方法:

ps: 對 collection view 程式不熟的朋友可先參考以下連結，了解 collection view 程式的基本寫法。

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

方法1: 從 Interface Builder 設定 cell 大小和間距

將 Estimate Size 設為 None，將 width & height 設為 102。記得 Estimate Size 要設為 None，cell 大小才會乖乖依據 Width & Height 的設定。

在 iPhone 14 Pro Max 執行 App

collection view 裡的 cell 大小果然都聽話地變成 100 * 100 了。不過在 iPhone 14 Pro Max 上為什麼一排只有 3 張圖片呢 ? 14 Pro Max 的寬度是 430，應該可以塞 4 張圖片呀。

因為我們少考慮了一個東西，cell 之間的間距。請點選 collection view，切到 Size inspector 頁面，看到下圖紅色框框標示的 Min Spacing 欄位。

• Min Spacing For Cells

當 collection view 是上下捲動(flow layout 的 Scroll Direction 是 vertical)，cell 將由左而右水平排列，排完再排下一列，Min Spacing For Cells 代表同一排(row) cell 間的最小間距。

當 collection view 是左右捲動(flow layout 方向是 Horizontal)，cell 將由上而下排列，排完再往右排下一列，Min Spacing For Cells 代表同一列(column) cell 間的最小間距。

• Min Spacing For Lines

當 collection view 是上下捲動(flow layout 方向是 vertical)，Min Spacing For Lines 代表同一列(column) cell 間的最小間距。

當 collection view 是左右捲動(flow layout 方向是 Horizontal)，Min Spacing For Lines 代表同一排(row) cell 間的最小間距。

剛剛 collection view 預設的 min spacing for cells 是 10，因此在寬度 430 的 iPhone 14 Pro Max 上只能塞一排 3 張圖片。如果放 4 張圖片，它們合起來的寬度是 408(102*4)，但它們之間有 3 個間距，所以間距至少佔 30，加起來 438 就超過 430 了。

如果想要一排顯示 4 張照片，我們可以將 Min Spacing For Cells 調小，比方將它調為 1。

結果

成功一排顯示 4 張圖片了。

方法2: 從程式設定 cell 大小和間距

在 viewDidLoad 裡設定 cell 的大小和間距。

override func viewDidLoad() {
    super.viewDidLoad()        
    configureCellSize()
}

func configureCellSize() {
    let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout
    flowLayout?.itemSize = CGSize(width: 100, height: 100)
    flowLayout?.estimatedItemSize = .zero
    flowLayout?.minimumInteritemSpacing = 1
}

說明

let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout

UICollectionViewController 的 property collectionViewLayout 的型別為 UICollectionViewLayout，由於我們在 storyboard 將 Layout 設為 Flow ，因此我們可將它轉型為 UICollectionViewFlowLayout，之後再透過它的 property 設定 cell 的大小和間距。

ps: 若是另外將 collection view 加到 view controller 的 view，沒有使用 UICollectionViewController，則要從 collection view 讀取 property collectionViewLayout。

flowLayout?.itemSize = CGSize(width: 102, height: 102)

設定 itemSize 控制 cell 的尺寸。

flowLayout?.estimatedItemSize = .zero

將 estimatedItemSize 設為 .zero，如此 cell 的尺寸才會依據 itemSize，否則它將從 auto layout 的條件計算 cell 的尺寸。

flowLayout?.minimumInteritemSpacing = 1

minimumInteritemSpacing 控制 Min Spacing For Cells。minimumLineSpacing 控制 Min Spacing For Lines。

方法3: 設定固定大小的 auto layout 條件

讓 collection view 使用 auto layout 自動計算 cell 大小，比方設定圖片寬高 102 的 auto layout 條件，並讓圖片和 content view 的間距為 0，如此 cell 的大小將自動變成 102 * 102。

從 Interface Builder 將 collection view 的 Estimate Size 設為 Automatic，讓它以 auto layout 計算大小。

我們也可從程式設定 Estimate Size，透過將 UICollectionViewFlowLayout 物件的 estimatedItemSize 設為 UICollectionViewFlowLayout.automaticSize。

let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout
flowLayout?.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

設定圖片寬高 102 的 auto layout 條件，並讓圖片和 content view 的間距為 0。