适合每行uicollectionview中给定数量的单元格 [英] Fit given number of cells in uicollectionview per row

问题描述

我有一个集合视图，假设每行有 4 个单元格.我知道要完成这一切，我需要做的就是将 collectionview.frame.size.width 除以 4.这很容易.但是，我想不通的是如何考虑集合视图侧面的插图和单元格之间的间距.我在集合视图的左侧和右侧有 10 个像素的插图，并且单元格之间有 10 个像素的间距.考虑到这 10 px 插图，我如何计算所需的单元格宽度?

I have a collection view and I would like to have let's say 4 cells per row. I know that to accomplish this all I need to do is divide collectionview.frame.size.width by 4. This is easy. However, what I can not figure out, is how to take into consideration the insets at the side of the collection view and the spacing between the cells. I have 10 pixel insets on the left and right of the collection view, as well as there is a 10 pixel spacing between the cells. How can I calculate the required cell width taking these 10 px insets into account?

推荐答案

为了更好地解释数学，faarwa 的示例仅适用于 4 个单元格.假设 1 行，4 个单元格项目有 5 块间距(伸出 4 个手指并数从小指远端到食指远端的空间).

To better explain the math, faarwa's example is only for 4 cells. Assuming 1 row, there are 5 blocks of spacing for 4 cell items (stick out 4 fingers and count the spaces from far end of pinky to far end of index finger).

一行中的 n 个单元格总是有 n + 1 个空格.Faarwa 假设每个空间为 10，因此他将 5 个单元格乘以 10 得到 50.您需要计算填充后还有多少空间可供使用 - 因此，如果假设您的屏幕宽度为 200，则必须将这两个值减去获取剩余宽度，或(collectionView.frame.size.width-50)".

There will always be n + 1 spaces for the n cells you have in one row. Faarwa assumes each space is 10 so he multiplied 5 cells by 10 to get 50. You need to figure out how much space you have left to work with after padding— so if assuming your screen width is 200, you must subtract the two values to get the remaining width, or "(collectionView.frame.size.width-50)".

继续假设宽度为 200 和 4 个单元格项目，您必须将差 (150) 除以 4 以获得每个单元格应为等间距的宽度.

Continuing with the 200 width assumption and 4 cell items, you must divide your difference (150) by 4 to get the width each cell should be for equal spacing.

实验并经历一些试验和错误，但这里是我用来从一组集合对象中获取练习集集合视图的 2 种方法.

Experiment and go through some trial and error, but here are the 2 methods I used to get a collection view of exercise sets from an array of set objects.

// UICollectionViewDataSource method

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, 
sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    let numberOfSets = CGFloat(self.currentExSets.count)

    let width = (collectionView.frame.size.width - (numberOfSets * view.frame.size.width / 15))/numberOfSets

    let height = collectionView.frame.size.height / 2

    return CGSizeMake(width, height);
}

// UICollectionViewDelegateFlowLayout method

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAtIndex section: Int) -> UIEdgeInsets {

    let cellWidthPadding = collectionView.frame.size.width / 30
    let cellHeightPadding = collectionView.frame.size.height / 4
    return UIEdgeInsets(top: cellHeightPadding,left: cellWidthPadding, bottom: cellHeightPadding,right: cellWidthPadding)
}

屏幕截图:

两个单元格项目

四个单元格项目

这篇关于适合每行uicollectionview中给定数量的单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！