ios - UITableView 动画错误 - 动画之前计算的可见区域

Question

我有一个简单的 UI(与 Uber 非常相似)，用户可以在主要内容之上滚动表格 View 。

UI和对应的UITableView动画bug可以显示为:

这是正在发生的事情:

• 用户点击表格 View ，表格 View 就会展开。这是通过添加确保 tableView.top = topMenu.bottom 的布局约束来完成的。被删除的约束是 tableView.height = 30。一切看起来都不错。
• 然后，用户向下滚动一定量(55+ 像素)，约束将恢复到原始状态。这发生在动画 block 内，因此流程看起来很流畅。
• 错误发生在此处。据我了解，tableView的可见区域是根据动画结束后的样子来计算的。但是，此计算发生在动画之前。因此，在动画期间，表格 View 上仅显示 1-2 个单元格；导致该错误。
• 我可以通过暂时将 tableView 的高度设置为较大值并仅在动画结束后将其设置回较小值来解决此问题。但是，这不起作用，因为 iPhoneX 上的安全区域被 tableView 覆盖。

相关代码在这里:

    private func animateTheChange() {
        UIView.animate(withDuration: 0.8, animations: {
            self.view.setNeedsUpdateConstraints()
            self.view.layoutIfNeeded()
        })
    }

    override func updateViewConstraints() {
        self.touchConstraints()
        super.updateViewConstraints()
    }

    private func touchConstraints() {
        if self.collapsed {
            self.view.addConstraint(self.collapsedConstraint)
            self.view.removeConstraint(self.expandedConstraint)
            if UserHardware.IS_IPHONE_X {
                self.bottomConstraint.constant = 0
            }
        }
        else { //  Expand
            self.view.addConstraint(self.expandedConstraint)
            self.view.removeConstraint(self.collapsedConstraint)
            if UserHardware.IS_IPHONE_X {
                self.bottomConstraint.constant = 34
            }
        }
    }

相关 Stackoverflow 问题(有帮助但不能解决问题):

• UITableView frame height animation glitch
• Dynamic UITableView height
• UITableView frame change animation issue

Answer 1

一个选项...

• 将 tableView 嵌入“包含”UIView
• 将 tableView 限制在包含 View 的顶部和底部
• 将包含 View 底部约束到安全区域底部
• 使用 优先级 250(默认低)将包含 View 顶部约束到 topMenu 的底部，并将其连接到 @IBOutlet var tableContainerTop: NSLayoutConstraint !
• 将包含 View 的高度限制为 30，优先级为 750(默认高)，并将其连接到 @IBOutlet var tableContainerHeight: NSLayoutConstraint!

当您想要“展开”或“折叠”tableView 时，请更改包含 View 的约束的优先级。

    UIView.animate(withDuration: 0.8, animations: {

        if self.isExpanded {
            self.tableContainerHeight.priority = .defaultHigh
            self.tableContainerTop.priority = .defaultLow
        } else {
            self.tableContainerHeight.priority = .defaultLow
            self.tableContainerTop.priority = .defaultHigh
        }
        self.view.layoutIfNeeded()

    })