首页在展示大量图片的时候, 如果内容尺寸不一致, 除了直接裁剪图片, 还可以使用瀑布式布局, 看起来也很美观.
例如花瓣网
花瓣网
我们也可以使用 CollectionView 实现类似的效果.
如图所示
demo
CollectionView
相较之下, 很多同学可能对 CollectionView 比较陌生, 其实想对于常用的 TableView, CollectionView 就只是多了一个布局, 你完全可以用 CollectionView 加上一个布局文件模拟出一个 TableView 的效果
布局类
布局类需要继承自UICollectionViewLayout, 并实现
这几个方法
preparelayoutAttributesForElements:incollectionViewContentSize
prepare 方法中, 我们在这里准备好了每个元素的布局, 然后在layoutAttributesForElements:in 中返回对应区域的布局信息. collectionViewContentSize 用于获取内容尺寸, 类似于ScrollView 的 ContentSize
准备布局
每一列的列数目, 需要定下来, 我们这里为3列.
瀑布式布局, 其实就是所有元素一个一个挨着放下来就行了.
代码如下
override func prepare() {
self.layoutInfo.removeAll()
self.contentHeight = 0
let width = (self.collectionView!.frame.size.width - (self.columnsCount + 1) * self.space) / self.columnsCount
var currentY: [CGFloat] = [self.space, self.space, self.space]
for section in 0 ..< self.collectionView!.numberOfSections {
for item in 0 ..< self.collectionView!.numberOfItems(inSection: section) {
let indexPath = IndexPath(item: item, section: section)
let attribute = UICollectionViewLayoutAttributes(forCellWith: indexPath)
var column = 0
var minY = currentY[0]
for i in 0 ..< currentY.count {
if minY > currentY[i] {
minY = currentY[i]
column = i
}
}
let x = self.space + CGFloat(column) * (self.space + width)
let y = currentY[column]
let height = self.delegate.heightFor(itemAtIndexPath: indexPath, withWidth: width)
attribute.frame = CGRect(x: x, y: y, width: width, height: height)
self.layoutInfo[indexPath] = attribute
currentY[column] += height + self.space
self.contentHeight = max(currentY[column], self.contentHeight)
}
}
}
这里使用了一个layoutInfo 字典用来存放每个元素的布局信息.
self.space 表示了元素之前的间隙, self.contentHeight 则用来存放内容高度
获取对应区域布局信息
当某块区域需要显示的时候, 会调用layoutAttributesForElements:in 来获取对应区域的布局.
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var attributes = [UICollectionViewLayoutAttributes]()
for (_, attribute) in self.layoutInfo {
if attribute.frame.intersects(rect) {
attributes.append(attribute)
}
}
return attributes
}
获取内容高度
由于我们之前在准备的时候, 已经计算好了内容高度, 这里直接使用就可以了
override var collectionViewContentSize: CGSize {
return CGSize(width: self.collectionView!.frame.size.width, height: self.contentHeight)
}
这样就大功告成了. demo可以点这里https://github.com/ywwzwb/CollectionViewDemo
