具有 accordion-like 具有动态高度的单元格动画的 UITableView

Question

我正在尝试在具有动态高度单元格的 UITableView 中创建一个 accordion-like 动画。

第一次尝试使用 reloadRows

问题似乎是 reloadRows 会导致即时单元格高度更新，因此尽管 tableview 会设置动画，但单元格本身不会设置其高度的动画。这导致其他单元格有时会重叠并干扰展开的单元格内容。

第二次尝试使用 beginUpdates/endUpdates

这是我得到的最接近单元格根据需要展开的位置。但是，当折叠时，TextView 会立即消失，而标题会挂在中间直到折叠。

目标

我尝试实现的效果与尝试 2 中展开时的效果完全相同，但在折叠时也是相反的效果 (accordion/reveal-style)。

注意：如果可能的话，我还想继续使用 StackView 在 UITextView 上设置 hidden 属性，因为我正在处理的实际项目涉及其他几个应该类似于 UITextView 的动画效果。

我正在使用 XCode 11 beta 7。

第一次尝试使用 reloadRows 的代码：

struct Post {
    var id: String
    var title: String
    var content: String
}

let posts = [
    Post(id: "1", title: "Post 1", content: "Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est"),
    Post(id: "2", title: "Post 2", content: "Lorem ipsum dolor"),
    Post(id: "3", title: "Post 3", content: "Lorem ipsum dolor"),
    Post(id: "4", title: "Post 4", content: "Lorem ipsum dolor"),
    Post(id: "5", title: "Post 5", content: "Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda."),
    Post(id: "6", title: "Post 6", content: "Lorem ipsum dolor")
]

UITableViewController

class MyTableViewController: UITableViewController {
    var selectedRow: IndexPath? = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.backgroundColor = .darkGray
        self.tableView.rowHeight = UITableView.automaticDimension
        self.tableView.estimatedRowHeight = 200
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView,
                            numberOfRowsInSection section: Int) -> Int {
        return posts.count
    }

    override func tableView(_ tableView: UITableView,
                            cellForRowAt indexPath: IndexPath)
        -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(
            withIdentifier: "Cell", for: indexPath) as? MyTableViewCell
            else { fatalError() }

        let post = posts[indexPath.row]
        let isExpanded = selectedRow == indexPath
        cell.configure(expanded: isExpanded, post: post)

        return cell
    }

    override func tableView(_ tableView: UITableView,
                            didSelectRowAt indexPath: IndexPath) {
        var reloadPaths: [IndexPath] = []

        if selectedRow != nil {
            reloadPaths.append(selectedRow!)
        }

        if selectedRow == indexPath {
            selectedRow = nil
        } else {
            reloadPaths.append(indexPath)
            selectedRow = indexPath
        }

        tableView.reloadRows(at: reloadPaths, with: .automatic)
    }
}

单元格

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var textView: UITextView!

    func configure(expanded: Bool, post: Post) {
        title.text = post.title
        textView.text = post.content
        configureExpansion(expanded)
    }

    func configureExpansion(_ expanded: Bool) {
        self.textView.isHidden = !expanded
        self.contentView.backgroundColor = expanded ?
            .red : .systemBackground
    }
}

故事板

尝试 2 的代码使用 beginUpdates/endUpdates

与尝试 1 完全相同的代码，除了 ...didSelectRowAt... 被替换为：

override func tableView(_ tableView: UITableView,
                        didSelectRowAt indexPath: IndexPath) {
    tableView.beginUpdates()

    if let selectedRow = selectedRow,
        let prevCell = tableView.cellForRow(at: selectedRow) as? MyTableViewCell {
        prevCell.configureExpansion(false)
    }

    let selectedCell = tableView.cellForRow(at: indexPath) as? MyTableViewCell
    if selectedRow == indexPath {
        selectedCell?.configureExpansion(false)
        selectedRow = nil
    } else {
        selectedCell?.configureExpansion(true)
        selectedRow = indexPath
    }

    tableView.endUpdates()
}

Answer 1

我终于在 beginUpdates/endUpdates 的基础上解决了它。我对问题和解决方案的进一步研究如下。

问题

如原问题中所述，扩展阶段工作正常。这样做的原因是：

将 UITextView 的 isHidden 属性设置为 false 时，包含的堆栈视图会调整大小并为单元格提供新的固有内容大小
使用beginUpdates/endUpdates 将在不重新加载单元格的情况下以动画方式更改行高。初始状态是 UITextView 的内容可见但当前被当前单元格高度裁剪，因为单元格尚未调整大小。
当调用 endUpdates 时，单元格将自动扩展，因为固有大小已更改且 tableView.rowHeight = .automaticDimension。动画会根据需要逐渐显示新内容。

但是，折叠阶段不会产生相同的反向动画效果。没有的原因是：

将 UITextView 的 isHidden 属性设置为 true 时，包含的堆栈视图会隐藏视图并将单元格调整为新的固有内容大小。
当调用endUpdates时，动画将通过立即移除 UITextView 开始。考虑一下，这是意料之中的，因为它与扩张期间发生的情况相反。但是，它也打破了预期的动画效果，将可见元素留在中间 "hanging" 而不是在行缩小时逐渐隐藏 UITextView。

一个解决方案

要获得所需的隐藏效果，UITextView 应在整个动画过程中保持可见，同时单元格会收缩。这包括几个步骤：

步骤 1：覆盖 heightForRow

override func tableView(_ tableView: UITableView,
                        heightForRowAt indexPath: IndexPath) -> CGFloat {
    // If a cell is collapsing, force it to its original height stored in collapsingRow?
    // instead of using the intrinsic size and .automaticDimension
    if indexPath == collapsingRow?.indexPath {
        return collapsingRow!.height
    } else {
        return UITableView.automaticDimension
    }
}

UITextView 现在将在单元格缩小时保持可见，但由于自动布局，UITextView 会立即被裁剪，因为它锚定到单元格高度。

步骤 2：在 UIStackView 上创建高度约束，并在 cell 收缩时优先使用它

2.1: 在 Interface builder 中对 UIStackView 添加了高度限制

2.2：在 MyTableViewCell[=29] 中添加 heightConstraint 作为 strong（不弱，这很重要）outlet =]

2.3 in awakeFromNib in MyTableViewCell, set heightConstraint.isActive = false 保持默认行为

2.4 in interface builder: 确保 UIStackView 底部约束的优先级设置低于高度约束的优先级。 IE。 999 用于底部约束，1000 用于高度约束。如果不这样做会导致在折叠阶段出现约束冲突。

步骤 3： 折叠时，激活 heightConstraint 并将其设置为 UIStackView 的当前固有大小。这会在单元格高度减小时保持 UITextView 的内容可见，但也会根据需要裁剪内容，从而产生 "conceal" 效果。

if let expandedRow = expandedRow,
    let prevCell = tableView.cellForRow(at: expandedRow.indexPath) as? MyTableViewCell {
    prevCell.heightConstraint.constant = prevCell.stackView.frame.height
    prevCell.heightConstraint.isActive = true

    collapsingRow = expandedRow
}

第四步：使用CATransaction.setCompletionBlock

动画完成后重置状态

合并的步骤

class MyTableViewController: UITableViewController {
    var expandedRow: (indexPath: IndexPath, height: CGFloat)? = nil
    var collapsingRow: (indexPath: IndexPath, height: CGFloat)? = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.backgroundColor = .darkGray
        self.tableView.rowHeight = UITableView.automaticDimension
        self.tableView.estimatedRowHeight = 200
    }

    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView,
                            numberOfRowsInSection section: Int) -> Int {
        return posts.count
    }

    override func tableView(_ tableView: UITableView,
                            cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(
            withIdentifier: "Cell", for: indexPath) as? MyTableViewCell
            else { fatalError() }

        let post = posts[indexPath.row]
        let isExpanded = expandedRow?.indexPath == indexPath
        cell.configure(expanded: isExpanded, post: post)

        return cell
    }

    override func tableView(_ tableView: UITableView,
                            heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath == collapsingRow?.indexPath {
            return collapsingRow!.height
        } else {
            return UITableView.automaticDimension
        }
    }

    override func tableView(_ tableView: UITableView,
                            didSelectRowAt indexPath: IndexPath) {
        guard let tappedCell = tableView.cellForRow(at: indexPath) as? MyTableViewCell
            else { return }

        CATransaction.begin()
        tableView.beginUpdates()

        if let expandedRow = expandedRow,
            let prevCell = tableView.cellForRow(at: expandedRow.indexPath)
                as? MyTableViewCell {
            prevCell.heightConstraint.constant = prevCell.stackView.frame.height
            prevCell.heightConstraint.isActive = true

            CATransaction.setCompletionBlock {
                if let cell = tableView.cellForRow(at: expandedRow.indexPath)
                    as? MyTableViewCell {
                    cell.configureExpansion(false)
                    cell.heightConstraint.isActive = false
                }
                self.collapsingRow = nil
            }

            collapsingRow = expandedRow
        }


        if expandedRow?.indexPath == indexPath {
            collapsingRow = expandedRow
            expandedRow = nil
        } else {
            tappedCell.configureExpansion(true)
            expandedRow = (indexPath: indexPath, height: tappedCell.frame.height)
        }

        tableView.endUpdates()
        CATransaction.commit()
    }
}

具有 accordion-like 具有动态高度的单元格动画的 UITableView

UITableView with accordion-like animation of cells with dynamic height

uitableview

ios

swift

uistackview