Swift: CollectonViewの列と行を設定する

CollectoinViewの列と行を変更していきたいと思います。

開始の状態
参考： Swift: カスタムCollectionViewセル - ichi6161’s diary

手順

1. 準備
2. セルの大きさを設定
3. マージンを設定
   
   

1. 準備

UICollectionViewDelegateFlowLayoutを採用する

class FirstViewController: UIViewController, UICollectionViewDelegateFlowLayout, 
         UICollectionViewDataSource {

viewDidLoadにcollectionViewのdelegateをselfにセット
(UICollectionViewDelegateFlowLayoutはUICollectionViewDelegateを継承している)

    collectionView.delegate = self

2. セルの大きさを設定

ここまでできたら、実際にCollectionViewの列と行を決めていく

例）2列にする場合

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

　　//　横幅を画面サイズの約半分にする
        let cellSize:CGFloat = self.view.bounds.width/2 - 4
        return CGSize(width: cellSize, height: cellSize)
}

結果

このように1列になってしまった。
セルの横幅が画面サイズの半分であれば、2列で表示されるはずなのに...。

Stroryboardの設定を確認

Min Spacingが10に設定してあるため、思うようにいかなかったらしい。 試しに　Min Spacingを変更してみる
(For Cells :2 , For Lines :2)

結果

2列を表示することには成功!!
が、しかし、4行目のセルが半分見えている状態になっている。
この状態から、3行目までが表示されている状態に修正を加える。

3. Marginの設定

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        //外枠のマージン(top , left , bottom , right)
        return UIEdgeInsetsMake(20 , 2 , 20 , 2 )  
    }
    

// 水平方向におけるセル間のマージン
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
　　// セルの左右に
        return 0
    }
    
// 垂直方向におけるセル間のマージン
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 20
    }

結果

できた。
(端末によっては、3行きっかり表示されない可能性があるので、 さらに細かい修正は必要になる。)