UICollectionViewの間隔の余白
写真を表示するUICollectionViewがあります。 UICollectionViewFlowLayoutを使用してコレクションビューを作成しました。うまく機能しますが、余白に余裕を持たせたいのですが。 UICollectionViewFlowLayoutを使用してそれを行うことは可能ですか、それとも私は自分自身でUICollectionViewLayoutを実装する必要がありますか？
UICollectionViewにcollectionView:layout:insetForSectionAtIndex:メソッドを使用するか、sectionInsetにアタッチされているUICollectionViewFlowLayoutオブジェクトのUICollectionViewプロパティを設定できます。
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(top, left, bottom, right);
}
または
UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];
下のスクリーンショットに示すように、Interface Builderでインセットを設定する
このような結果になります。
全体UICollectionViewにスペースを追加するには：
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);
同じ行（水平方向にスクロールしている場合は列）の間要素の間隔とそのサイズを指定して再生します。
flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;
このページの誤った情報を修正するためだけに：
1-minimumInteritemSpacing：同じ行内の項目間で使用する最小間隔。
デフォルト値は10.0です。
（垂直スクロールグリッドの場合、この値は同じ行内の項目間の最小間隔を表します。）
2-minimumLineSpacing：グリッド内の項目の行間に使用する最小間隔。
Swift 4
let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout // If you create collectionView programmatically then just create this flow by UICollectionViewFlowLayout() and init a collectionView by this flow.
let itemSpacing: CGFloat = 3
let itemsInOneLine: CGFloat = 3
flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as UIScreen.main.bounds.size.width here.
flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
flow.minimumInteritemSpacing = 3
flow.minimumLineSpacing = 3
UICollectionViewFlowLayoutname __-オブジェクトにsetMinimumLineSpacing:およびsetMinimumInteritemSpacing:を使用してください。
現代のスウィフト、自動レイアウト計算
このスレッドにはすでにたくさんの役に立つ答えが含まれていますが、William Huの答えに基づいて現代のSwiftバージョンを追加したいと思います。それはまた2つのことを改善します：
- 異なる行の間隔は、同じ行の項目間の間隔と常に一致します。
- 最小幅を設定することで、コードは自動的に行内の項目数を計算し、そのスタイルをフローレイアウトに適用します。
これがコードです：
// Create flow layout
let flow = UICollectionViewFlowLayout()
// Define layout constants
let itemSpacing: CGFloat = 1
let minimumCellWidth: CGFloat = 120
let collectionViewWidth = collectionView!.bounds.size.width
// Calculate other required constants
let itemsInOneLine = CGFloat(Int((collectionViewWidth - CGFloat(Int(collectionViewWidth / minimumCellWidth) - 1) * itemSpacing) / minimumCellWidth))
let width = collectionViewWidth - itemSpacing * (itemsInOneLine - 1)
let cellWidth = floor(width / itemsInOneLine)
let realItemSpacing = itemSpacing + (width / itemsInOneLine - cellWidth) * itemsInOneLine / (itemsInOneLine - 1)
// Apply values
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
flow.minimumInteritemSpacing = realItemSpacing
flow.minimumLineSpacing = realItemSpacing
// Apply flow layout
collectionView?.setCollectionViewLayout(flow, animated: false)
collectionViewFlowLayout.sectionInsetまたはcollectionView:layout:insetForSectionAtIndex:を使用することは正しいです。
ただし、collectionViewに複数のセクションがあり、collectionView全体に余白を追加したい場合は、scrollViewのcontentInsetを使用することをお勧めします。
UIEdgeInsets collectionViewInsets = UIEdgeInsetsMake(50.0, 0.0, 30.0, 0.0);
self.collectionView.contentInset = collectionViewInsets;
self.collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(collectionViewInsets.top, 0, collectionViewInsets.bottom, 0);
CollectionItemの間にスペースを入れるにはこれを使います。
viewdidloadにこの2行を書いてください
UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)
insetForSectionAtにアタッチされているUICollectionViewFlowLayoutオブジェクトのUICollectionViewプロパティを設定します。
必ずこのプロトコルを追加してください
UICollectionViewDelegateFlowLayout
速い
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets (top: top, left: left, bottom: bottom, right: right)
}
目的 - C
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(top, left, bottom, right);
}
指定したセルに余白を追加する場合は、このカスタムフローレイアウトを使用できます。 https://github.com/voyages-sncf-technologies/VSCollectionViewCellInsetFlowLayout /
extension ViewController : VSCollectionViewDelegateCellInsetFlowLayout
{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
if indexPath.item == 0 {
return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
}
return UIEdgeInsets.zero
}
}
Objective-Cでは
CGFloat spacing = 5;
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*)_habbitCollectionV.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(0, spacing, 0, spacing);
CGFloat itemsPerRow = 2;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat oneMore = itemsPerRow + 1;
CGFloat width = screenRect.size.width - spacing * oneMore;
CGFloat height = width / itemsPerRow;
flow.itemSize = CGSizeMake(floor(height), height);
flow.minimumInteritemSpacing = spacing;
flow.minimumLineSpacing = spacing;
あなたがしなければならないのは、itemsPerRow値を変更することだけであり、それはそれに応じて行あたりの項目数を更新するでしょう。さらに、多かれ少なかれ一般的な間隔が必要な場合は、間隔の値を変更できます。
Swift 4とautoLayoutでは、次のようにsectionInsetを使用できます。
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: (view.frame.width-40)/2, height: (view.frame.width40)/2) // item size
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10) // here you can add space to 4 side of item
collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout) // set layout to item
collectionView?.register(ProductCategoryCell.self, forCellWithReuseIdentifier: cellIdentifier) // registerCell
collectionView?.backgroundColor = .white // background color of UICollectionView
view.addSubview(collectionView!) // add UICollectionView to view