在每行的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.

尝试并进行一些试验和错误，但这里有两种方法，用于从一组设定对象中获取运动集的集合视图。

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

SCREENSHOT：

SCREENSHOT:

两个单元格项目

四个单元格项目
< a href =https://i.stack.imgur.com/DVvRR.jpg =nofollow noreferrer>

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