说明:
- 设置flowLayout的estimatedItemSize
- 在自定义cell中重写preferredLayoutAttributesFitting
3.使用estimatedItemSize不需要实现sizeForItemAtIndexPath代理方法
4.以上方法仅针对item有效,header无效
layout.headerReferenceSize 设置此方法不会自适应,取设置的初始值
5.estimatedItemSize是针对所有cell,不能有的用自动而已,有的不用
6.约束一定要设置正确,否则也会出现问题,配合UIStackView使用,效果更佳
7.使用estimatedItemSize省了繁琐的计算过程
本例是配合UIStackView使用的,没用过UIStackView的宝宝自行百度学习一下
代码部分
设置estimatedItemSize
,设置非零size
@IBOutlet weak var collectionView: UICollectionView! {
didSet {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
// 推荐自己设置非零size,不推荐使用UICollectionViewFlowLayout.automaticSize使用,测试下来,用这个的话宽度不可控,而且高度也有些问题(也可能是我自己使用有问题)
layout.estimatedItemSize = CGSize(width: CGFloat.screenWidth, height: 156)
collectionView.collectionViewLayout = layout
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(AddressListCell.self)
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "UICollectionViewCell")
collectionView.registerReusableView(AddressListHeaderCell.self, ofKind: UICollectionView.elementKindSectionHeader)
collectionView.backgroundView = pocktView
}
}
自定义cell,重写preferredLayoutAttributesFitting
class AddressListCell: UICollectionViewCell {
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
// 需要在自定义cell中实现以下方法
override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
self.setNeedsLayout()
self.layoutIfNeeded()
let size = self.contentView.systemLayoutSizeFitting(layoutAttributes.size)
var cellFrame = layoutAttributes.frame
cellFrame.size.height = size.height
cellFrame.size.width = UIScreen.main.bounds.width
layoutAttributes.frame = cellFrame
return layoutAttributes
}
}
如果只用cell,不使用header的话,到这里就结束。但是如果你既用了cell,又用了header的话,就会出现下图左图的情况。在进入页面时header会根据你给的estimatedItemSize的height来计算header的位置,但是当你滑动页面时,它会能恢复成右图正常的样式,目前使用过程中是在iOS 11.2.6 真机上出现,所以猜测可能是12.0以下版本都有问题,在网上找到的解决方案也说12.0以上解决了此问题。但是还是要兼容12.0以下的情况,故需要自定义UICollectionViewFlowLayout的子类,重写invalidationContext
方法
// 需要把上面的
let layout = UICollectionViewFlowLayout()
// 改成
let layout = EstimatedHeaderFlowLayout()
// 需要重写invalidationContext方法,兼容ios 12以下版本
// 出现header位置异常是在iOS 8 11.2.6上面
class EstimatedHeaderFlowLayout : UICollectionViewFlowLayout {
/// 解决12.0以下版本,header错误问题
override func invalidationContext(forPreferredLayoutAttributes preferredAttributes: UICollectionViewLayoutAttributes, withOriginalAttributes originalAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutInvalidationContext {
let context = super.invalidationContext(forPreferredLayoutAttributes: preferredAttributes, withOriginalAttributes: originalAttributes)
context.invalidateSupplementaryElements(ofKind: UICollectionView.elementKindSectionHeader, at: [originalAttributes.indexPath])
return context
}
}
效果展示
UIStackView只要设置控件的isHidden属性,就可以隐藏或显示。
switch item?.operation {
case .delete:
buttonsStackView.isHidden = false
editButton.isHidden = true
deleteButton.isHidden = false
case .edit:
buttonsStackView.isHidden = false
editButton.isHidden = false
deleteButton.isHidden = true
default:
buttonsStackView.isHidden = true
editButton.isHidden = true
deleteButton.isHidden = true
}
下面两张图分别是当estimatedItemSize的height为156时,cell上无错误label和有错误label的样式(正常展示的cell高度是126):
布局
以下是cell配合UIStackView使用时的布局方式:
下面的图片分别对应上图中标注的颜色来一一对应,有个需要注意的问题是,在UIColl sectionCell中使用UIStackView时需要在下面加一个View,不然直接添加约束会报错,类似UITableViewCell上的contentView。
包含所有控制的redStackView
设置redStackView的约束
添加blueStackView是为了设置yellowStackView和grayStackView中间间距,因为errorLabel跟editButton或者Delete之间的间距是12,而上面两个label跟errorLabel之间的间距是6(看UI视情况而定)