等距collectionViewCells？

Posted 2023-03-14

【中文标题】等距collectionViewCells？

【英文标题】：Equidistant collectionViewCells?

【发布时间】：2017-05-24 05:00:39

【问题描述】：

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

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

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

但这会产生以下结果：

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

有人知道我是怎么做到的吗？

【问题讨论】：

您能否添加您希望如何显示它的快照，以便我可以正确指导您。

【参考方案1】：

使用下面的代码

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;

【参考方案2】：

为此，您必须从集合视图的左侧和右侧从情节提要中设置任何您想要的部分 Inset 属性，还可以从情节提要中设置您想要的 Min Spacing 属性

在我的例子中，我希望两边各 5 px，两个单元格之间各 5 px。

在委托方法中写入，

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

【参考方案3】：

在你的类中添加以下方法

您可以根据需要进行更改

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
    

【参考方案4】：

图片很有意义。我的解决方案将以正确的格式适用于所有设备。

为什么？ 请通过解决方案。

第 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 步：

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

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt 部分：Int) -> CGFloat 返回 MINIMUM_INTERITEM_SPACING * ASPECT_RATIO_RESPECT_OF_7P

而对于 Padding（有左边距和右边距），您必须调用此方法。

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt 部分：Int）-> UIEdgeInsets 返回 UIEdgeInsetsMake(0, MINIMUM_INTERITEM_SPACINGASPECT_RATIO_RESPECT_OF_7P, 0, MINIMUM_INTERITEM_SPACINGASPECT_RATIO_RESPECT_OF_7P)

总的来说，我不得不调用 4 种方法。其他两种方法我没有解释，可能你会明白。

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

我的输出是

【讨论】：

我已经在github中添加了我的项目..github.com/junaid4058/collectionViewWithEqualSpacing