CollectionViewCell 自动高度与自动布局

CollectionViewCell 自动高度

写在前面:
UITableViewCell的自动高度很方便,开发中很多时候首选tableView的原因也是因为这个,可以减少很多高度或者动态高度的计算过程。
CollectionViewCell 其实也是可以自动高度的, 需要重写实现一个方法func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes

1. CollectionViewCell实现自动高度

CollctionViewCell 要实现自动高度,除了UI控件在布局上要像在TableViewCell一样做到用约束撑开contentView之外,还要实现func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes方法, 实现这个方法的目的其实也是通过手动计算的方式来返回真实的高度。

比如:假如collectionViewCell中有一个textView(或者label什么的), 现在需求是这个cell的高度要随着textView中的自动换行而增大,那么在这个方法中可以这样计算:

override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
        setNeedsLayout()
        layoutIfNeeded()
        let size = contentView.systemLayoutSizeFitting(layoutAttributes.size)
        var newFrame = layoutAttributes.frame
        newFrame.size.height = (textView.text?.isSpaceOrEmpty ?? true) ? 0 : ceil(size.height)
        layoutAttributes.frame = newFrame
        return layoutAttributes
}

这样在textView字数发生变化时就会调用这个方法,实时计算实际高度并重新布局了。

2. IGListKit中的CollectionViewCell的高度计算

在IGListKit中实现sectionController时,必要实现sizeForItem这个方法,在这个方法里对每种cell手动计算它的实际高度并返回,有时候也要配合上面自动布局需要实现的方法共同计算并返回真实高度。

比如,CollectionViewCell中有一个支持多行的label, 在sectionController的sizeForItem 中首先要手动计算这些字所占高度,再加上label上下间隙高度。

计算字所占高度通常可通知创建一个模拟label的实际计算,注意这个模拟label的字体以及样式要和真实的label保持一致。

static func height(text: String,
                       width: CGFloat,
                       topPadding: CGFloat = 20,
                       bottomPadding: CGFloat = 20) -> CGFloat {

        let fakeLabel = XOLabel(frame: CGRect(x: 0,
                                              y: 0,
                                              width: width - 40,
                                              height: .greatestFiniteMagnitude))
        fakeLabel.numberOfLines = 0
        fakeLabel.font = .caption1
        fakeLabel.text = text
        fakeLabel.sizeToFit()

        return fakeLabel.bounds.size.height + topPadding + bottomPadding
}

注意: 因为这个cell中的实际label.numbersOfLines = 0,需要实现自动高度,所以依然要实现func preferredLayoutAttributesFitting方法才能实现完全撑开cell。

算完之后在sizeForItem中就可以为这个cell返回实际高度了。

3. CollectionView的自动高度

有时候需要实现在tableViewCell中嵌入collectionView, 虽然tableViewCell可以实现自动高度,但因为collectionView是可以滚动的,虽然可以像textView一样禁掉滚动属性,但毕竟是collectionView, 有时候加载的东西比较多,实现不了像textView一样实时更新高度。
除非CollectionViewCell中的item大小是可以确定的,这种情况下可以实现整个tableViewCell的自动高度。

如果collectionViewCell的item大小不确定,有什么办法实现tableViewCell的自动高度呢?
网上查到的方法是大概是这样说的:在TabelViewCell的layoutSubviews重新方法中加入以下代码

self.contentView.frame = bounds  // 先为contentView设置frame,使得子视图有布局依据,使得contentView不会被忽略而被线程渲染。
self.collectionView.reloadData()
let contentSize = collectionView.contentSize
self.frame = CGRect(x: 0, y: 0, width: contentSize.width, height: contentSize.height)

这样看起来挺合理的,但实现运行起来出问题了,高度不对,还出现死循环。可能是不适用于我当时的demo。

tableViewCell中嵌入collectionView

所幸我需要实现的collectionView的item比较单一,这样可以实际去计算实际高度,于是将所有间隙找出,一个一个item计算其宽度,当前行放不下了就换行+高:

private func heightForCell(withFilters filters: [String]) -> CGFloat {
        var widthRemaining = LayoutParameter.collectionWidth
        var height: CGFloat = LayoutParameter.collectionViewTopPadding
        let fakeLabel = XOLabel()
        fakeLabel.font = .body

        filters.enumerated().forEach { (index, filter) in
            fakeLabel.text = filter
            if index == 0 {
                let firstLineHeightOfItems = LayoutParameter.itemHeight
                height += firstLineHeightOfItems
            }
            fakeLabel.sizeToFit()
            let itemWidth = LayoutParameter.labelLeftPad + fakeLabel.width() + LayoutParameter.labelRightPad

            //当当前行不足以再放多一个item时换行,+高度
            if widthRemaining - itemWidth - LayoutParameter.itemSpace <= 0 {
                height += (LayoutParameter.verticalSpace + LayoutParameter.itemHeight)
                widthRemaining = LayoutParameter.collectionWidth
                // 换行结束将行宽还原
            }
            widthRemaining -= (LayoutParameter.itemSpace + itemWidth)
        }
        return height
}

这样就可以计算出整个collectionView的高度了,只要间隙的值准备,计算的结果几乎是正确的。

4. collectionView 自定义布局

collectionView 横向布局、纵向布局、 items 左右对齐、上下对齐

1. items 左对齐

collectionView items 默认是分散对齐的,如果需要实现类似以下的左对齐效果需要自定义布局。


items 左对齐

左对齐的实现方式比较简单,直接重写UICollectionViewFlowLayout下的layoutAttributesForElements( )

public final class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override public func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)

        var leftMargin = sectionInset.left
        var maxY: CGFloat = -1.0  //设置负值,保证第一次满足条件
        attributes?.forEach { layoutAttribute in    //item
            if layoutAttribute.frame.origin.y >= maxY {  //如果还没换行则不满足条件,换行了才满足条件使得leftMargin回到0
                leftMargin = sectionInset.left
            }

            layoutAttribute.frame.origin.x = leftMargin

            leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing  //左对齐
            maxY = max(layoutAttribute.frame.maxY, maxY)
        }
        return attributes
    }
}
item.y
//然后在collectionView的layout中可能这样使用
private let layout: LeftAlignedCollectionViewFlowLayout = {
        let layout = LeftAlignedCollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        return layout
}( )

collectionView.collectionViewLayout = layout
//collectionView.isScrollEnabled = false
2. 右对齐

右对齐类似,只是计算中有点点不一样

public final class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override public func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)

        var rightMargin = rect.maxX
        var maxY: CGFloat = -1.0
        attributes?.forEach { layoutAttribute in
            if layoutAttribute.frame.origin.y >= maxY {
                rightMargin = rect.maxX - 20
            }

            layoutAttribute.frame.origin.x = rightMargin - layoutAttribute.frame.width

            rightMargin -= layoutAttribute.frame.width + minimumInteritemSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
        }
        return attributes
    }
}
右对齐
3. 底部对齐

在做一些聊天页面时,当刚开始建立对话,只有一两个cell时,希望像Slack 软件一样做到底部对齐,可以这样做。

 public final class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
    override public func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)

        if let items = attributes,
            !items.isEmpty,
            let lastItem = items.reversed().first,
            let collectionView = collectionView,
            lastItem.frame.maxY < collectionView.bounds.maxY {
            let bottomPadding = collectionView.bounds.maxY - lastItem.frame.maxY
            items.forEach {
                $0.frame.origin.y += bottomPadding
            }
            return items
        } else {
            return attributes
        }
    }
}
底部对齐

你可能感兴趣的:(CollectionViewCell 自动高度与自动布局)