【问题标题】:Margins around cell like in Android GridLayout像在 Android GridLayout 中一样围绕单元格的边距
【发布时间】:2019-04-12 20:59:38
【问题描述】:

在 Android 中,创建带有下边距的网格列表很容易:

我为 iOS 找到了这个解决方案,但它不会在单元格和父视图之间添加边距,仅在单元格之间添加边距

let itemSpacing: CGFloat = 3
let itemsInOneLine: CGFloat = 2
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
flow.minimumInteritemSpacing = 3
flow.minimumLineSpacing = 3

我该如何解决?

附:我不想硬编码任何东西,所以它应该适用于所有 iPhone/iPad 设备

【问题讨论】:

标签: ios uicollectionview uicollectionviewcell uicollectionviewflowlayout


【解决方案1】:
let itemSpacing: CGFloat = 3
let itemsInOneLine: CGFloat = 2
let flow = UICollectionView().collectionViewLayout as! UICollectionViewFlowLayout
flow.sectionInset = UIEdgeInsets(top: itemSpacing, left: itemSpacing, bottom: itemSpacing, right: itemSpacing)
flow.minimumInteritemSpacing = itemSpacing
flow.minimumLineSpacing = itemSpacing
let cellWidth = (UIScreen.main.bounds.width - (itemSpacing * 2) - ((itemsInOneLine - 1) * itemSpacing)) / itemsInOneLine
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)

【讨论】:

  • 是的,实际上它比约束的常量更好,我们可以在单元格周围设置阴影
  • 所以最好设置UIEdgeInsets,我们甚至可以设置flow.minimumInteritemSpacing = 0,因为你可以通过计算需要的单元格宽度来设置同一行单元格之间的空间
  • 使用 sectionInset 比使用约束添加空间要好。如果您需要对约束无法完成的部分使用不同的填充
【解决方案2】:

在您的集合视图中添加常量为 5 的前导、尾随和顶部约束。这将解决您的边距问题

【讨论】:

  • 谢谢。这是我需要的。所以我在各处设置了 5 个点(对于 minimumInteritemSpacingminimumLineSpacing、集合视图的前导、尾随和顶部约束),我使用工具考虑了所有这些边距、间距以获得正确的宽度 let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) - (margin * 2)itemSpacemargin == 5. 现在看起来很棒 i.postimg.cc/VLWkS3S1/Screenshot-at-Apr-13-20-35-18.png
  • @user924 UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5) 做同样的工作。两种方法都需要减去 10 的宽度计算
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-11
  • 2013-04-18
  • 2010-10-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多