【Swift】CollectionViewを使って気づいたこと

Last updated at 2024-02-21Posted at 2024-02-21

はじめに

仕事でメディアを一覧で表示する機能を作成しCollectionViewを使用しました。
その際に苦戦した点や注意すべき点をまとめてみたのでよろしくお願いします。

CollectionViewについての簡単な概要

CollectionViewとはiOSアプリケーションでグリットベースのレイアウトを実現するためのUIコンポーネントです。
TableViewは縦一列の表示に特化しているのに対してCOllectionViewは複数列の表示や異なるサイズのアイテム表示などより複雑なレイアウトを実現できるのが特徴です。

主な使用例は画像のギャラリーや商品一覧などが挙げられます。

CollectionViewの基本設定について

CollectionViewのセットアップ
StoryboardまたはXIBファイルにCollectionViewを追加
Interface Builderを使用して、ViewControllerのビューにCollectionViewをドラックアンドドロップします。

Cellクラスの登録
register(:forCellWithReuseIdentifier:)メソッドを用いてUICollectionViewに対してセルを登録します。
register(:forCellWithReuseIdentifier:)メソッドを忘れていたり、登録するCellのクラス名を誤って入力すると当然ですがCellは表示されないので注意が必要です。(僕はここで躓きました)

qiita.swift

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

  @IBOutlet private weak var sampleCollectionView: UICollectionView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // データソースを設定しています。
        sampleCollectionView.dataSource = self
        // デリゲートを設定
        sampleCollectionView.delegate = self
        // CollectionViewに使用するセルのクラスを登録します
        sampleCollectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell") 
    }

データソースの設定
CollectionViewに表示するデータを管理するために、UICollectionViewDataSourceプロトコルを実装する必要があります。このプロトコルを通じて、表示するアイテムの数や各セルに表示する内容を指定します。データソースの設定は、CollectionViewが機能するための基盤となります。

デリゲートの活用
UICollectionViewDelegateプロトコルを利用することで、ユーザーのインタラクションに応じた振る舞い（例えば、アイテムの選択や選択後に画面遷移を行う際）を定義できます。デリゲートの設定は、アプリケーションのユーザビリティとインタラクティブな要素を向上させるために重要です。

レイアウトのカスタマイゼーション
UICollectionViewDelegateFlowLayoutクラスやカスタムレイアウトクラスを使用して、セルの配置やサイズ、セクション間のスペーシングなどを調整します。レイアウトのカスタマイゼーションにより、アプリケーションのビジュアルデザインを強化し、より良いユーザーエクスペリエンスを提供することができます。

Cellのレイアウトを設定する方法

CollectionViewを扱っている際に一番苦戦したのがCellのレイアウト調整です。
今回は正方形のCellを3列で表示させCellの感覚は10ポイントとします。

qiita.Swift

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let numberOfColumns: CGFloat = 3 // 列数を3に設定
        let totalSpacing = (numberOfColumns - 1) * 10 // セル間の隙間の合計を計算 (列数-1) * 隙間
        
        // コレクションビューの幅から隙間を引いて、列数で割り、セルの幅を計算
        let cellWidth = (collectionView.bounds.width - totalSpacing) / numberOfColumns
        
        // セルの幅と高さを同じにする (正方形のセル) または適切な高さに設定
        return CGSize(width: cellWidth, height: cellWidth) // 正方形で表示するため幅と高さを同じにしています
    }
    
    // セル間の隙間を設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10 // 横方向の隙間を10ポイントに設定
    }
    
    // 行間の隙間を設定
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10 // 縦方向の隙間を10ポイントに設定
    }

最初に一列に表示するCellの個数を指定します（今回は3列）
Cell間の感覚の合計を計算します。（今回の場合　3 - 1） * 10
続いて一個あたりのCellのサイズを計算します。
計算式は(コレクションビューの幅 - Cellの幅) / セルの列数　です

※少し数値をいじるととんでもなくレイアウトが崩れてしまうので練習が必要かもしれません。

最後に

以上で簡易的ですが、CollectionViewを実装する上での基本的な実装方法を終わります。
まだまだ未熟者ですのでご指摘等ございましたらお気軽にコメントいただけると幸いです。

弊社では、経験の有無を問わず採用を行っています。
興味のある方は是非カジュアル面談しましょう！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Swift】CollectionViewを使って気づいたこと

はじめに

目次

CollectionViewについての簡単な概要

CollectionViewの基本設定について

Cellのレイアウトを設定する方法

最後に