UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定

时间:2021-6-12 作者:qvyue

说明:

  1. 设置flowLayout的estimatedItemSize
  2. 在自定义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
    }
}

解决方案参考:
https://stackoverflow.com/questions/43102682/uicollectionview-with-autosizing-cells-incorrectly-positions-supplementary-view

效果展示

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):

UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
nonErrorLabel.jpg
UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
haveErrorLabel.jpg

布局

以下是cell配合UIStackView使用时的布局方式:

UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
note.jpg

下面的图片分别对应上图中标注的颜色来一一对应,有个需要注意的问题是,在UIColl sectionCell中使用UIStackView时需要在下面加一个View,不然直接添加约束会报错,类似UITableViewCell上的contentView。

UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
contentContraints.jpg

包含所有控制的redStackView

UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
redStackView.jpg

设置redStackView的约束

UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
redStackViewConstraints.jpg

添加blueStackView是为了设置yellowStackView和grayStackView中间间距,因为errorLabel跟editButton或者Delete之间的间距是12,而上面两个label跟errorLabel之间的间距是6(看UI视情况而定)

UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
blueStackView.jpg
UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
yellowStackView.jpg
UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
grayStackView.jpg
UICollectionView 使用estimatedItemSize布局,自适应高度,宽度固定
greenStackView.jpg
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。