上篇文章介绍了HTML解析数据存入模型，今天我们的任务是将把之前拿到的数据可视化展示出来。因为组数据的的标题和摘要的文字多少不一，每个 item高度自然就不一样，我又想用collocationView展示两列数据，首先想到的就是瀑布流。现在很多移动端H5就是用瀑布流展示的，比如花瓣、Pinterest(需要梯子)。
1 - 花瓣布局
2 - PinterestAPP布局
本文采用类似花瓣的布局给大家分享，先上一张最终效果图：
3 - 最终效果图
因为不管是OC还是Swift中UICollocationView的UICollectionViewFlowLayout默认都是只能设置统一的布局的，要做到如效果图一样的效果就需要重写UICollectionViewFlowLayout。
1 - 分析原理
首先我们迫切需要知道的是每个item高度是多少如何布局。上篇文章我们已经通过HTML解析到的数据计算出了高度，接下来就要通过制定一个规则，让每个item加在特定一列上。假如我们设定有两列数据，很显然我们不能通过列表数组的index的奇偶来确定它们的位置。因为假设数组arr的偶数下标值arr[i]的高度值都很大，奇数下标值arr[i]的高度值都很小，所以通过奇偶布局会出现第一列会比第2列高出很多，第二列下面会留很大的空白，这样肯定是不行。
4 - 按数组下标从左至右从上到下可能出现的情况
现在给出一种思路：数据数组findList传入自定义的Layout类，定义一个列高数组columnHeight记录每一列的总高度，然后定义一个记录每一列的总item个数的数组columnItemCount，最后定义一个元素类型为UICollectionViewLayoutAttributes的数组attributesArray此数组就是最终item布局的数组。遍历数据数组findList，拿到当前位置的IndexPath初始化一个UICollectionViewLayoutAttributes对象attributes，找到最短列，把数据追加在最短列，累加高度在columnHeight中的最短列，columnItemCount中最短列的个数+1，拿到前面的数据可以计算每个item的frame，最后把整个对象追加在布局数组attributesArray中。循环结束后，拿到最高列的高度减去最高列每个item间的间隙除以最高列的个数可以计算出平均值，这个值用来设置itemSize的高。最后把attributesArray赋值给self.layoutAttributesArray就可以了。如果要加头部和尾部就把头部尾部的布局数据插入头尾即可。大家可能看的很懵，直接上代码，注释很详细了 ：
//
// FindFlowLayout.swift
// SwiftApp
//
// Created by leeson on 2018/7/4.
// Copyright © 2018年 李斯芃 ---> 512523045@qq.com. All rights reserved.
//
import UIKit
class HomeFlowLayout: UICollectionViewFlowLayout {
// 总列数
var columnCount:Int = 0
// 数据数组
var findList = [JianshuModel]()
// 整个webview的高度
private var maxH:Int?
// 头部高度
var headerH:CGFloat = 100
//所有item的属性
fileprivate var layoutAttributesArray = [UICollectionViewLayoutAttributes]()
override func prepare() {
let contentWidth:CGFloat = (self.collectionView?.bounds.size.width)! - self.sectionInset.left - self.sectionInset.right
let marginX = self.minimumInteritemSpacing
let itemWidth = (contentWidth - marginX * CGFloat(self.columnCount - 1)) / CGFloat.init(self.columnCount)
self.computeAttributesWithItemWidth(CGFloat(itemWidth))
}
///根据itemWidth计算布局属性
func computeAttributesWithItemWidth(_ itemWidth:CGFloat){
// 定义一个列高数组 记录每一列的总高度
var columnHeight = [Int](repeating: Int(self.sectionInset.top + self.headerH), count: self.columnCount)
// 定义一个记录每一列的总item个数的数组
var columnItemCount = [Int](repeating: 0, count: self.columnCount)
var attributesArray = [UICollectionViewLayoutAttributes]()
// 添加头部属性
let headerAttr:UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes.init(forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, with: IndexPath.init(item: 0, section: 0))
headerAttr.frame = CGRect(x: 0, y: CGFloat(0), width: self.collectionView!.bounds.size.width, height: self.headerH)
attributesArray.append(headerAttr)
// 给属性数组设置数值
//self.layoutAttributesArray = attributesArray
// 遍历数据计算每个item的属性并布局
var index = 0
for data in self.findList {
let indexPath = IndexPath.init(item: index, section: 0)
let attributes = UICollectionViewLayoutAttributes.init(forCellWith: indexPath)
// 找出最短列号
let minHeight:Int = columnHeight.sorted().first!
let column = columnHeight.index(of: minHeight)
// 数据追加在最短列
columnItemCount[column!] += 1
let itemX = (itemWidth + self.minimumInteritemSpacing) * CGFloat(column!) + self.sectionInset.left
let itemY = minHeight
// 等比例缩放 计算item的高度
let itemH = Int(Double(data.itemHeight!)!)
// 设置frame
attributes.frame = CGRect(x: itemX, y: CGFloat(itemY), width: itemWidth, height: CGFloat(itemH))
attributesArray.append(attributes)
// 累加列高
columnHeight[column!] += itemH + Int(self.minimumLineSpacing)
index += 1
}
// 找出最高列列号
let maxHeight:Int = columnHeight.sorted().last!
let column = columnHeight.index(of: maxHeight)
// 根据最高列设置itemSize 使用总高度的平均值
let itemH = (maxHeight - Int(self.minimumLineSpacing) * (columnItemCount[column!] + 1)) / columnItemCount[column!]
self.itemSize = CGSize(width: itemWidth, height: CGFloat(itemH))
// 添加尾部属性
let footerIndexPath:IndexPath = IndexPath.init(item: 0, section: 0)
let footerAttr:UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes.init(forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, with: footerIndexPath)
footerAttr.frame = CGRect(x: 0, y: CGFloat(maxHeight), width: self.collectionView!.bounds.size.width, height: 30)
attributesArray.append(footerAttr)
// 给属性数组设置数值
self.layoutAttributesArray = attributesArray
self.maxH = maxHeight + 30
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return self.layoutAttributesArray
}
///重写设置contentSize，一定要写上这个方法，不然可能拉到最底部的时候可能会有很多空白
override var collectionViewContentSize: CGSize {
get {
return CGSize(width: (collectionView?.bounds.width)!, height: CGFloat(self.maxH!))
}
set {
self.collectionViewContentSize = newValue
}
}
}
5 - 按如上代码布局后的位置
2 - 数据展示
知道如何布局了就是常规的collocationView展示了，只是我这里加上了头部 尾部视图，还写了个简单的上下拉刷新。头部、尾部、cell我都是用xib写的，注册的时候记得用nib注册就行了。控制器里设置好自定layout的一些属性：
//MARK: - --- 设置item的布局
func setHomeFlowLayouts(){
//通过layout的一些参数设置item的宽度
let inset = UIEdgeInsetsMake(10, 10, 10, 10)
let minLine:CGFloat = 10.0
self.itemWidth = (SCREEN_WIDTH - inset.left - inset.right - minLine * (CGFloat(self.columnCount - 1))) / CGFloat(self.columnCount)
//设置布局属性
self.flowLayout.columnCount = self.columnCount
self.flowLayout.sectionInset = inset
self.flowLayout.minimumLineSpacing = minLine
}
还有就是调用网络请求的方法，这里是没有用到网络请求接口，是用的我上篇文章提到的HTML解析得到的数据模型，我在请求模型类JianshuRequestModel.swift里暴露了个方法，待解析完网页数据存入模型后用闭包（相当于OC的block）返回数组数据：
//网络请求回调
//参数：self.index是页码；self.itemWidth是透过计算得到的item的宽度
JianshuRequestModel.jianshuRequestDataWithPage(self.index, Float(self.itemWidth), { (headInfo) in
//返回headInfo头部信息，只有在page等于1的时候返回，因为每一页的头部信息都是一样的。
}) { (dataArr) in
//dataArr文章列表数据
}
至于上面提到的上下拉刷新，也就不赘述了，监听scrollView.contentOffset.y 和self.collectionView.contentInset设置个临界点做相应的操作即可，有疑惑的可以参考下文末的Demo。
3 - 切换布局
有运行过demo看过效果的同学可能会看到我在头部放了一个切换的按钮。此按钮的作用是用来切换布局的。默认情况下是两列，不停点击会在1列和2列中切换。self.columnCount这个成员变量就是设置列数的，理论上还可以设置3甚至更大的整数，不过这里我不推荐这么做，因为2列以上item的宽度会很窄，数据会挤在一起相当难看。
6 - 切换布局
我在头部视图类写了个按钮点击事件的闭包回调，在初始化头部视图的地方写上如下逻辑可切换布局：
//点击切换布局
self.headerView?.switchBack = { (click) in
print(click)
//切换列数
self.columnCount = (click == true) ? 1 : 2
self.setHomeFlowLayouts()
//遍历数组 重新计算高度
var num = 0
for model in self.dataArr {
//计算标题和摘要的高度
model.imgW = Float(self.itemWidth - 16)
model.imgH = model.wrap!.count > 0 ? model.imgW! * 120 / 150 : nil
model.titleH = GETSTRHEIGHT(fontSize: 20, width: CGFloat(model.imgW!) , words: model.title!) + 1
model.abstractH = GETSTRHEIGHT(fontSize: 14, width: CGFloat(model.imgW!) , words: model.abstract!) + 1
//item高度
var computeH:CGFloat = 8 + 25 + 3 + 10 + 8 + (model.imgH != nil ? CGFloat(model.imgH!) : 0) + 8 + model.titleH! + 8 + model.abstractH! + 8 + 10 + 8
//如果没有图片减去一个间隙8
computeH = computeH - (model.wrap!.count > 0 ? 0 : 8)
model.itemHeight = String(format: "%.f", computeH)
self.dataArr[num] = model;
num += 1
}
//重新赋值改变布局
self.flowLayout.findList = self.dataArr
//刷新视图
self.collectionView?.reloadData()
}
7 - 切换布局效果图
以上就是本文的全部内容，不懂的可以下载demo自行运行看下源码或者可以留言我。
下篇文章我将介绍文章详情的webview与js的交互，感兴趣的可以关注我，有更新会有提醒。
👉猛戳右侧链接下载 本文GitHub源码
上一篇文章：Swfit爬虫通过作者ID无接口获取简书文章列表，正则匹配HTML标签存储模型数据
网友评论