[IOS]UICollectionView CELL 自适应大小

目的

自己研究是一个痛苦的过程,网上的完整一点的文章很少,而且总是遇到各种各样的问题,所以记录下来去帮助那些像我一样的人少走一些弯路

实现目标可以横向滚动的菜单栏

点击任意一个CELL ,下方的数据发生改变,这里先用横向滚动的UITableView,不好做,然后用第三方的UIScrollView做的,也不好用

image.png

过程

一个小小的自适应代码,搞了两天两夜,IOS相比Android编码,简直太落后了,

1. 通过约束自适应大小会出现最后1-2个数据不显示的问题,count是正确的,此时发现设置sectionInset>0 以及 minimumLineSpacing=1 就显示完整了,但是这样代码就变成了魔术代码,后经过多方请教,发现决定性因素是 返回 CELL size的时候不能写 zero, 宽度自适应的时候,设置宽>0,高度自适应的时候要设置高>0,不然会出现末尾的几个cell丢失的不明不白的问题,如果约束写在自定义CELL 的 layoutSubviews 方法里,则需要在显示CELL的时候即cellForItemAt方法里调用 cell.layoutIfNeeded(),不然会出现CELL错乱的问题

2. 通过自己计算CELL的大小,最开始是稀里糊涂的,结果现在已经豁然开朗,在 sizeForItemAt 里面返回的是 CELL.frame 的size ,但是CELL frame 里面的子view 都还没有设置大小,所以会不显示,需要在 layoutSubviews 里对子view进行设置大小,所以我认为 layoutSubviews 方法是在 sizeForItemAt之后调用的,已经可以拿到 CELL frame size

3. 总结: 约束自适应优先使用,因为CELL越来越复杂的话自己计算就会十分麻烦,当然也可以自己计算大小然后通过约束来搞定subView 之间的位置关系混着用

代码

import SnapKit
import Foundation

class HorizontalCollectionView: UIView, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    var dataArray: [String] = [] {
        didSet {
            collectionView.reloadData()
            collectionView.collectionViewLayout.invalidateLayout()
            //collectionView.reloadSections(IndexSet(integersIn: 0...0))
        }
    }
    var collectionView: UICollectionView!

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setUp()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func requestViewData() {
        dataArray = ["0", "1", "22", "333", "4444", "55555", "666666", "7777777", "88888888", "999999999", "10101010101010101010", "A", "1111111111111111111111", "12", "13", "14"]
        print("dataArray.count=", dataArray.count)
    }

    private func setUp() {
        let flowLayout = UICollectionViewFlowLayout()

        flowLayout.minimumInteritemSpacing = 10;
        flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
        flowLayout.scrollDirection = .horizontal

        //===== CELL 约束自适应 必备条件 1 =====
        if #available(iOS 10.0, *) {
            flowLayout.estimatedItemSize = UICollectionViewFlowLayoutAutomaticSize
        } else {
            flowLayout.estimatedItemSize = CGSize(width: 15, height: 48)
        }

        collectionView = UICollectionView.init(frame: CGRect(0, 0, SCREEN_WIDTH, 48), collectionViewLayout: flowLayout)
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.backgroundColor = UIColor.yellow
        collectionView.showsHorizontalScrollIndicator = false
        self.addSubview(collectionView)

        collectionView.register(HorizontalLabelCell.classForCoder(), forCellWithReuseIdentifier: "_cell")
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("点击了 cell")
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        print("dataArray.count=", dataArray.count)
        return dataArray.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "_cell", for: indexPath) as! HorizontalLabelCell
        cell.title = dataArray[indexPath.row]
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        //===== CELL 计算自适应 必备条件 1 =====
        // return CGSize(dataArray[indexPath.row].widthWithFont(), 48)

        //===== CELL 约束自适应 必备条件 2 ===== 宽度或者高度一定要  大于 0 ,否则会出现丢失错误等不可预料问题
        return CGSize(0.01, 48)
    }
}

class HorizontalLabelCell: UICollectionViewCell {

    private lazy var titleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 1
        label.font = UIFont.systemFont(ofSize: 18)
        label.textAlignment = .center
        label.textColor = UIColor.red
        return label
    }()

    var title: String = "" {
        didSet {
            self.titleLabel.text = title
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.contentView.addSubview(self.titleLabel)

        //===== CELL 约束自适应 必备条件 3 =====
        self.titleLabel.snp.makeConstraints { maker in
            maker.left.top.equalTo(self.contentView)
            maker.width.greaterThanOrEqualTo(5)
            maker.height.greaterThanOrEqualTo(48)
            maker.height.equalTo(self.contentView).priorityLow()
            maker.right.equalTo(self.contentView).priorityLow()
        }
    }

    //===== CELL 计算自适应 必备条件 2 ===== 如果没有使用约束,则在这里赋值 subViews frame 大小
    /*override func layoutSubviews() {
        super.layoutSubviews()
        self.titleLabel.frame = self.contentView.frame
    }*/

}

使用

    lazy var topMenuView: HorizontalCollectionView = {
        let horizontalView = HorizontalCollectionView.init(frame: CGRect(0, 0, SCREEN_WIDTH, 48))
        return horizontalView
    }()

    override func viewDidLoad() {
        self.view.addSubview(self.topMenuView)
        self.topMenuView.snp.makeConstraints { maker in
            maker.left.right.top.equalTo(self.view)
            maker.height.equalTo(48)
        }
        self.topMenuView.requestViewData()
    }

后续

经过多次使用总结: 上面通过约束自适应的方案当只有一个 cell 的时候,会居中,需要自定义 followLayout 设置左对齐,总之会有各种各样的问题,经老开发提醒,UICollectionView 的宽高最好在外部给定, 即 sizeForItemAtIndexPath 这里返回固定的宽高,然后不要设置 estimatedItemSize,然后在自定义Cell里面通过约束布局,
注意 UICollectionView 有默认的 spacing 间距,需要设置为0,才不会出现计算之外的问题,

        UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
        layout.minimumInteritemSpacing = 0;
        layout.minimumLineSpacing = 0;

即趋势应该是由外到内的设置大小.

[IOS]UICollectionView CELL 自适应大小

目的

实现目标 可以横向滚动的菜单栏

过程

代码

使用

后续

推荐阅读更多精彩内容

实现目标可以横向滚动的菜单栏