利用autolayout计算自定义cell高度(swift3.0

前言

大部分APP里面都会用到UITableView去展示一些列表，列表高度有固定和根据内容确定的。之前做过很多高度不固定cell都是通过代码去计算，经常会遇到东西做完之后产品或者设计觉得不好又要改的，那之前写的计算高度的代码又要改很多，感觉很麻烦。这篇文章主要介绍怎样利用autolayout帮我们计算不固定cell的高度，再也不用担心改动很多了。

最终效果

效果1.png

步骤

1.创建自定义cell

新建一个继承UITableViewCell的自定义cell，我一般喜欢用xib来搭建UI，可以少写很多代码。

1.png

2.拖控件设置添加约束，拖线

这里就不详细介绍怎么添加约束了，实际工作中可以按照设计给的标注添加约束。将图片距离父view最右边的约束拖出来。

2.png

基本上UI相关的都完成了，剩下的就是赋值和一些逻辑处理了。

3.cell赋值和计算逻辑

var isCalculateHeight = false // 用来标记是否是计算高度的cell

var news : CellModel? { // model
        didSet { // 这里做一些赋值和计算操作
            lbTitle.text = news?.title
            lbDesc.text = news?.desc
            lbTime.text = news?.time
            var showImg = false
            if (news?.imageUrl?.characters.count)! == 0 {
                conImgRight.constant = -80 //如果没有图片则不显示图片 -80可以理解为图片的maxX - 80 = 父试图的最右边(也就是宽度)
            }else {
                conImgRight.constant = 15
                showImg = true
            }
            layoutIfNeeded() // 当内容或者约束发生改变时会重新布局
            if isCalculateHeight == true {  // 只有需要计算高度时才执行以下代码
                var cellHeight = CGFloat(lbTime.frame.maxY + 12) // 时间label的底部 + 设计要求的高度
                if showImg == true { // 如果不需要显示图片的话就不用管是图片距离底部最近还是时间距离底部最近了
                    if imgCover.frame.maxY > lbTime.frame.maxY {
                        cellHeight = CGFloat(imgCover.frame.maxY + 12)
                    }
                }
                news?.cellHeight = cellHeight
            }
        }
    }

4.利用cell自身去计算高度

创建计算cell方法

 static func createCalculateCell(maxHeight:CGFloat) -> TableViewCell{
        let cell = TableViewCell.createCell()
        cell.isCalculateHeight = true // 这里要标记为true
        var newFrame = cell.frame
        newFrame.size.width = UIScreen.main.bounds.width // 这里注意一定要把cell宽度改为屏幕的宽度或者自己想要的宽度
        newFrame.size.height = maxHeight // ios7对autolayout的支持不是很好所以最好给一个最大高度
        cell.frame = newFrame
        return cell
    }

这里需要注意的是，从xib中加载出来的view的大小就是xib里面设置的大小，所以计算高度的cell宽度一定要和屏幕一样大不然计算出来的高度会不准确

创建Cell方法

static func createCell()->TableViewCell {
        /* 注意，这里有个坑。如果在cell里面又加了手势的话，那就不能取数组的最后一个了。因为最后一个是手势不是cell
         */
        if let newCell = Bundle.main.loadNibNamed(ID, owner: nil, options: nil)?.last as? TableViewCell {
            return newCell;
        }else {
            let cell = TableViewCell(style: .default, reuseIdentifier: ID)
            cell.textLabel?.text = "error"
            return cell;
        }
    }

可循环利用cell的创建

static func cell(tableView:UITableView!) -> TableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: ID)
        if cell == nil {
            cell = TableViewCell.createCell()
        }
        return cell as! TableViewCell
    }

5.外部使用

提供一个专门用来计算高度的cell，最好用懒加载的方式。如果一个页面有很多种样式的话，有些cell可能根本就没有出现过所以就没必要创建了

lazy var dataArray = Array<CellModel>() 
lazy var calculateCell = TableViewCell.createCalculateCell(maxHeight: 999)

重写tableView cell高度的代理方法

override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row < dataArray.count {
            let news = dataArray[indexPath.row]
            if news.cellHeight <= 0 { // 只有当没有高度时才需要计算
                calculateCell.calculate(model: news)
            }
            return news.cellHeight
        }
        return 0
    }

取模型的时候最好是判断一下数组越界的问题

横屏效果

效果2.png

屏幕旋转处理

/*
 *首先注册屏幕旋转通知
 */
func initListener() {
        NotificationCenter.default.addObserver(self, selector: #selector(TableViewController.orientationDidChange(noti:)), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)
 }
 deinit {
        NotificationCenter.default.removeObserver(self)
  }
/*
 *屏幕宽度改变时也要改变计算cell的宽度，把已经算好的高度改为0(也可以多增加一个属性这样横竖屏算一次高度就可以了)
 */
 func orientationDidChange(noti:Notification) {
        dataArray.foreach { (news) in
            news.cellHeight = 0
        }
        calculateCell.updateWidth(maxHeight: 999)
        tableView.reloadData()
    }

源码

点击这里下载源代码