有一种流行的 UICollectionView
横向分页布局方式,当你布局好 itemSize
等信息后,兴冲冲的运行模拟器时,却发现结果是这样的:
此时你想要的布局方式应该是这样:
那我们就需要重新自定义 UICollectionViewFlowLayout
。
网上看了一些写法,不过大部分都是相同的,由于看不懂(智商太低了),而且网上的写法没能解决我后面的一个问题(后面会说到,分页处的 item x
不对的问题),于是自己思考写了一个。不足之处,还望指正。
重新布局
新建一个继承于 UICollectionViewFlowLayout
的类,定义好基本信息:
self.collectionView?.isPagingEnabled = true
复制代码
final class ItemFlowLayout: UICollectionViewFlowLayout {
/// 包含了所有重新布局的 item,在代理方法中,需要返回这个我们自己包装的数组。
private lazy var allAttrs = [UICollectionViewLayoutAttributes]()
/// 图片大小
private lazy var iconSize = #imageLiteral(resourceName: "惠整形").size
/// item 间隔
private var space: CGFloat {
return (collectionView!.frame.width - iconSize.width * 5) / 6
}
/// 设置分页大小
override var collectionViewContentSize: CGSize {
return CGSize(width: screenWidth * 2, height: iconSize.height + 17 + 5)
}
override init() {
super.