• 2023/1/18
• 3分

【Swift UIKit】UICollectionViewの使い方！グリッドレイアウトの実装方法！

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftのUIKitでUICollectionViewを使用してグリッドレイアウトを実装する方法をまとめていきます。

公式リファレンス：UICollectionView

UICollectionView

@MainActor  class UICollectionView : UIScrollView

UICollectionViewはUIScrollViewを継承しているUI部品の1つでデータを整列して並べることができる機能を提供するクラスです。

SwiftUIではLazyVGridなどを使用して同じようなグリッドレイアウトを実装します。実装方法は大きく異なるので詳しくは以下の記事を参考にしてください。

おすすめ記事：【Swift UI】グリッドレイアウトの実装方法！LazyVGridとGridItemの使い方

実装の手順

今回はStoryboardを使用した実装方法です。

• StoryboardからUIを配置
• 表示させる項目を定義(dataSource)
• デリゲートを指定(delegate)

おすすめ記事：【Swift】delegate(デリゲート)とは？使い方とメリット

実装するにはUITableViewなどと同様にdataSourceとdelegateを設定する必要があります。そのためにViewControllerクラスにはUICollectionViewDelegateとUICollectionViewDataSourceプロトコルの準拠が必要になります。

おすすめ記事：【Swift UIKit】UITableViewの使い方！リストビューの実装方法

必要となるデリゲートメソッド

2つのプロトコルに準拠させたことでUICollectionViewを構築するために必要なデリゲートメソッドを呼び出せるので、任意の値や処理を渡してグリッドレイアウトの設定をします。最低限必要になるのは以下の2つのメソッドです。

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
    // 項目数：UICollectionViewDataSource
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 
    }
    // セル生成：UICollectionViewDataSource
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    }
}

公式リファレンス：UICollectionViewDelegate
公式リファレンス：UICollectionViewDataSource

グリッドレイアウトの実装方法

実際にStoryboardからグリッドレイアウトを実装する方法を見ていきます。

1. StoryboardからUIを配置
2. セルの識別子を入力
3. UI部品を設置しTagを指定
4. ViewControllerクラスに各プロトコルを準拠
5. Storyboard(またはviewDidLoad内)からdelegateなどを紐付け
6. 必要なデリゲートメソッドを定義

StoryboardからUIを配置

まずはStoryboardからUI(Collection View)を配置して画面いっぱいに広げておきます。

セルの識別子を入力

続いて識別子(identifier)を設定します。今回は「CollectionCell」としておきました。

UI部品を設置しTagを指定

UI部品(UILabel)を設置しコードからアクセスできるようにTagを指定しておきます。背景色をつけておくと分かりやすいので設定しておきます。

ViewControllerクラスに各プロトコルを準拠〜必要なデリゲートメソッドを定義

プロトコルの準拠とStoryboard(またはviewDidLoad内)からdelegateなどを紐付け、必要となるデリゲートメソッドを記述し、今回は表示する値を配列として定義しておきます。

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
    
    let numbers: [Int] = Array(0..<60)

    // @IBOutlet  weak var collectionView:UICollectionView!
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return numbers.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell:UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionCell", for: indexPath)
        let label = cell.contentView.viewWithTag(1) as! UILabel
        
        label.text = String(numbers[indexPath.row])
        return cell
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // コードで紐付けする場合
        // collectionView.delegate = self
        // collectionView.dataSource = self
    }
}

タップされた際に処理を実装する

グリッドレイアウトのデータをタップされた時に任意の処理を実装するにはcollectionView(_:didSelectItemAt:)を使用します。

func collectionView(_ collectionView: UICollectionView,   didSelectItemAt indexPath: IndexPath) {
    print(numbers[indexPath.row])
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。