【问题标题】:How to autolayout ImageView inside CollectionView so that cell to edge has same spacing as inner cells spacing?如何在 CollectionView 内自动布局 ImageView,以使单元格到边缘的间距与内部单元格间距相同?
【发布时间】:2017-11-15 23:47:09
【问题描述】:
我在 CollectionViewCell 中创建了 UIImageView。我希望布局在最左边的单元格与左边缘之间的间距与内部单元格之间的间距相同,并且最右边的单元格与屏幕右边缘的间距相同。我目前的布局是这样的:
在左边缘上方的图像中,最左边的单元格有 10 点间距,而内部单元格间距是该间距的两倍。那是因为我的 UIImageView 在所有 4 个方向(上、下、左、右)上都比 CollectionViewCell 小 10 点。
我在这个问题上花了很多时间,包括搜索 StackOverflow,但似乎找不到答案。
我可以根据this posting 连续创建N 的单元格数
,并且我还根据this posting 使用单元格间距
【问题讨论】:
标签:
ios
swift
uiimageview
autolayout
uicollectionviewcell
【解决方案1】:
我设法找到了上述问题的解决方案。
我做了以下事情:
- 删除
UIImageView 和CollectionViewCell 之间的所有内部间距。然后删除任何偏移并使大小匹配。在所有 4 个方向上设置 0 约束。
-
使用second reference mentioned above 作为模板。我用以下内容更新了我的 ViewController:
扩展 ToDoCategoryViewController: UICollectionViewDelegateFlowLayout {
fileprivate var sectionInsets: UIEdgeInsets {
return UIEdgeInsetsMake(0, Constant.hardCodedPadding, 0, Constant.hardCodedPadding)
}
fileprivate var innerSpacing: CGFloat { return Constant.hardCodedPadding }
fileprivate var rowSpacing: CGFloat { return Constant.hardCodedPadding }
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
var itemPerRow: CGFloat {
switch collectionView.bounds.width {
case 300..<500:
return 3
case 500..<800:
return 4
default:
return 5
}
}
let innerSpacingCount = itemPerRow - 1
let edgesPadding = Constant.hardCodedPadding * 2.0
let itemWidth = (collectionView.bounds.width - (innerSpacing * innerSpacingCount + edgesPadding)) / itemPerRow
let itemHeight = itemWidth * CGFloat(1.25)
return CGSize(width: itemWidth, height: itemHeight)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return sectionInsets
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return rowSpacing
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return innerSpacing
}
}
在其他地方的代码中,我设置了 Constant.hardcodedPadding 值,例如CGFloat(30.0)
因此,我得到以下视图: