Swift

【Swift4】コードのみでCollectionViewCellの余白を設定し崩れないようにする方法

コードのみでCollectionViewCellの余白を設定し崩れないようにする方法を説明します。

StoryBoardは使わず、完全にプログラムコードのみです。

普通にコードだけでCollectionViewCellを生成して、幅いっぱいにセルが詰まるように並べると以下の図のようにレイアウトが思い通りにならないことがあると思います。

これはUICollectionViewFlowLayout()というクラスのminimumInteritemSpacingというパラメータによるもので、セル同士のスペースの最小値が定義されています。

つまり、上の図のようにレイアウトが崩れないようにするためには、このパラメータをいじってあげる必要があるわけです。

サンプルコード(ViewController.swift)

サンプルコードの解説

UICollectionView()のインスタンスを生成するときにイニシャライザの引数として、

Viewのサイズを指定するframeとレイアウトの設定をするcollectionViewLayoutがあるのですが、collectionViewLayoutをいじります。

let layout = UICollectionViewFlowLayout()でレイアウトを設定するクラスのインスタンス生成し、

itemSizeやminimumLineSpacingなどのパラメータを設定していくのですが、

横幅について設定したい場合はminimunInteritemSpacingというパラメータを設定します。

このパラメータはセルを横に並べる際にセル間のスペースの最小値を決めるものなので、0にしてあげることでレイアウトを思い通りにすることができます。

またセルを生成する際に、colorArrayに格納した色をランダムで取り出してCellの背景色にするように設定しています。

サンプルコードの実行結果

上記のコードを実際に実行してみると、以下のように正しい動作になっていることが確認できると思います。