UICollectionView间距边距

Question

我有一个UICollectionView显示照片.我使用了创建了collectionview UICollectionViewFlowLayout.它工作得很好,但我希望在边距上有间距.是否有可能使用UICollectionViewFlowLayout或必须实现我自己的UICollectionViewLayout？

Answer 1

您可以使用该collectionView:layout:insetForSectionAtIndex:方法UICollectionView或者设置附加到您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)];

Answer 2

在Interface Builder中设置insets,如下面的屏幕截图所示

会导致这样的事情:

Answer 3

要在整个 上添加间距UICollectionView:

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

要使用同一行的元素之间的间距(如果您是水平滚动,则为列),以及它们的大小:

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

Answer 4

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

1- minimumInteritemSpacing:同一行中项目之间使用的最小间距.

默认值:10.0.

(对于垂直滚动网格,此值表示同一行中项目之间的最小间距.)

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

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

Answer 5

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

Answer 6

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

Answer 7

现代Swift,自动布局计算

虽然这个帖子已经包含了许多有用的答案,但我想根据William Hu的答案添加一个现代的Swift版本.它还改进了两件事:

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

这是代码:

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

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

Answer 9

在CollectionItems 之间放置空格使用它

在viewdidload中写这两行

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

Answer 10

设置附加到您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);
}