【Swift4】StoryboardでUICollectionViewを3分で実装する方法【iOS11】

StoryboardでUICollectionViewを実装する方法をご紹介します。
わかりやすさ重視で、今回はViewControllerに紐づくmain.StoryboardにCollectionViewを実装する手順で紹介しています。

1.StoryboardにCollectionViewを配置する

1-1.CollectionViewを設置する

UICollectionViewを実装したいStoryboardにCollectionViewを配置します。
CollectionViewのサイズなどは任意に調整してください。

1-2.dataSouceとdelegateを設定する

配置したCollectionViewのOutletsのdataSourceとdelegateを、CollectionViewを実装させるViewControllerにセットします。

このようにdataSouce、delegateが共にViewControllerに紐づけます。

1-3.CollectionViweCellのIdentifierを設定する

配置したCollectionViewの中にあるCollectionViewCellのIdentifierを設定します。
Identifierを設定することでCellの再利用が可能になりメモリに優しい設計となるので忘れずに行なってください。

今回はIndetifierを「Cell」という名前で設定しました。

2.CollectionViewのセクション数やセル数を設定する

2-1.UICollectionViewDelegate, UICollectionViewDataSourceを追加する

UICollectionViewDelegate, UICollectionViewDataSourceを設定しdelegateメソッドを追加します。

基本的にこの4つは必須です。

2-2.UINibファイル、UICollectionElementKindCellを設定する

nibファイル「UICollectionElementKindCell」を読み込んでおきます。

今回セルの再利用となる行でUICollectionViewCellのカスタムセルを使わず、UICollectionViewCellそのままを使用するためnibファイルの読み込みが必要になります。

3.UICollectionViewDelegateFlowLayoutを使用したレイアウト設定

UICollectionViewのレイアウト方法は大きく分けて3つあります。

1.UICollectionViewFlowLayout を調整する
2.UICollectionViewDelegateFlowLayout を実装する
3.UICollectionViewLayout (Custom) を作成する

その中でもdelegateを使って簡単にレイアウトが実装できる、2.UICollectionViewDelegateFlowLayoutでのレイアウト方法になります。

3-1.UICollectionViewDelegateFlowLayoutを追加する

UICollectionViewDelegateFlowLayoutをさらに追加しdelegateメソッドを追加します。

基本的にこの4つでセルのサイズや余白などを調整可能です。
以上で実装は完了となります。

 

実際にビルドするとこんな感じのCollectionViewが表示されます。
今回のコード部分のまとめは以下のようになります。