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。
所幸我需要实现的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 默认是分散对齐的，如果需要实现类似以下的左对齐效果需要自定义布局。
左对齐的实现方式比较简单，直接重写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
}
}
//然后在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
}
}
}
