我如何在UICollectionView的一个部分设置单元格间距?我知道有一个属性minimumInteritemSpacing,我已经将它设置为5.0,但间距仍然没有出现5.0。我已经实现了flowout委托方法。

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

    return 5.0;
}

我仍然没有得到想要的结果。我认为这是最小间距。有没有什么方法可以设置最大间距?


当前回答

记住,它是最小行间距,而不是最小项间距或单元格间距。因为你的collectionView的滚动方向是水平的。

如果是垂直的,则需要为单元格之间的水平空间设置单元格空间或项间空间,为单元格之间的垂直空间设置行间距。

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
}

其他回答

请注意属性名minimumInterItemSpacing。这将是项目之间的最小间距,而不是精确的间距。如果你设置minimumInterItemSpacing为某个值,你可以确保spacing不会小于该值。但有机会获得更高的价值。

实际上,项目之间的间距取决于几个因素itemSize和sectionInset。集合视图根据这些值动态放置内容。所以你不能保证精确的间距。你应该用sectionInset和minimumInterItemSpacing做一些试错。

我使用monotouch,所以名称和代码会有点不同,但你可以通过确保集合视图的宽度等于(x *单元格宽度)+ (x-1) * MinimumSpacing与x =每行单元格的数量来做到这一点。

只需要根据MinimumInteritemSpacing和Cell的宽度执行以下步骤

1)我们根据单元格大小+当前插入+最小间距计算每行项目的数量

float currentTotalWidth = CollectionView.Frame.Width - Layout.SectionInset.Left - Layout.SectionInset.Right (Layout = flowlayout)
int amountOfCellsPerRow = (currentTotalWidth + MinimumSpacing) / (cell width + MinimumSpacing)

2)现在你有了所有信息来计算集合视图的预期宽度

float totalWidth =(amountOfCellsPerRow * cell width) + (amountOfCellsPerRow-1) * MinimumSpacing

3)所以当前宽度与预期宽度之差为

float difference = currentTotalWidth - totalWidth;

4)现在调整insets(在本例中,我们将其添加到右侧,因此集合视图的左侧位置保持不变

Layout.SectionInset.Right = Layout.SectionInset.Right + difference;

回答Swift 3.0, Xcode 8

1.确保你设置了集合视图委托

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

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

2.实现uicollectionviewdelegatflowlayout协议,而不是UICollectionViewDelegate。

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

投票的答案(以及快速版本)有一个小问题:右边会有一个很大的空格。

这是因为流布局是定制的,以使单元格间距精确,具有浮动左行为。

我的解决方案是操纵部分插入,使部分是对齐中心,但间距是完全指定的。

在下面的截图中,项目/行间距正好是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
}

故事板的方法

在你的故事板中选择CollectionView,然后进入尺寸检查器,设置单元格和行的最小间距为5

Swift 5编程方式

lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal

        //Provide Width and Height According to your need
        let width = UIScreen.main.bounds.width / 4
        let height = UIScreen.main.bounds.height / 10
        layout.itemSize = CGSize(width: width, height: height)

        //For Adjusting the cells spacing
        layout.minimumInteritemSpacing = 5
        layout.minimumLineSpacing = 5

        return UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    }()