【Swift・iOS】XcodeのCollectionViewの使い方。タイル型(カード型)のレイアウト方法を解説

こんな感じで、タイル型(カード型)のパーツが連続して並ぶレイアウトはiphoneアプリ開発でよく実装されます。

有名な例だと、Instagramなどは画像3列のレイアウトです。

こういったレイアウトをswiftで実装するためには、「Collection View」というObjectを使用します。

今回は、そんな使用頻度が高い「Collection View」の基本的な使い方を解説します。

Collection Viewを配置する

Object Libraryから「Collection View」を選択して、Main.storyboardに貼り付けましょう。

今回は、画面全体にタイル型のコンテンツを表示したいので、auto layoutを使って、画面いっぱいまでCollection Viewを広げました。

Cellに名前(Identifier)をつける

Collection Viewを配置すると、「CellのIdentifierを設定しろ!」とワーニング(黄色い三角)が表示されます。

Xcodeに言われたとおりにしましょう。

Collection View内のセルを選択して、右上のIdentifierの項目に名前を設定します。(今回はCellという名前をつけました。)

ViewControllerとCollection Viewを紐付ける

ViewController.swiftから、CollectionViewの中身を編集できるように、設置したCollectionViewをViewControllerに紐づけましょう。

Collection Viewにマウスを合わせて、「control」を押しながらドラッグ・アンド・ドロップで、ViewControllerの黄色い丸印までカーソルを移動してください。

そうすると、↑のような感じで、「dataSource」や「delegate」が設定できるので、この2つを設定します。

これで、ViewController.swiftからCollection Viewの中身を編集できるようになりました。

ViewControllerにCollectionViewの記述をする

今までの作業で、

  • Main.storyboardのViewControllerにCollection Viewを配置する
  • Collection Viewを画面いっぱいに表示する(Auto layout)
  • Collection ViewとViewController.swiftを紐付ける

が完了しました。

最後に、ViewController.swiftからどのようなタイル(カード)を一覧で表示するかを設定します。

以下のように、ViewControllerを編集してください。

この状態でビルドすると、

このように、小さな四角くて赤いタイルが無数に並びます。

一旦、これで、Collection Viewが正常に表示されていることが確認できました。

レイアウトを綺麗に

Collection Viewの使い方の解説は終了なのですが、もう少し綺麗に表示するために、

「UICollectionViewDelegateFlowLayout」

の使い方を解説します。

この「UICollectionViewDelegateFlowLayout」をViewControllerの拡張に追加(UICollectionViewDelegateの後ろに追記)して、セルの大きさや隙間を調整するソースを書きます。

  • Collection Viewのアウトレットを追加(main.storyboardから紐づけ)・・・6行目
  • Collection View自体のレイアウトを調整・・・10〜13行目
  • Cellの大きさや隙間を調整・・・26〜30行目

を追加で行いました。

この状態でビルドすると、

3列で綺麗にセルをレイアウトすることができます。

あとはもう、等間隔にするとか、丸角にするとかいろいろな装飾をして、理想的なUIを作りましょう!

ソース一式を以下に置いておきますので、興味がありました!

https://github.com/rara-tan/swift-collection-view-demo

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。