【问题标题】:Equidistant collectionViewCells?等距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,因此它们和边缘之间的空间都是相等的。

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

【问题讨论】:

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

标签: ios swift uicollectionview


【解决方案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 步:

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

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

        2. 而对于 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) }

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

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

          我的输出是

        【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-08-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-11-21
        • 1970-01-01
        相关资源
        最近更新 更多