機能まとめ

CollectionViewのサイズ変更方法を初心者にわかりやすく解説

 

CollectionViewのサイズを変更する時の方法で一番簡単な方法はUICollectionViewDelegateFlowLayoutを使う方法です。

普段通り、collectionを表示するまで同じで、そこにextensionでUICollectionViewDelegateFlowLayoutを追加して、SizeForItemAtの関数内でサイズを指定します。

collectionViewの表示方法はこちらでまとめています。

今回は、マージンなども書いていますが、以下のコードと同じようにすれば、3Up2Down家計簿でも使っている横並びの自作カレンダーと同じ形にすることができます。

参考にしてください。

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CollectionViewCell
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return .init(top: 2, left: 2, bottom: 2, right: 2)
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 2
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 2
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // ここの値を一番大きいセルの値にする
        let cellMaxHeight: CGFloat = 32 * 4
        let cellCount: CGFloat = 3
        let cellLabelHeight: CGFloat = 44 * 3
        let cellMargin: CGFloat = 10
        let cellMarginCount: CGFloat = cellCount

        return CGSize(width: collectionView.bounds.width / 3, height: cellMargin * cellMarginCount + cellMaxHeight * cellCount + cellLabelHeight - 10)
    }
}
Copy