【Swift】CollectionViewの行間（幅・高さ）を変更する方法。

Swift

2020.10.26

今回の記事はSwiftのCollectionView Cellの行間の幅やCellの高さを調整するためのSwfitコードをご紹介します。

最近のアプリでは、写真をアプリないに登場させるのはよくあることなので、是非マスターして使えるようになりましょう。　

初心者向けに初めから実装していきます。

CollectionViewをStoryboardに搭載して紐付けを行う設定
CollectionView関連のSwiftコード追加
CollectionViewCellのサイズ関連の操作を行う
1. 縦の幅を０にする

CollectionViewをStoryboardに搭載して紐付けを行う設定

まずはXcodeにプロジェクトを用意してください。

次に必要な設定はdelegateとdatasourceを設定することです。

次にCellのidentiferを設定します。

Cellをクリックした後右側のツールバーから設定できます。

この設定が終わればXcode側で行うことは特にありません。
Swiftコードに移ります。

CollectionView関連のSwiftコード追加

まずはクラスを追加します。

自身のViewControllerに二つのクラスを追加します。「UICollectionViewDelegate」「UICollectionViewDataSource」

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource  {

       //(省略)
}

こちらを追加するとエラになりますがクラスに必須の関数を用意できていないというものでFixを押すと解消されます。


import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource  {


    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath)
        cell.backgroundcolor = UIColor.yellow
        return cell
    }
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    //（以下省略）
}

この二つの関数では上のものがCellの情報を返しており、今回は黄色にしております。

下の関数はCellの数を返しております。

上記の二つのクラスを追加した場合は最低限でもこの二つを追加する必要があります。

これで最低限のCollectionViewが作成できていると思いますので確認してみてください。

CollectionViewCellのサイズ関連の操作を行う

確認ができればいよいよメインの行間などの幅を見せるところです。

まずはStoryboardにCollectionViewをひもずけます。

ではまずはCell間の横の繋がりを０にしてみます。

縦の幅を０にする


import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource  {

    @IBOutlet weak var test_collectionview: UICollectionView!
　　　
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath)
        cell.backgroundcolor = UIColor.yellow
        return cell
    }
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        test_collectionview.dataSource = self
        let layout = UICollectionViewFlowLayout()
        //
        layout.minimumLineSpacing = 0
        //
        test_collectionview.collectionViewLayout = layout

    }
}

０になっているようです。OKです。

ではこの状態で次はよこの幅も0にしてみましょう。


import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource  {

    @IBOutlet weak var test_collectionview: UICollectionView!
　　　
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath)
        cell.backgroundcolor = UIColor.yellow
        return cell
    }
    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        test_collectionview.dataSource = self
        // レイアウト設定
        let layout = UICollectionViewFlowLayout()
        //
　　　　　layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        //
        test_collectionview.collectionViewLayout = layout

    }
}