ios - 具有动态高度的单元格 Accordion 式动画的 UITableView

Question

我正在尝试在具有动态高度单元格的 UITableView 中创建类似 Accordion 的动画。

第一次尝试使用 reloadRows

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

第二次尝试使用 beginUpdates/endUpdates

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

目标

我尝试实现的效果与尝试 2 中展开时的效果完全相同，但在折叠时也是相反的( Accordion /显示样式)。

注意:如果可能的话，我还想继续使用 StackView 来设置 UITextView 上的 hidden 属性，因为我正在处理的实际项目涉及其他几个 subview ，它们的动画应该类似于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
    }
}

Storyboard

尝试 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 的基础上解决了这个问题。我对问题和解决方案的进一步研究如下。

问题

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

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

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

1. 将 UITextView 的 isHidden 属性设置为 true 时，包含的堆栈 View 会隐藏 View 并将单元格调整为新的固有内容大小。
2. 当 endUpdates 被调用时，动画将通过立即移除 UITextView 开始。考虑一下，这是意料之中的，因为它与扩张期间发生的情况相反。但是，当行缩小时，它会将可见元素“悬挂”在中间，而不是逐渐隐藏 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 中添加 heightConstraint 作为 strong(不是弱，这很重要)

2.3 在 MyTableViewCell 的 awakeFromNib 中，设置 heightConstraint.isActive = false 以保持默认行为

2.4 在界面生成器中:确保 UIStackView 底部约束的优先级设置低于高度约束的优先级。 IE。 999 用于底部约束，1000 用于高度约束。如果不这样做，就会在折叠阶段导致约束冲突。

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

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
}

第 4 步:在动画完成时使用 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()
    }
}