ios - 动画 TableView 高度约束但动画正在跳跃

Question

我想为我拥有的 tableview 的高度约束设置动画。我已经建立了一个小型测试项目。 TableView 位于容器 View 中。

我的代码是这样的:

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var heightConstraint: NSLayoutConstraint!
    @IBOutlet weak var contentView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

    @IBAction func didTapAnimate(_ sender: Any) {
        heightConstraint.constant = 400
        UIView.animate(withDuration: 1.0, animations: {() in
            self.contentView.layoutIfNeeded()
        })
    }

}

extension ViewController: UITableViewDataSource {

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

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }

}

extension ViewController: UITableViewDelegate {

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.backgroundColor = UIColor.red
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }

}

问题是，当我点击动画按钮时，动画并没有顺利发生。 table 首先跳到一定高度，然后为其余部分设置动画。这里的例子:

我在这里做错了什么？为什么 table 会跳？我需要动画流畅。对此的任何提示或指示将不胜感激!谢谢!

Answer 1

所以您的问题不在于动画，而在于 UITableView 的重新加载。 tableview 仅包含可见单元格，并且它加载了一个额外的单元格，该单元格大约等于顶部和底部的单元格高度。但是你的高度增长得如此之快，以至于它必须重新加载以保持可见的单元格，从而使重新加载和表格看起来很不稳定。因此，我将如何处理这个问题是首先从 tableview 的顶部添加一个额外的约束到底部安全区域插图，它与您的高度约束成反比。您很快就会明白为什么。这就是它的样子。对不起，我离开了内容 View ，但它应该都是一样的..

这是整个设置的图像。

现在是代码和技巧。诀窍是当让 tableview 变大时，你首先要在没有动画的情况下这样做，但不要向上移动它。然后将我们刚刚添加的顶部约束动画化为等于 -height。这样用户看不到重新加载，但看起来它向上生长。要使其更小，请将其向下移动然后更改大小，以便用户永远不会看到重新加载。这是代码，我添加了注释以帮助您理解我在说什么。

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var topTableConstraint: NSLayoutConstraint!
    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var heightConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

    @IBAction func didTapAnimate(_ sender: Any) {

        if heightConstraint.constant != 400{
            //first change the height.  The thing that will happen is allow the tableview to load up all of it's rows and will stop the choppy ness
            heightConstraint.constant = 400
            self.view.layoutIfNeeded()
            //now we can move it up and it will appear to grow.
            //with iphone x i would put a view in inside the safearaa above the table as to now see it slide up or load underneath or you could pin your content view to the safe area and clip to bounds and this would work as well
            topTableConstraint.constant = -heightConstraint.constant
            UIView.animate(withDuration: 1.0) {
                self.view.layoutIfNeeded()
            }
        }else{
           //animating down so let's do the reverse order
            topTableConstraint.constant = -100
            UIView.animate(withDuration: 1.0, animations: {
                self.view.layoutIfNeeded()
            }) { (finished) in
                self.heightConstraint.constant = 100
                self.view.layoutIfNeeded()
            }
        }
    }

}

extension ViewController: UITableViewDataSource {

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

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }

}

extension ViewController: UITableViewDelegate {

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.backgroundColor = UIColor.red
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }

}

结果看起来像这样。希望这对您有所帮助，并为您解释并解决问题。

此外，如果您想让所有单元格都变成红色，那么您需要注册一个单元格，使用 dequeueReusableCell 而不是创建一个新单元格。