ios - UICollectionView のセル間隔

Question

のセクションでセル間隔を設定するにはどうすればよいUICollectionViewですか? 5.0 に設定したプロパティがあることはわかっていますが、minimumInteritemSpacingそれでも間隔が 5.0 に表示されません。フローアウトデリゲートメソッドを実装しました。

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{

    return 5.0;
}

それでも私は望ましい結果を得ていません。最小間隔だと思います。最大間隔を設定する方法はありませんか?

シミュレータsc

score 151 · Accepted Answer

トピックが古いことは知っていますが、ここで正しい答えが必要な場合は、次のものが必要です。

標準フローレイアウトをオーバーライドします。

そのような実装を追加します：

- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray *answer = [super layoutAttributesForElementsInRect:rect];

    for(int i = 1; i < [answer count]; ++i) {
        UICollectionViewLayoutAttributes *currentLayoutAttributes = answer[i];
        UICollectionViewLayoutAttributes *prevLayoutAttributes = answer[i - 1];
        NSInteger maximumSpacing = 4;
        NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);

        if(origin + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
            CGRect frame = currentLayoutAttributes.frame;
            frame.origin.x = origin + maximumSpacing;
            currentLayoutAttributes.frame = frame;
        }
    }
    return answer;
}

maximumSpacing は任意の値に設定できます。このトリックは、セル間のスペースが maximumSpacing と正確に等しいことを保証します!!

score 84 · Accepted Answer

水平方向のフローレイアウトを使用すると、セル間の間隔も 10 ポイントになりました。間隔を削除するには、ゼロにするminimumLineSpacingだけでなく、設定する必要がありました。minimumInterItemSpacing

UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];
flow.itemSize = CGSizeMake(cellWidth, cellHeight);
flow.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flow.minimumInteritemSpacing = 0;
flow.minimumLineSpacing = 0;

また、すべてのセルが同じサイズの場合は、デリゲートメソッドを使用する代わりに、フローレイアウトでプロパティを直接設定する方が簡単で効率的です。

score 72 · Accepted Answer

これは最小行間であり、項目間の最小間隔やセル間隔ではないことに注意してください。collectionView のスクロール方向がHORIZONTALであるためです。

垂直の場合、セル間の水平スペースにはセルスペースまたは項目間スペースを設定し、セル間の垂直スペースには行間隔を設定する必要があります。

Objective-C バージョン

- (CGFloat)collectionView:(UICollectionView *)collectionView
                       layout:(UICollectionViewLayout*)collectionViewLayout
    minimumLineSpacingForSectionAtIndex:(NSInteger)section
    {
        return 20;
    }

迅速なバージョン:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 20
}

score 37 · Accepted Answer

次のコードを試して、各アイテム間に 5px の間隔を確保してください。

- (UIEdgeInsets)collectionView:(UICollectionView *) collectionView 
                        layout:(UICollectionViewLayout *) collectionViewLayout 
        insetForSectionAtIndex:(NSInteger) section {

    return UIEdgeInsetsMake(0, 0, 0, 5); // top, left, bottom, right
}

- (CGFloat)collectionView:(UICollectionView *) collectionView
                   layout:(UICollectionViewLayout *) collectionViewLayout
  minimumInteritemSpacingForSectionAtIndex:(NSInteger) section {    
    return 5.0;
}

score 31 · Accepted Answer

IB を使用して、セルまたは行間の間隔を構成する非常に簡単な方法を見つけました。

ストーリーボード/Xib ファイルから UICollectionView を選択し、下の画像で指定されている サイズインスペクターをクリックするだけです。

スペースをプログラムで構成するには、次のプロパティを使用します。

1) 行間のスペースを設定するため。

[self.collectionView setMinimumLineSpacing:5];

2) アイテム/セル間のスペースを設定するため。

[self.collectionView setMinimumInteritemSpacing:5];

score 22 · Accepted Answer

プロパティ名minimumInterItemSpacingに注意してください。これは、正確な間隔ではなく、アイテム間の最小間隔になります。minimumInterItemSpacing を何らかの値に設定すると、間隔がそれよりも小さい値にならないことが保証されます。しかし、より高い値を取得する可能性があります。

実際には、項目間の間隔はitemSizeとsectionInsetのいくつかの要因に依存します。コレクションビューは、これらの値に基づいてコンテンツを動的に配置します。したがって、正確な間隔を保証することはできません。sectionInsetとminimumInterItemSpacingで試行錯誤を行う必要があります。

score 16 · Accepted Answer

Swift 3.0、Xcode 8 の回答

1.コレクションビューデリゲートを設定していることを確認してください

class DashboardViewController: UIViewController {
    @IBOutlet weak var dashboardCollectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()
        dashboardCollectionView.delegate = self
    }
}

2. UICollectionViewDelegate ではなく、 UICollectionViewDelegateFlowLayoutプロトコルを実装します。

extension DashboardViewController: UICollectionViewDelegateFlowLayout {
    fileprivate var sectionInsets: UIEdgeInsets {
        return .zero
    }

    fileprivate var itemsPerRow: CGFloat {
        return 2
    }

    fileprivate var interitemSpace: CGFloat {
        return 5.0
    }

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let sectionPadding = sectionInsets.left * (itemsPerRow + 1)
        let interitemPadding = max(0.0, itemsPerRow - 1) * interitemSpace
        let availableWidth = collectionView.bounds.width - sectionPadding - interitemPadding
        let widthPerItem = availableWidth / itemsPerRow

        return CGSize(width: widthPerItem, height: widthPerItem)
    }

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        insetForSectionAt section: Int) -> UIEdgeInsets {
        return sectionInsets
    }

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0.0
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return interitemSpace
    }
}

score 10 · Accepted Answer

投票された回答(および迅速なバージョン) には小さな問題があります。右側に大きなスペースができます。

これは、セルの間隔が正確になるようにフローレイアウトがカスタマイズされており、float left動作を使用しているためです。

私の解決策は、セクションのインセットを操作して、セクションが中央に配置され、間隔が指定どおりになるようにすることです。

以下のスクリーンショットでは、項目/行の間隔は正確に 8pt ですが、セクションの左右のインセットは 8pt よりも大きくなります (中央揃えにするため):

そのようなSwiftコード：

private let minItemSpacing: CGFloat = 8
private let itemWidth: CGFloat      = 100
private let headerHeight: CGFloat   = 32

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    // Create our custom flow layout that evenly space out the items, and have them in the center
    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: itemWidth, height: itemWidth)
    layout.minimumInteritemSpacing = minItemSpacing
    layout.minimumLineSpacing = minItemSpacing
    layout.headerReferenceSize = CGSize(width: 0, height: headerHeight)

    // Find n, where n is the number of item that can fit into the collection view
    var n: CGFloat = 1
    let containerWidth = collectionView.bounds.width
    while true {
        let nextN = n + 1
        let totalWidth = (nextN*itemWidth) + (nextN-1)*minItemSpacing
        if totalWidth > containerWidth {
            break
        } else {
            n = nextN
        }
    }

    // Calculate the section inset for left and right. 
    // Setting this section inset will manipulate the items such that they will all be aligned horizontally center.
    let inset = max(minItemSpacing, floor( (containerWidth - (n*itemWidth) - (n-1)*minItemSpacing) / 2 ) )
    layout.sectionInset = UIEdgeInsets(top: minItemSpacing, left: inset, bottom: minItemSpacing, right: inset)

    collectionView.collectionViewLayout = layout
}

score 2 · Accepted Answer

Swift 3Instagramのような細胞株の間隔での私の解決策:

lazy var collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.backgroundColor = UIColor.rgb(red: 227, green: 227, blue: 227)
    cv.showsVerticalScrollIndicator = false
    layout.scrollDirection = .vertical
    layout.minimumLineSpacing = 1
    layout.minimumInteritemSpacing = 1
    return cv
}()

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    switch UIDevice.current.modelName {
    case "iPhone 4":
        return CGSize(width: 106, height: 106)
    case "iPhone 5":
        return CGSize(width: 106, height: 106)
    case "iPhone 6,7":
        return CGSize(width: 124, height: 124)
    case "iPhone Plus":
        return CGSize(width: 137, height: 137)
    default:
        return CGSize(width: frame.width / 3, height: frame.width / 3)
    }
}

プログラムでデバイスを検出する方法: https://stackoverflow.com/a/26962452/6013170

score 1 · Accepted Answer

OPと同様の問題に遭遇しました。collectionView残念ながら、の内容が適切に中央に配置されないため、受け入れられた回答はうまくいきませんでした。したがって、私は別の解決策を思いつきました。これは、のすべてのアイテムが同じ width であることのみを必要とするものでcollectionView、これは質問の場合のようです:

#define cellSize 90

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    float width = collectionView.frame.size.width;
    float spacing = [self collectionView:collectionView layout:collectionViewLayout minimumInteritemSpacingForSectionAtIndex:section];
    int numberOfCells = (width + spacing) / (cellSize + spacing);
    int inset = (width + spacing - numberOfCells * (cellSize + spacing) ) / 2;

    return UIEdgeInsetsMake(0, inset, 0, inset);
}

そのコードは、によって返される値が...minimumInteritemSpacing...すべての間の正確な間隔であるcollectionViewCellことを保証し、さらにセルがすべてまとめて中央に配置されることを保証しますcollectionView

score -1 · Accepted Answer

この方法で遊んでみてください：

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView
                    layout:(UICollectionViewLayout*)collectionViewLayout
    insetForSectionAtIndex:(NSInteger)section {

    UIEdgeInsets insets = UIEdgeInsetsMake(?, ?, ?, ?);

    return insets;
}

ios - UICollectionView のセル間隔

25 に答える 25

Related

Reference