スポンサーリンク

【Swift】CollectionViewのCellサイズを指定する方法。

Swift
スポンサーリンク

今回の記事はSwiftのアプリ開発でおそらく非常に重要になってくるCollectionViewのCellサイズを指定する方法に関しての記事になります。

初心者にも分かりやすいように記事を記載いたしますので是非参考にしてください。

まずCollectionViewに表示を行う方法に関しての記事は下記を参考に行ってみてください。

【Swift】CollectionViewにインスタのように画像を表示する方法

こちらができた前提で話を進めていきます。

スポンサーリンク

CollectionViewのCellサイズを指定

CollectionViewのCellのサイズを指定する為には下記メソッドが存在します。

import UIKit

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
    
    @IBOutlet weak var collectionview: UICollectionView!
        
    var screen_width:CGFloat = 0
    var screen_height:CGFloat = 0
    var image_width:CGFloat = 0
    var image_height:CGFloat = 0
    screen_width = UIScreen.main.bounds.size.width
    screen_height = UIScreen.main.bounds.size.height
    image_width = (screen_width - 45)/4
    image_height = image_width*1.3

    // Screenサイズに応じたセルサイズを返す
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: image_width, height: image_width*1.4)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionview.delegate = self
    }    
}

Cellサイズを指定しているコードはこちらです。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: image_width, height: image_width*1.4)
    }

上記まとめのコードポイントとしては「UICollectionViewDelegateFlowLayout」のdelegateをクラスに追加しているところです。このdelegateを設定する必要があり、これを設定していないとCellサイズを変更してくれないです。その為、CollectionViewをStoryboardのoutletとして紐付けておく必要があります。

それでは今回の記事は以上になります。他にも多数のSwift関連記事を記載しているので気になる方は是非参考にしてみてください。

おすすめ情報ご紹介。

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

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

コメント

  1. […] 「【Swift】CollectionViewのCellサイズを指定する方法」 […]

  2. […] 「CollectionViewのCellサイズを指定する」 […]

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