UICollectionViewの間隔マージン


181

UICollectionView写真を表示するを持っています。を使用してコレクションビューを作成しましたUICollectionViewFlowLayout。うまくいきますが、余白に間隔を空けたいのですが。それを使用してそれを行うことは可能ですかUICollectionViewFlowLayout、それとも自分で実装する必要がありUICollectionViewLayoutますか?

回答:


333

collectionView:layout:insetForSectionAtIndex:メソッドを使用するUICollectionViewsectionInset、に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)];

Swift 5用に更新

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
       return UIEdgeInsets(top: 25, left: 15, bottom: 0, right: 5)
    }

35
垂直フローレイアウトを使用すると、左右のインセットが機能しないようです...
John

1
サブクラス化されたUICollectionViewFlowLayoutのsectionInsetメソッドをオーバーライドしても、効果はありません。以下で説明するプロパティの設定は機能します。
ドレン、2015

4
注:UICollectionViewDelegateFlowLayoutこのメソッドを使用するには、ViewControllerデリゲートのリストに必ず追加してくださいinsetForSectionAtIndex
David Douglas

98

下のスクリーンショットに示すように、Interface Builderでインセットを設定する

UICollectionViewのセクションインセットの設定

このような結果になります:

セクションインセットを含むコレクションビューセル


2
正解です。セクションの挿入が適切に機能するように、最小の間隔でプレイする必要があることを指摘したかっただけです。
Smit Yash

75

全体に スペースを追加するにはUICollectionView

UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);

同じ行(水平方向にスクロールしている場合は列)の要素の間隔とそのサイズを操作するには:

flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;

5
この作品が、collection.collectionViewLayout@Poojaによって例のようにキャストを必要とします: UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) self.collectionViewLayout;
JWJ

迅速なキャスティングif let flow = collectionViewLayout as? UICollectionViewFlowLayout { flow.itemSize = CGSize(width: 100, height: 100) }
2016年

41

スウィフト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 = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 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

XCode 11.4およびSwift 5の編集

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

動作しません。以下の作品を使用してください。

let flow = UICollectionViewFlowLayout()

ここに画像の説明を入力してください


間隔に色を設定する方法はありますか?
マルティン・セラーノ

1
@MartínDanielだけでは、設定backgroundColorのをcollectionView。またはスーパービューは何でも。
William Hu

1
しかし、縁にマージンはありません
ユーザー924

@ user924エッジのマージンはUIEdgeInsets(上:左:下:右:)で設定できます。垂直方向にスクロールする場合は、左/右インセットを設定します。水平方向にスクロールする場合は、上部と下部のインセットを設定します。
マーシー

40

このページのいくつかの間違った情報を修正するだけです:

1- minimumInteritemSpacing同じ行のアイテム間で使用する最小間隔。

デフォルト値:10.0。

(垂直方向にスクロールするグリッドの場合、この値は同じ行のアイテム間の最小間隔を表します。)

2- minimumLineSpacingグリッド内のアイテムの行間で使用する最小間隔。

参照:http : //developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html


2
これはセクション間の間隔には影響せず、同じセクション内のアイテム間の間隔にのみ影響しますか?
Crashalot

@Crashalot-minimumLineSpacingを意味していませんか?つまり、細胞のすべての行?実際にセクションを使用している場合は、セクションインセットのオプションもあります。
Chucky

これは、ストーリーボードインターフェイスを介して実行するのに役立ちました。横のみのコレクションビューのソリューションを探していました。おかげで+10
ケミコファゴースト

9

最新の迅速な自動レイアウト計算

このスレッドにはすでに便利な回答がたくさん含まれていますが、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 / max(1, 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)

場合itemsInOneLine:1であり、次いでこれは、ここではゼロで割るにはNaNになりますitemsInOneLine / (itemsInOneLine - 1)
TylerJames

1
@TylerJamesありがとう!問題を修正するためにコードを調整しました;)
fredpi

8

使用setMinimumLineSpacing:してsetMinimumInteritemSpacing:UICollectionViewFlowLayout-object。


いいえ、期待どおりに機能しません。setMinimumLineSpacing is:同じ行のアイテム間で使用する最小間隔。また、setMinimumInteritemSpacingは、グリッド内のアイテムの行間で使用する最小間隔です。私の質問は、要素間のスペースではなくマージンについてです。例えば。最初の要素の左と上の間隔。
2012

垂直方向のsrollDirectionを想定すると、最初と最後の行の上と下の間隔にcontentInsetを使用できます。また、セルにマージンを追加することもできます。
ジョナサンシチョン

8

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);

5

CollectionItemsの間にスペースを入れるには、これを使用します

この2行をviewdidloadに書き込みます

UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)

5

にアタッチされinsetForSectionAtUICollectionViewFlowLayoutオブジェクトのプロパティを設定します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);
}

2

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の値を変更することだけで、それに応じて行ごとの項目数が更新されます。さらに、多かれ少なかれ一般的な間隔が必要な場合は、間隔の値を変更できます。

ここに画像の説明を入力してください ここに画像の説明を入力してください


1
いいですね…それは完璧な仕事です。
sohil

1

指定したセルにマージンを追加するには、このカスタムフローレイアウトを使用できます。 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
    }
}

0

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

-1

各セクションの間に10pxの間隔を追加するには、次のように記述します

flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0,10,0);

種類がUICollectionElementKindSectionFooterのUICollectionReusableViewを使用すると、ソリューションが機能しません
Pratik Jamariya

-1
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.