ios UICollectionView 间距边距

UICollectionView spacing margins

提问by Mert

I have a UICollectionViewwhich shows photos. I have created the collectionview using UICollectionViewFlowLayout. It works good but I would like to have spacing on margins. Is it possible to do that using UICollectionViewFlowLayoutor must I implement my own UICollectionViewLayout?

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

回答by michael23

You can use the collectionView:layout:insetForSectionAtIndex:method for your UICollectionViewor set the sectionInsetproperty of the UICollectionViewFlowLayoutobject attached to your UICollectionView:

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

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

or

或者

UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];

回答by krzymar

Setting up insets in Interface Builder like shown in the screenshot below

在界面生成器中设置插图，如下面的屏幕截图所示

Will result in something like this:

将导致这样的事情：

回答by marmor

To add spacing on the entireUICollectionView:

要在整个上添加间距UICollectionView：

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

To play with the spacing betweenelements of the same row (column if you're scrolling horizontally), and their sizes:

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

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

回答by William Hu

Swift 4

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

EDITXCode 11.4 and swift 5

编辑XCode 11.4 和 swift 5

let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout

doesn't work. Use below works.

不起作用。使用下面的作品。

let flow = UICollectionViewFlowLayout()

let flow = UICollectionViewFlowLayout()

回答by Felix

Just to correct some wrong information in this page:

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

1- minimumInteritemSpacing: The minimum spacing to use between items in the same row.

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

The default value: 10.0.

默认值：10.0。

(For a vertically scrolling grid, this value represents the minimum spacing between items in the same row.)

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

2- minimumLineSpacing: The minimum spacing to use between lines of items in the grid.

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

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

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

回答by fredpi

Modern Swift, Automatic Layout Calculation

现代 Swift，自动布局计算

While this thread already contains a bunch of useful answers, I want to add a modern Swift version, based on William Hu's answer. It also improves two things:

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

• The spacing between different lines will now always match the spacing between items in the same line.
• By setting a minimum width, the code automatically calculates the number of items in a row and applies that style to the flow layout.

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

Here's the code:

这是代码：

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

回答by vmeyer

Using collectionViewFlowLayout.sectionInsetor collectionView:layout:insetForSectionAtIndex:are correct.

使用collectionViewFlowLayout.sectionInset或collectionView:layout:insetForSectionAtIndex:是正确的。

However, if your collectionView has multiple sections and you want to add margin to the whole collectionView, I recommend to use the scrollView contentInset :

但是，如果您的 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);

回答by Jonathan Cichon

use setMinimumLineSpacing:and setMinimumInteritemSpacing:on the UICollectionViewFlowLayout-Object.

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

回答by Pooja Jalan

To put space between CollectionItems use this

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

write this two Line in viewdidload

在viewdidload中写这两行

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

回答by PinkeshGjr

Set the insetForSectionAtproperty of the UICollectionViewFlowLayoutobject attached to your UICollectionView

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

Make sure to add this protocol

确保添加此协议

UICollectionViewDelegateFlowLayout

Swift

迅速

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

Objective - C

目标-C

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}