1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CollectionView Cellのサイズ決定の備忘録

Last updated at Posted at 2021-02-17

#Cellのサイズを決定する方法は2種類ある

  • Main.Storyboardで設定
  • コードで実装

##storyboardで設定
スクリーンショット 2021-02-17 21.39.52.png

ViewControllerにCollectionViewを追加し、上の画像のような設定項目の数値を変更することでCellサイズを変更することができる。

この際、Estimate Sizeが
スクリーンショット 2021-02-17 21.45.52.png
上の画像のようにCustomになている必要がある。
あとは、好きなようにCellサイズを変更したりヘッターやフッターなどを設定することで実装することができる。

  • メリット
  • 比較的実装しやすい
  • サイズの管理がしやすい
  • デメリット
  • 固定値しか設定できない(画面サイズによるCellサイズを動的に変動させることができない)

##コードで実装する

    @IBOutlet weak var CollectionView: UICollectionView!
    @IBOutlet weak var CellLayout: UICollectionViewFlowLayout!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        CellLayout.itemSize = CGSize(width: 300, height: 100)
    }

上の画像のようにIBOutletで下の画像にある立方体のアイコンのUICollectionViewFlowLayoutを繋ぐ。
スクリーンショット 2021-02-17 22.01.30.png

こうすることで、コード上でCellのサイズやヘッターやフッターなどを設定することができる。
上の画像の
CellLayout.itemSize = CGSize(width: 300, height: 100)
はCellのサイズを決めるためのコーディングである。コードでは利用するiPhoneの画面サイズに応じたCellの大きさを設定することができる。

#storyboardとコードの両方で設定した場合のCellサイズ

基本的にstoryboardのEstimate Sizeが何になっているかで優先度が決定する。
まず、Customになっている場合コードよりStoryboardの設定が優先され、Noneになっている場合、コードでの実装が優先される。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?