为 UITableViewCell 高度变化添加动画

如何让 UITableView 的 cell 高度动态变化且有动画效果呢?

如题, 要想达到目的, 我目前总结有两种方式:

1. 使用 UITableView 的 func reloadRows(at indexPaths: [IndexPath], with animation: UITableView.RowAnimation) 方法
   • 优点: 调用简单, 只需要针对指定 cell 做出高度变更, 然后将该 cell 的 indexPath 传入此方法即可
   • 缺点:
     • 会调用针对该 cell 调用 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 等代理方法
     • 刷新时界面会有闪烁现象
2. 使用 UITableView 的 func beginUpdates() 与 func endUpdates() 方法
   • 优点: 可以自定义动画时长与效果, 更加灵活, 在对指定 cell 做出改变后, 调用此方法会触发所有 cell 的高度计算并刷新, 且高度变化时有动画效果

   在 iOS 11 之后, 我们可以用 func performBatchUpdates(_ updates: (() -> Void)?, completion: ((Bool) -> Void)? = nil) 方法来代替 beginUpdates 和 endUpdates 方法

综上, 我在实际项目中选择方法2作为动态高度动画方案, 具体效果如下:

案例

使用 beginUpdates 与 endUpdates (或 performBatchUpdates) 的实际案例代码如下:

• TestTableViewCellExpandableVC.swift

    import UIKit
    
    class TestTableViewCellExpandableVC: UIViewController {
    
        private var tableView: UITableView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            initView()
        }
    }
    
    // MARK: - UITableView Data Source
    extension TestTableViewCellExpandableVC: UITableViewDataSource {
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = (tableView.dequeueReusableCell(withIdentifier: "Cell") as? TestTableViewCellExpandableCell) ??
            .init(style: .default, reuseIdentifier: "Cell")
    
            cell.setContent(with: "Row \(indexPath.row)") { [weak cell, weak tableView] in
                if #available(iOS 11.0, *) {
                    tableView?.performBatchUpdates {
                        cell?.updateHeight()
                    }
                } else {
                    cell?.updateHeight()
                    tableView?.beginUpdates()
                    tableView?.endUpdates()
                }
            }
    
            return cell
        }
    
        func numberOfSections(in tableView: UITableView) -> Int {
            return 1
        }
    
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return 3
        }
    
    }
    
    // MARK: UI
    
    extension TestTableViewCellExpandableVC {
        private func initView() {
    
            tableView = .init()
            tableView.dataSource = self
            tableView.separatorStyle = .none
            view.addSubview(tableView)
            tableView.snp.makeConstraints { make in
                make.top.equalToSuperview()
                make.left.right.bottom.equalToSuperview()
            }
    
        }
    }
   
  

• TestTableViewCellExpandableCell.swift

    import UIKit
    
    class TestTableViewCellExpandableCell: UITableViewCell {
    
        enum HeightType {
            case small
            case medium
            case big
    
            var height: CGFloat {
                switch self {
                case .small: return 100
                case .medium: return 200
                case .big: return 300
                }
            }
    
            var next: HeightType {
                switch self {
                case .small: return .medium
                case .medium: return .big
                case .big: return .small
                }
            }
        }
    
        // MARK: Subviews
        private var titleLb: UIButton!
    
        // MARK: Data
        private var heightType: HeightType = .small
        private var tapClosure: () -> Void = {}
    
        // MARK: Life Cycle
    
        override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
            super.init(style: style, reuseIdentifier: reuseIdentifier)
    
            initUI()
        }
    
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }
    
    // MARK: - Custom Method
    
    extension TestTableViewCellExpandableCell {
        func setContent(with title: String?, tapClosure: @escaping () -> Void) {
            titleLb.setTitle(title, for: .normal)
            self.tapClosure = tapClosure
        }
    
        func updateHeight() {
            heightType = heightType.next
            titleLb.snp.updateConstraints { make in
                // 这里必须使用 .low 以上的优先级, 否则会约束报错
                make.height.equalTo(heightType.height).priority(.high)
            }
        }
    
        @objc private func tap() {
            tapClosure()
        }
    }
    
    
    // MARK: - UI
    
    extension TestTableViewCellExpandableCell {
        private func initUI() {
            backgroundColor = UIColor.gray
    
            titleLb = .init()
            titleLb.addTarget(self, action: #selector(tap), for: .touchUpInside)
            titleLb.setTitleColor(.white, for: .normal)
            titleLb.backgroundColor = UIColor.red
            contentView.addSubview(titleLb)
    
            titleLb.snp.makeConstraints { make in
                make.height.equalTo(heightType.height).priority(.high)
                make.width.equalTo(200)
                make.centerX.equalToSuperview()
                make.top.bottom.equalToSuperview().inset(5)
            }
    
            let bottomLine = UIView()
            bottomLine.backgroundColor = .black
            contentView.addSubview(bottomLine)
            bottomLine.snp.makeConstraints { make in
                make.left.right.equalToSuperview().inset(5)
                make.bottom.equalToSuperview()
                make.height.equalTo(0.5)
            }
        }
    }
   
  

Reference

• Adjusting custom Tableviewcell - NSLayoutConstraint conflict