Swift-Cell行高自适应之SnapKit

本文以UITableView 使用SnapKit 来设置约束为例:

1. 列表页设置高度自适应、预估行高

        // 自动计算行高
        tableView.rowHeight = UITableView.automaticDimension
        // 设置预估行高, 必须要写, 否则打印垃圾log日志, 提示约束冲突
        tableView.estimatedRowHeight = 400

2. cell 中的操作

• 一般情况下只根据字体的多少, 自动换行后计算承载文字的控件底部约束与contentView 进行约束更新即可.
• 这里说另一种情况, 根据数据的不同, cell会显示不同数量的子控件, 也就是说, 子控件或者子控件和contentView 的相对约束发生改变时要做的处理.
  • 布局时当前后约束参照物发生改变时, 一般都选择记录约束 -> 卸载约束 -> 重新设置约束来约束布局; 而当参照物未发生改变(也就是上面说的一把情况)的时候, 只需要更新约束即可.

示例图片 image.png

2.1 声明需要记录的约束

    // MARK: 记录底部视图的 顶部约束 (需要引入import SnapKit)
    var bottomViewTopConstraint: Constraint?

2.2 记录约束

        // MARK: cell 自适应高度, 需要与底部视图做约束(具体⬇️)
        contentView.addSubview(bottomView)
        bottomView.snp_makeConstraints { (make) in
            make.left.right.equalTo(contentView)
            // MARK: 记录底部视图的 顶部约束的赋值方式 (retweetView 就是可有可无的view, 根据数据来判断显示还是隐藏, 所以要记录bottomView 的顶部约束)
            bottomViewTopConstraint = make.top.equalTo(retweetView.snp_bottom).constraint
            make.height.equalTo(35)

            /** swift3.0 之后cell 的高度自适应
                写法1 - 直接设置最底部控件的底部与contentView的底部平齐
             */
            make.bottom.equalTo(contentView)
        }

2.3 在得到数据时先卸载记录的约束

            // MARK: - 注意: 每次重新对底部视图的顶部做约束时, 要把以前对底部视图的顶部的约束移除 ->卸载约束!
            bottomViewTopConstraint?.deactivate()

2.4 重新设置约束

if 显示retweetView {

    retweetView.isHidden = false
    bottomView.snp_makeConstraints { (make) in
        // 由于cell 的缓存机制, 不知道从缓存池拿出来的约束是哪个样子的, 所以都加上记录. 方便下次进来的时候卸载.
        bottomViewTopConstraint = make.top.equalTo(retweetView.snp_bottom).constraint
    }
} else {
    
    // originalView 是retweetView 同级的且在retweetView 位置之上的view
    retweetView.isHidden = true
    bottomView.snp_makeConstraints { (make) in
        bottomViewTopConstraint = make.top.equalTo(originalView.snp_bottom).constraint
    }
}

拓展: cell 的高度自适应写法

        // MARK: cell 自适应高度, 需要与底部视图做约束(具体⬇️)
        contentView.addSubview(bottomView)
        bottomView.snp_makeConstraints { (make) in
            make.left.right.equalTo(contentView)
            // MARK: 记录底部视图的 顶部约束的赋值方式
            bottomViewTopConstraint = make.top.equalTo(retweetView.snp_bottom).constraint
            make.height.equalTo(35)

            /** swift3.0 之后cell 的高度自适应
                写法1 - 直接设置最底部控件的底部与contentView的底部平齐
             */
            make.bottom.equalTo(contentView)
        }
        
        // swift3.0 之前通过这种方式来约束
//        contentView.snp_makeConstraints { (make) in
//            make.bottom.equalTo(bottomView)
//        }
        
        /** swift3.0 之后cell 的高度自适应
           写法2 - 设置contentView 的四边与self 相等, 底部与最底部控件平齐
           弊端: 控制台会打印约束的垃圾信息.
                Changing the translatesAutoresizingMaskIntoConstraints property of the contentView of a UITableViewCell is not supported and will result in undefined behavior, as this property is managed by the owning UITableViewCell
                (不支持更改UITableViewCell的contentView的translatesAutoresizingMaskIntoConstraints属性，这将导致未定义的行为，因为此属性由所属UITableViewCell管理)
        */
//        contentView.snp_makeConstraints { (make) in
//            make.left.top.right.bottom.equalTo(self)
//            make.bottom.equalTo(bottomView)
//        }

.End