【Swift】 UICollectionViewFlowLayoutの余白調整について
どもども。
UICollectionViewでカスタムセルを作成するときに、いつもセルのサイズ調整の仕方がわからなくなるのでちょっとまとめてみます。
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の余白設定のプロパティ(?)は５つ用意されています。
var minimumLineSpacing: CGFloat
var minimumInteritemSpacing: CGFloat
var sectionInset: UIEdgeInsets
１つずつどこがどのように変わっていくのか見ていきます。
まずはitemSizeから
itemSize
これは余白というか、そのまんまセルの大きさです。
その他の余白設定を０にし、
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width:self.view.frame.width / 2, height:200)としたとき
このようにきっちりと埋まります。
layout.itemSize = CGSize(width:200, height:200)とした時は
layout.itemSize = CGSize(width:30, height:30)としたときは
といった風になります。
つまり以下の画像のように均等に配置されます。
このitemSizeを指定した状態で他の余白設定を見ていきます。
・画像の余白部分をグレーで表示
・その他の余白部分は全て０
・itemSizeは横幅が画面幅の半分(self.view.frame.width / 2)、縦が200px
に設定しておきます。
minimumLineSpacing
minimumLineSpacingはセルの行が変わる時、その行間の余白になります。
layout.minimumLineSpacing = 50と設定した時の実行結果は以下のようになります。
minimumInteritemSpacing
minimumInteritemSpacingは列間の余白の最小値を設定します。
まずは
layout.minimumInteritemSpacing = 50とした実行結果から見ていきます。
この実行結果からセル同士の横側に余白がついたのがわかると思います。
もっと詳しく見てみます。
layout.itemSize = CGSize(width:50, height:50)に変更しておきます。
minimumInteritemSpacing = 0のときと 50の時を比較してみましょう。
この結果からわかるように、列間の余白を設定しています。
minimumInteritemSpacing = 50としていても、
もともとitemSizeの設定により50px以上空いていた場合、例えば80px空いていたとすると、列間の余白は80pxになります。
estimatedItemSize
estimatedは「推定の」という意味で、推定のセルの大きさを決めるといった風な意味合いになります。
普通のitemSizeとはどう違うのか比較しながら見ていきたいと思います。
まず、
layout.itemSize = CGSize(width:0, height:0)
layout.estimatedItemSize = CGSize(width:50,height:50)とした実行結果から見ていきます。
itemSizeで50×50を設定した場合と変わりません。
ならばどういったときに使うのかというと、ざっと調べて見たところ、AutoLayoutを用いた際に設定する項目らしいです。
この際、itemSizeの指定はしません。
おそらく、AutoLayoutを用いてセルを用意している場合、itemSizeの指定をしてしまうとAutoLayoutが適用されず、itemSizeが優先されてしまうのだと思います。
なので、とりあえず仮のサイズということでestimatedItemSizeを設定しておくと、AutoLayoutが適用される・・・ということだと思います。
ちょっと思っていた使い方と違ったのであやふやですみません。。。
sectionInset
最後にsectionInsetの説明をしていきます。
sectionInsetは
layout.sectionInset = UIEdgeInsetsMake(上,左,下,右)といった設定をしていきます。
余白部分は以下の通りです。
左から順にUIEdgeInsetsMakeを(100,0,0,0) 、(0,100,0,0)、(0,0,100,0)、(0,0,0,100)に設定しています。
２つのセクションがある場合に
layout.sectionInset = UIEdgeInsetsMake(50,10,50,10)と設定すると以下のようになります。
まとめ
minimumLineSpacingは行間余白 minimumInteritemSpacingは列間の余白 itemSizeはセルそのものの大きさ estimatedItemSizeはAutoLayout使用時の仮のセルの大きさ sectionInsetはセクションの外側の余白(margin)
UICollectionView自体は割と使っているのに意外と曖昧な部分だったので整理できてよかったです。
何か間違っているところがあれば教えてください・・・・。
それではでは
コメントはありません。
現在コメントフォームは工事中です。