TableView 优化提示
优化常识
- 正确使用
reuseIdentifier来重用 Cells - Cell 中的子视图都要使用背景颜色，并且不要设置颜色的 alpha 值
- 尽量少用或不用透明图层
- 尽量减少 subviews 的数量
- 尽量少用
addSubview给 Cell 动态添加 View，可以初始化时就添加，然后通过hidden来控制是否显示 - Cell 显示模型数据最好提前计算完成，避免在渲染时动态计算
- 在
heightForRowAtIndexPath:中尽量不使用cellForRowAtIndexPath:
优化进阶
- 提前计算并缓存好高度，因为
heightForRowAtIndexPath:是调用最频繁的方法，一定不要使用自动计算行高！ - 滑动时按需加载，这个在大量图片展示，网络加载的时候很管用，目前的第三方图片框架都已经处理的很好
- 按需加载，还可以在
override func scrollViewWillEndDragging:withVelocity :targetContentOffset:)方法中根据力量以及目标位置预先加载数据 - 异步绘制，遇到复杂界面，遇到性能瓶颈时，可能就是突破口，代码的复杂度高，相当于自己还要做缓存，可以使用
ASDisplayKit；
借助工具 - Instrument
缓存行高前.png
缓存行高
常量准备－在开发中要少用魔法数字
- 在
HMStatusCell中增加常量定义
/// 工具栏高度
let HMStatusToolbarHeight: CGFloat = 35
/// 头像宽高
let HMStatusIconWH: CGFloat = 35
- 修改
setupUI函数，原创微博顶部间距
// 原创微博的 View
originalView.snp_makeConstraints { (make) -> Void in
make.leading.equalTo(contentView)
make.top.equalTo(contentView).offset(HMStatusCellMargin)
make.trailing.equalTo(contentView)
}
- 底部工具栏高度
// 底部 toolBar
statusToolBar.snp_makeConstraints { (make) -> Void in
self.toolBarTopConstraint = make.top.equalTo(retweetView.snp_bottom).constraint
make.leading.equalTo(contentView)
make.width.equalTo(contentView)
make.height.equalTo(HMStatusToolbarHeight)
}
- 修改原创微博中的
setupUI函数，设置头像尺寸
iconView.snp_makeConstraints { (make) -> Void in
make.top.equalTo(self).offset(HMStatusCellMargin)
make.leading.equalTo(self).offset(HMStatusCellMargin)
make.size.equalTo(CGSizeMake(HMStatusIconWH, HMStatusIconWH))
}
计算行高
- 在
HMStatusViewModel构造函数下方准备计算行高函数
// MARK: - 计算行高
/// 计算行高
private func calcRowHeight() -> CGFloat {
return 200;
}
- 明确行高计算算法
/**
1. originalView 高度
顶部距离 HMStatusCellMargin
顶部内容高度 HMStatusCellMargin + HMStatusIconWH + HMStatusCellMargin + 标签文本高度 + HMStatusCellMargin
+ (配图高度 + HMStatusCellMargin)
2. retweetView 高度 HMStatusCellMargin + 标签文本高度 + + HMStatusCellMargin
+ (配图高度 + HMStatusCellMargin)
3. toolBarView 高度
*/
- 复制配图高度函数
/// 根据图片数量计算配图视图大小
private func calcSize(count: Int) -> CGSize {
// 每一个条目之前的间距
let itemMargin: CGFloat = 5
// 每一个条目的宽高
let itemWH: CGFloat = CGFloat(Int(SCREENW - itemMargin * 2 - HMStatusCellMargin * 2) / 3)
// 计算当前显示的行数与列数
let col = count == 4 ? 2 : (count >= 3 ? 3 : count)
let row = count == 4 ? 2 : ((count - 1) / 3 + 1)
// 宽度 = 列数*每一个条目的宽度 + (列数减1)*条目之前的间距
let width = CGFloat(col) * itemWH + CGFloat(col - 1) * itemMargin
let height = CGFloat(row) * itemWH + CGFloat(row - 1) * itemMargin
return CGSize(width: width, height: height)
}
- 实现计算行高函数
private func calcRowHeight() -> CGFloat {
// 文本区域尺寸
let textSize = CGSize(width: SCREENW - 2 * HMStatusCellMargin, height: CGFloat(MAXFLOAT))
// 行高
var height = HMStatusCellMargin + HMStatusToolbarHeight
// 原创微博
height += 3 * HMStatusCellMargin + HMStatusIconWH
// 原创微博文字
if let str = originalStatusAttr {
height += str.boundingRectWithSize(textSize, options: [.UsesLineFragmentOrigin], context: nil).height
}
// 判断是否有转发微博
if status?.retweeted_status != nil {
height += 2 * HMStatusCellMargin
if let str = retweetedStatusAttr {
height += str.boundingRectWithSize(textSize, options: [.UsesLineFragmentOrigin], context: nil).height
}
}
// 配图高度
// 1> 配图数量，如果有转发微博配图，原创微博就一定没有配图
let count = status?.retweeted_status?.pic_urls?.count ?? status?.pic_urls?.count
// 2> 计算配图高度
if count > 0 {
height += HMStatusCellMargin
height += calcSize(count!).height
}
return height;
}
- 定义行高属性，并在构造函数末尾记录行高
/// 模型对应行高
var rowHeight: CGFloat = 0
...
// 构造函数
// 处理原创微博的内容 --> 生成一个带有表情的富文本
let result = dealStatusText(status.text)
originalStatusAttr = result.attr
originalLinkResults = result.linkResult
// 计算行高
rowHeight = calcRowHeight()
- 在
HMHomeTableViewController增加代理方法，返回缓存的行高
/// 返回缓存行高
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return statusListViewModel.statusList![indexPath.row].rowHeight
}
异步完成设置模型工作
- 在
HMStatusListViewModel中将 设置模型数组的工作全部放在异步完成
// 通过 StatusDAL 加载`数据`
HMStatusDAL.loadStatus(sinceId, maxId: maxId) { (result) -> () in
guard let statusDicts = result else {
// 如果加载的数据不存在，直接返回
complete(isSuccess: false, count: 0)
return
}
dispatch_async(dispatch_get_global_queue(0, 0)) {
var tempArray = [HMStatusViewModel]()
// 遍历数组,转成模型
for value in statusDicts {
let status = HMStatus(dict: value)
tempArray.append(HMStatusViewModel(status: status))
}
printLog("加载回来的数量\(tempArray.count)")
if self.statusList == nil {
self.statusList = [HMStatusViewModel]()
}
// 如果是上拉加载
if isPullUp {
// 拼接到数组的后面
self.statusList = self.statusList! + tempArray
} else {
// 拼接到数组的前面
self.statusList = tempArray + self.statusList!
}
dispatch_async(dispatch_get_main_queue()) {
complete(isSuccess: true,count: tempArray.count)
}
}
}
减少配图视图尺寸计算
- 在视图模型中定义属性
pictureViewSize
/// 配图视图大小
var pictureViewSize: CGSize = CGSizeZero
- 修改计算行高方法
// 2> 计算配图高度
if count > 0 {
height += HMStatusCellMargin
pictureViewSize = calcSize(count!)
height += pictureViewSize.height
}
修改配图视图 HMStatusPictureView
删除
calcSize函数添加函数设置配图 url 的同时设置 size
/// 设置图片 url 和 尺寸
///
/// - parameter urls: 配图 URL 数组
/// - parameter size: 配图视图尺寸
func setPicurls(urls: [HMStatusPictureInfo]?, viewSize: CGSize) {
pic_urls = urls
countLabel.text = "\(pic_urls?.count ?? 0)"
let size = urls == nil ? CGSizeZero : viewSize
self.snp_updateConstraints { (make) -> Void in
self.sizeConstraint = make.size.equalTo(size).constraint
}
reloadData()
}
- 将
pic_urls属性设置为 私有
private var pic_urls: [HMStatusPictureInfo]?
- 修改原创微博中的设置 pic_urls 代码
// 设置数据
pictureView.setPicurls(pic_urls, viewSize: statusViewModel!.pictureViewSize)
- 修改转发微博中的设置 pic_urls 代码
// 设置数据
pictureView.setPicurls(pic_urls, viewSize: statusViewModel!.pictureViewSize)