在单元格的UIStackView中隐藏subView时，动画很奇怪

Question

这是情况。 stackView中的标题标签，“更多”按钮和内容标签。 并且stackView在单元格中，设置“自动布局”。 tableView的单元格的高度设置为AutoDimension。 当我点击按钮时，内容标签将显示或隐藏。

该按钮的操作方法是

@IBAction func readMore(_ sender: Any) {
  tableView.performBatchUpdates({
    self.contentLabel.isHidden.toggle()
  }, completion: nil)
}

这是动画缓慢的结果：

如您所见，当要显示内容时，首先显示第2行，即从中心显示内容。 当要隐藏内容时，内容标签会立即隐藏，并且按钮会拉伸到内容标签在隐藏之前的框架。 这个动画很奇怪。

此外，如果将stackView的间距设置为10，情况会更糟。 标题标签也受到影响：

我调整了所有内容，包括stackView的分布，三个subView的内容模式和内容拥抱/压缩优先级。 我找不到合适的方法来修复它。

这是理想的结果：

我通过一些棘手的方式实现了它：

@IBAction func readMore(_ sender: Any) {
  tableView.performBatchUpdates({
    UIView.animate(withDuration: 0.3) { // It must be 0.3
      self.contentLabel.isHidden.toggle()
    }
  }, completion: nil)
}

我不确定这是否是最合适的解决方法。 因此，我想知道为什么会发生这种奇怪的动画，以及是否有更适当的方法来修复它。 谢谢！

Answer 1

我之前不得不做过几次类似的动画。 解决此问题的方法是定义堆栈视图的高度，并独立定义单元格的内容视图。 然后，当您希望更改单元格的高度时，只需更新内容视图的高度约束。

确定视图高度的一种好方法是使用intrinsicContentSize属性。 如果您需要与继承的值不同的值，请重写此方法。

通知视图大小更改的另一种方法是创建一个具有委托或闭包的子类，该子类或闭包是从子类化的view frame属性调用的，并将新大小传递给正在侦听它的任何人。

Answer 2

设置动画以隐藏/显示多行标签可能会出现问题， 尤其是在堆栈视图中使用时。

如果尝试一下，您会发现，即使在表视图单元格之外（仅是视图中的堆栈视图），切换标签的.isHidden属性时也会看到相同的问题。 这是由于UILabel其文本垂直居中 。

这是另一种方法，它不使用堆栈视图（为清晰起见，使用背景色）：

顶部标签设置为1行； “读取更多”是一个常规按钮，“底部标签”设置为0行。

您会注意到粉红色的矩形。 这是一个UIView ，我将其命名为ShimView将ShimView更多介绍。

顶部标签被约束Top: 4, Leading: 8, Trailing: 8 Top: 0 (to topLabel), Leading: 8, Trailing: 8 Top: 4, Leading: 8, Trailing: 8按钮被约束Top: 0 (to topLabel), Leading: 8, Trailing: 8底部标签被约束Top: 0 (to button), Leading: 8, Trailing: 8

“ shim视图”受约束Trailing: 8, Top: 0 (*to the top of bottom label*), Bottom: 4 (to the contentView)

“填充程序视图” 也被赋予了高度限制21 ， Priority: 999并且该高度限制被连接到单元格类中的IBOutlet 。

关键是我们将调整匀场的Height约束的.constant以扩展/折叠单元格。

在初始化时，我们将.constant设置为0这将使Bottom Label保持其内容确定的高度，但将不可见，因为它将被单元格的contentView裁剪。

当我们要“显示/隐藏”标签时，我们将对垫片的高度.constant进行动画处理。

结果：

并且，清除背景色后的结果：

这是代码：

//
//  ExpandCollapseTableViewController.swift
//
//  Created by Don Mag on 6/19/18.
//

import UIKit

class ExpandCollapseCell: UITableViewCell {

    @IBOutlet var topLabel: UILabel!
    @IBOutlet var theButton: UIButton!
    @IBOutlet var bottomLabel: UILabel!
    @IBOutlet var theShim: UIView!
    @IBOutlet var shimHeightConstraint: NSLayoutConstraint!

    var myCallBack: (() -> ())?

    @IBAction func didTap(_ sender: Any) {
        myCallBack?()
    }

}

class ExpandCollapseTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 100
    }

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

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

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ExpandCollapseCell", for: indexPath) as! ExpandCollapseCell

        cell.topLabel.text = "Index Path - \(indexPath)"
        cell.bottomLabel.text = "Line 1\nLine 2\nLine 3\nLine 4"

        // init to "collapsed"
        // in actual use, this would be tracked so the row would remain expanded or collapsed
        // on reuse (when the table is scrolled)
        cell.shimHeightConstraint.constant = 0

        if true {
            cell.topLabel.backgroundColor = .clear
            cell.theButton.backgroundColor = .clear
            cell.bottomLabel.backgroundColor = .clear
            cell.theShim.backgroundColor = .clear
        }

        cell.myCallBack = {
            UIView.animate(withDuration: 0.3) { // It must be 0.3
                self.tableView.beginUpdates()
                cell.shimHeightConstraint.constant = (cell.shimHeightConstraint.constant == 0) ? cell.bottomLabel.frame.size.height : 0
                self.tableView.layoutIfNeeded()
                self.tableView.endUpdates()
            }
        }

        return cell
    }

}