UICollectionView
と標準のUICollectionViewFlowLayout
の組み合わせは、かなり多機能なので、適当なプロパティの値を設定すれば、ご説明のようなありがちなレイアウトは実現できるだろうと思ったのですが、リファレンスをちょっと探しただけではそれっぽいものは見つかりませんでした。
uicollectionview center cells horizontally 辺りで検索すると、本家Stack Overflowにいくつかのスレッドが見つかりました。
How to center horizontally UICollectionView Cells?
How to center align the cells of a UICollectionView in Swift3.0?
基本的にはみなUICollectionViewDelegateFlowLayout
に定義されたメソッドを実装して、左右の余白を自前で計算することで実現しなさいと言うことのようです。
以下のコードはその中の回答の一つを焼き直したものです(変数名やコメントの修正だけで本質的には同じ内容)。
//標準のFlowLayoutを使用するものとして、UICollectionViewDelegateFlowLayoutに適合させる
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
//... 以下のメソッドの追加だけで、他の部分はそのままで良いはず
//UICollectionViewDelegateFlowLayoutに定義されたメソッド
//セクションごとに上下左右の余白を示すUIEdgeInsetsを返す
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
guard
let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout,
case let numItems = collectionView.numberOfItems(inSection: section), numItems > 0
else {
return .zero
}
//1セクション分の表示幅の計算(セルを可変サイズにする場合などは要修正)
let minSpacing = flowLayout.minimumInteritemSpacing
let itemWidth = flowLayout.itemSize.width
let minSectionWidth = itemWidth * CGFloat(numItems) + minSpacing * CGFloat(numItems-1)
//CollectionViewのコンテンツ領域の幅の計算
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right
//デフォルトのInsetsの取得
var insets = flowLayout.sectionInset
//セクションの表示幅がコンテンツ領域より小さい時には余白を計算
if minSectionWidth < contentWidth {
let paddingWidth = (contentWidth - minSectionWidth)/2
insets.left = paddingWidth
insets.right = paddingWidth
}
return insets
}
}
注意点としては、
と言う作りになっています。
こちらの環境で適当に設定したプロジェクトでは期待通りに動いているのですが、上記したように、そちらのプロジェクトに合わせるためには若干修正が必要かもしれません。お試しください。