こんな感じで、タイル型(カード型)のパーツが連続して並ぶレイアウトは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」が設定できるので、この２つを設定します。
これで、ViewController.swiftからCollection Viewの中身を編集できるようになりました。
ViewControllerにCollectionViewの記述をする
今までの作業で、
- Main.storyboardのViewControllerにCollection Viewを配置する
- Collection Viewを画面いっぱいに表示する(Auto layout)
- Collection ViewとViewController.swiftを紐付ける
が完了しました。
最後に、ViewController.swiftからどのようなタイル(カード)を一覧で表示するかを設定します。
以下のように、ViewControllerを編集してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate { override func viewDidLoad() { super.viewDidLoad() } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 18 // 表示するセルの数 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) // 表示するセルを登録(先程命名した"Cell") cell.backgroundColor = .red // セルの色 return cell } } |
この状態でビルドすると、
このように、小さな四角くて赤いタイルが無数に並びます。
一旦、これで、Collection Viewが正常に表示されていることが確認できました。
レイアウトを綺麗に
Collection Viewの使い方の解説は終了なのですが、もう少し綺麗に表示するために、
「UICollectionViewDelegateFlowLayout」
の使い方を解説します。
この「UICollectionViewDelegateFlowLayout」をViewControllerの拡張に追加(UICollectionViewDelegateの後ろに追記)して、セルの大きさや隙間を調整するソースを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout { // collection viewのoutlet @IBOutlet var collectionView: UICollectionView! override func viewDidLoad() { super.viewDidLoad() // レイアウトを調整 let layout = UICollectionViewFlowLayout() layout.sectionInset = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15) collectionView.collectionViewLayout = layout } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return 18 // 表示するセルの数 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) // 表示するセルを登録(先程命名した"Cell") cell.backgroundColor = .red // セルの色 return cell } func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let horizontalSpace : CGFloat = 20 let cellSize : CGFloat = self.view.bounds.width / 3 - horizontalSpace return CGSize(width: cellSize, height: cellSize) } } |
- Collection Viewのアウトレットを追加(main.storyboardから紐づけ)・・・6行目
- Collection View自体のレイアウトを調整・・・10〜13行目
- Cellの大きさや隙間を調整・・・26〜30行目
を追加で行いました。
この状態でビルドすると、
3列で綺麗にセルをレイアウトすることができます。
あとはもう、等間隔にするとか、丸角にするとかいろいろな装飾をして、理想的なUIを作りましょう！
ソース一式を以下に置いておきますので、興味がありました！
https://github.com/rara-tan/swift-collection-view-demo
