【Swift】 UICollectionViewFlowLayoutの余白調整について

どもども。

UICollectionViewでカスタムセルを作成するときに、いつもセルのサイズ調整の仕方がわからなくなるのでちょっとまとめてみます。

StoryBoardは使いません。

 

UICollectionViewFlowLayoutの使い方

まずはざっと使いどころです。

//レイアウトの設定
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width:width / 2, height:200)
layout.sectionInset = UIEdgeInsetsMake(16,16,32,16)
layout.minimumLineSpacing = 30

//ここでコレクションビューに紐付け
let collectView = UICollectionView(frame: self.view.frame,collectionViewLayout: layout)
/* ~~~ */

 

UICollectionViewを使うときに、セルの大きさや余白を設定することができます。

設定をしたら、UICollectionViewを作成するときに指定しておきます。

ちなみにこのlayoutを設定していないとエラーが出ると思います。

 

UICollectionViewFlowLayoutの余白の種類

UICollectionViewFlowLayoutの余白設定のプロパティ(?)は5つ用意されています。

 

var minimumLineSpacing: CGFloat

var minimumInteritemSpacing: CGFloat

var itemSize: CGSize

var estimatedItemSize: CGSize

var sectionInset: UIEdgeInsets

 

1つずつどこがどのように変わっていくのか見ていきます。

まずはitemSizeから

itemSize

これは余白というか、そのまんまセルの大きさです。

その他の余白設定を0にし、

let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width:self.view.frame.width / 2, height:200)

としたとき

img_0104

このようにきっちりと埋まります。

 

layout.itemSize = CGSize(width:200, height:200)

とした時は

img_0105

 

layout.itemSize = CGSize(width:30, height:30)

としたときは

img_0106

といった風になります。

 

つまり以下の画像のように均等に配置されます。

img_0107

 

 

 

このitemSizeを指定した状態で他の余白設定を見ていきます。

・画像の余白部分をグレーで表示

・その他の余白部分は全て0

・itemSizeは横幅が画面幅の半分(self.view.frame.width / 2)、縦が200px

に設定しておきます。

 

 

minimumLineSpacing

minimumLineSpacingはセルの行が変わる時、その行間の余白になります。

 

layout.minimumLineSpacing = 50

と設定した時の実行結果は以下のようになります。

 

img_0108

 

 

minimumInteritemSpacing

minimumInteritemSpacingは列間の余白の最小値を設定します。

 

まずは

layout.minimumInteritemSpacing = 50

とした実行結果から見ていきます。

 

img_0109

 

この実行結果からセル同士の横側に余白がついたのがわかると思います。

もっと詳しく見てみます。

layout.itemSize = CGSize(width:50, height:50)

に変更しておきます。

 

minimumInteritemSpacing = 0のときと 50の時を比較してみましょう。

img_0112

 

この結果からわかるように、列間の余白を設定しています。

 

minimumInteritemSpacing = 50としていても、

もともとitemSizeの設定により50px以上空いていた場合、例えば80px空いていたとすると、列間の余白は80pxになります。

 

estimatedItemSize

estimatedは「推定の」という意味で、推定のセルの大きさを決めるといった風な意味合いになります。

普通のitemSizeとはどう違うのか比較しながら見ていきたいと思います。

 

まず、

layout.itemSize = CGSize(width:0, height:0)
layout.estimatedItemSize = CGSize(width:50,height:50)

とした実行結果から見ていきます。

img_0106

 

itemSizeで50×50を設定した場合と変わりません。

ならばどういったときに使うのかというと、ざっと調べて見たところ、AutoLayoutを用いた際に設定する項目らしいです。

この際、itemSizeの指定はしません。

 

おそらく、AutoLayoutを用いてセルを用意している場合、itemSizeの指定をしてしまうとAutoLayoutが適用されず、itemSizeが優先されてしまうのだと思います。

なので、とりあえず仮のサイズということでestimatedItemSizeを設定しておくと、AutoLayoutが適用される・・・ということだと思います。

 

ちょっと思っていた使い方と違ったのであやふやですみません。。。

 

sectionInset

最後にsectionInsetの説明をしていきます。

sectionInsetは

layout.sectionInset = UIEdgeInsetsMake(上,左,下,右)

といった設定をしていきます。

 

余白部分は以下の通りです。

img_0117

 

左から順にUIEdgeInsetsMakeを(100,0,0,0) 、(0,100,0,0)、(0,0,100,0)、(0,0,0,100)に設定しています。

 

2つのセクションがある場合に

layout.sectionInset = UIEdgeInsetsMake(50,10,50,10)

と設定すると以下のようになります。

 

img_0118

 

まとめ

minimumLineSpacingは行間余白
minimumInteritemSpacingは列間の余白
itemSizeはセルそのものの大きさ
estimatedItemSizeはAutoLayout使用時の仮のセルの大きさ
sectionInsetはセクションの外側の余白(margin)

 

 

UICollectionView自体は割と使っているのに意外と曖昧な部分だったので整理できてよかったです。

何か間違っているところがあれば教えてください・・・・。

 

それではでは

Comments...

コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

記事を書くほどでもないけれどメモっておきたいこと

テスト投稿。

例えばiphone7 の画面サイズ

750 × 1334
半分375 × 667

iOS
more