スポンサーリンク

【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にせず少しの隙間を持たせたかったのでまあこれでいいかと思います私は。。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Swift
スポンサーリンク
スポンサーリンク

コメント

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