ios - UICollectionView 间距边距

Question

我有一个UICollectionView显示照片的。我已经使用UICollectionViewFlowLayout. 它工作得很好，但我想在边距上有间距。是否可以使用UICollectionViewFlowLayout或必须自己实现UICollectionViewLayout？

score 355 · Accepted Answer

您可以使用您的collectionView:layout:insetForSectionAtIndex:方法UICollectionView或设置附加到您sectionInset的对象的属性：UICollectionViewFlowLayoutUICollectionView

- (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)
    }

score 105 · Accepted Answer

在 Interface Builder 中设置插入，如下面的屏幕截图所示

为 UICollectionView 设置部分插图

将导致这样的事情：

带有部分插图的集合视图单元格

score 76 · Accepted Answer

要在整个 UICollectionView上添加间距：

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

要使用同一行的元素之间的间距（如果您水平滚动，则为列）及其大小：

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

score 44 · Accepted Answer

斯威夫特 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)

    //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
    let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) 
    flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
    flow.minimumInteritemSpacing = 3
    flow.minimumLineSpacing = itemSpacing

编辑

如果要更改为scrollDirction水平：

flow.scrollDirection = .horizontal

笔记

如果您在一行中设置的项目不正确，请检查您的集合视图是否有填充。那是：

let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1)

应该是 collectionView 的宽度。

score 43 · Accepted Answer

只是为了更正此页面中的一些错误信息：

1- minimumInteritemSpacing：在同一行中的项目之间使用的最小间距。

默认值：10.0。

（对于垂直滚动的网格，此值表示同一行中项目之间的最小间距。）

2- minimumLineSpacing：网格中项目行之间使用的最小间距。

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

score 10 · Accepted Answer

现代 Swift，自动布局计算

虽然这个线程已经包含了一堆有用的答案，但我想添加一个现代的 Swift 版本，基于 William Hu 的答案。它还改进了两件事：

不同行之间的间距现在将始终与同一行中项目之间的间距匹配。
通过设置最小宽度，代码会自动计算一行中的项目数并将该样式应用于流布局。

这是代码：

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

score 8 · Accepted Answer

8

在-Object上使用setMinimumLineSpacing:和。setMinimumInteritemSpacing:UICollectionViewFlowLayout

于 2012-12-20T11:18:57.473 回答

score 8 · Accepted Answer

使用collectionViewFlowLayout.sectionInsetorcollectionView: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);

score 5 · Accepted Answer

要在 s 之间放置空格，CollectionItem请使用此

在 viewdidload 中写下这两行

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

score 5 · Accepted Answer

设置附加到您insetForSectionAt的对象的属性UICollectionViewFlowLayoutUICollectionView

确保添加此协议

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

score 2 · Accepted Answer

在 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 值，它会相应地更新每行的项目数。此外，如果您想要更多或更少的一般间距，您可以更改间距值。

score 1 · Accepted Answer

要为指定单元格添加边距，您可以使用此自定义流布局。 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
    }
}

score 0 · Accepted Answer

在 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

score -1 · Accepted Answer

To add 10px separation between each section just write this

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

score -1 · Accepted Answer

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {       
         return UIEdgeInsetsMake(7, 10, 5, 10);    
   }

ios - UICollectionView 间距边距

15 回答 15

为Swift 5更新

现代 Swift，自动布局计算

Related

Reference