等距集合ViewCells?

时间:2017-05-24 05:00:40

标签: ios swift uicollectionview

我有UICollectionView个大小相同的单元格。我想让单元格之间以及单元格之间的距离和集合视图的左右之间的距离都相等,每行有2个单元格。

每个单元格的内容都是水平居中的,所以我尝试将单元格的宽度设置为集合视图宽度的一半:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: eventCollectionView.frame.width/2, height: 111)
}

但这会产生以下结果:

pic

如图所示,两个单元格的宽度为1/4和3/4。相反,我希望它们处于1/3和2/3,因此它们和边缘之间的空间都是相等的。

有人知道我是如何做到这一点的吗?

4 个答案:

答案 0 :(得分:2)

使用以下代码

fileprivate var defaultspacing: CGFloat = 5

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    var size: CGSize = .zero

    let width = (SCREEN_WIDTH - (3 * defaultspacing))/2
    size = CGSize(width: width, height: width)
    return size;
}

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

    return UIEdgeInsetsMake(self.defaultspacing, self.defaultspacing, 0, self.defaultspacing);
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {

    return self.defaultspacing;
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
{
    return self.defaultspacing;

}

答案 1 :(得分:1)

为此,您必须从集合视图的左侧和右侧设置故事板中的部分Inset属性,还要设置您想要的故事板的Min Spacing属性enter image description here

在我的情况下,我想要从侧面5 px和2个单元格之间5 px。

并在委托方法中写,

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: (eventCollectionView.frame.width - 15)/2, height: 111)
}

答案 2 :(得分:1)

在班级中添加以下方法

您可以根据需要进行更改

func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: CGFloat(collectionView.frame.size.width / 2 -10), height: CGFloat(111)) // here 10 is the space of cells
    }

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        insetForSectionAt section: Int) -> UIEdgeInsets{
        return UIEdgeInsetsMake(2, 2, 2, 2)
    }

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10.0
    }

    func  collectionView(_ collectionView: UICollectionView,
                         layout collectionViewLayout: UICollectionViewLayout,
                         minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10.0
    }

答案 3 :(得分:1)

图片很有意义。我的解决方案适用于所有设备。

<强>为什么吗 请仔细阅读解决方案。

第1步:

我的基本布局是iphone 7 plus,我已计算出这些设备。计算完成是因为我需要支持所有设备。所以我做了一些常量如下:

var SCREEN_WIDTH = UIScreen.main.bounds.size.width
var SCREEN_HEIGHT = UIScreen.main.bounds.size.height
var BASE_SCREEN_HEIGHT:CGFloat = 736.0
var SCREEN_MAX_LENGTH = max(SCREEN_WIDTH, SCREEN_HEIGHT)
var ASPECT_RATIO_RESPECT_OF_7P = SCREEN_MAX_LENGTH / BASE_SCREEN_HEIGHT

let MINIMUM_INTERITEM_SPACING:CGFloat = 46 //My Default Inter Cell Spacing for iphone 7plus as i have designed in it.
var ITEM_WIDTH:CGFloat  = 138 //for iPhone 7 plus.initial value
var ITEM_HEIGHT:CGFloat = 138 //for iphone 7 plus.initial value
let NUMBER_OF_CELLS_IN_PORTRAIT:CGFloat = 2
let NUMBER_OF_CELLS_IN_LANDSCAPE:CGFloat = 5

第2步:

然后我必须根据细胞之间的确切空间计算细胞大小。

func  calculateCellSize(screenWidth:CGFloat , cellItem:CGFloat) {
    ITEM_WIDTH = (screenWidth - MINIMUM_INTERITEM_SPACING * 3 * 
ASPECT_RATIO_RESPECT_OF_7P  * (cellItem-1)) / cellItem  - 1// This 1 
has been subtracted from ITEM_WIDTH to remove mantissa
    ITEM_HEIGHT = ITEM_WIDTH
}

第3步:

  1. 对于单元格间距,您需要调用以下方法。

    public func collectionView(_ collectionView:UICollectionView,layout     collectionViewLayout:UICollectionViewLayout,     minimumInteritemSpacingForSectionAt section:Int) - &gt; CGFloat {       返回MINIMUM_INTERITEM_SPACING * ASPECT_RATIO_RESPECT_OF_7P }

  2. 对于填充(左边距和右边距),您必须调用此方法。

    public func collectionView(_ collectionView:UICollectionView,layout collectionViewLayout:UICollectionViewLayout,insetForSectionAt section:Int) - &gt; UIEdgeInsets {     返回UIEdgeInsetsMake(0, MINIMUM_INTERITEM_SPACING ASPECT_RATIO_RESPECT_OF_7P,0, MINIMUM_INTERITEM_SPACING ASPECT_RATIO_RESPECT_OF_7P) }

  3. 总的来说,我不得不拨打4种方法。我没有解释其他两种方法可能你会理解。

    所以基本上整个代码都是这样的。

    enter image description here   enter image description here   enter image description here   enter image description here

    我的输出是

    enter image description here