スポンサーリンク

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

Swift
スポンサーリンク

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

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

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

スポンサーリンク

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間の横の繋がりを0にしてみます。

縦の幅を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
        //
        test_collectionview.collectionViewLayout = layout

    }
}

0になっているようです。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

    }
}

なんだこの隙間は笑

わずかな隙間が空いていますが概ねOKでしょう。

この隙間の埋め方を知っている方がいれば教えていただきたいです笑。

ただ、写真表示の最美桜全て0にせず少しの隙間を持たせたかったのでまあこれでいいかと思います私は。。

おすすめ情報ご紹介。

下記リンクよりU-NEXTの契約をすると31日間無料でU-NEXTの全動画約21万作品を見放題です。31日期間に解約すれば0円です。今だけのおすすめ情報なのでまだ登録していない人は是非!

スポンサーリンク
Swift
スポンサーリンク
シェアする
スポンサーリンク
SunnyDayTravel-Blog

コメント

タイトルとURLをコピーしました