展开 UITableViewCell 添加 UICollectionView 作为子视图

Question

我查看了其他几个 Stack Overflow 问题，但我一直无法找到一个可以回答我的具体问题的问题。 很多答案都说要使表格视图部分可扩展，但我希望该行可扩展并能够在扩展时向该行添加集合视图。 而且，如果它可以在没有任何外部库的情况下完成，那将是最好的。

我有一个 UITableView 部分，其中包含可以点击展开或折叠的行。 折叠时，单元格在左侧的垂直 UIStackView 中显示两行文本，在右侧显示图像和向下箭头。 下图显示了折叠视图，我可以使用 AutoLayout 约束使其工作。

展开时，应该在单元格内添加一个 UICollectionView 并且该行应该动画展开以显示集合视图。 下图大致显示了它应该是什么样子。 底部的灰色区域是集合视图，它是一个具有动态高度的水平集合视图。

但我不知道如何 go 关于将集合视图添加到 UITableViewCell 以及如何对其进行动画处理。我考虑过在代码中创建集合视图，向左右添加约束，将其固定到行的边缘（所以它将是全宽的）。 然后我要在集合视图的顶部添加一个约束，将其固定到表格视图单元格的底部，然后在 animation 块中，我要更改约束，以便集合视图的底部位于表格视图单元格的底部和集合视图的顶部被约束到图像视图的底部，并将压缩阻力优先级设置为 1000 以确保集合视图不被压缩，但我最终得到了无法满足的约束和我的约束最终被删除。 我最终放弃了这个想法，因为我觉得它太复杂了，应该有一个更直接的方法来做到这一点。

我考虑这样做的另一种方法是在同一个 XIB 文件中有两个单独的视图 - 一个用于普通 state，一个用于扩展 state。 但是后来我不确定如何为状态之间的行中的所有更改设置动画。

有没有人知道如何在展开时将集合视图（或任何视图，我猜）添加到表格视图单元格的底部以及如何为其设置动画？ 做这样的事情的最佳实践是什么？ 谢谢您的帮助。

Answer 1

我会建议...

• 将子视图添加到您的单元格作为集合视图“容器”
• 设置它的.clipsToBounds = true
• 用.constant = 0给它一个高度约束
• 使用.constant = 0给 collectionView 一个高度约束
• 当您知道所需的 collectionViewCell 高度时，设置 collectionView 的约束.constant以便加载单元格
• 动画“容器”视图的高度约束以展开/折叠

从“容器”视图本身开始......一旦你让它正确展开/折叠，然后添加到集合视图中。

---

编辑这里是动画展开/折叠表格视图单元格的一个非常基本的示例。

数据结构- 键和值字符串、“高度”属性（可能会在您知道该行的集合视图的高度时设置）和“扩展”标志。

struct DemoStruct {
    var key: String = ""
    var value: String = ""
    var cvHeight: CGFloat = 0
    var expanded: Bool = false
}

单元格 class - 两个标签，展开/折叠按钮，标签下方的“容器”视图：

class SampleTVCell: UITableViewCell {
    
    // always visible elements
    let keyLabel = UILabel()
    let valLabel = UILabel()
    let btn = UIButton()
    
    // this will either hold the collectionView
    //  or be replaced by the collectionView
    let containerView = UIView()
    
    // will be set by the data
    var containerHeight: NSLayoutConstraint!
    
    // constraints for expanded/collapsed states
    var expandedConstraint: NSLayoutConstraint!
    var collapsedConstraint: NSLayoutConstraint!
    
    // down/up chevrons
    var expandImg: UIImage!
    var collapseImg: UIImage!
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        // make sure we get down/up button images
        guard let imgD = UIImage(systemName: "chevron.down"),
              let imgU = UIImage(systemName: "chevron.up")
        else {
            fatalError("Bad image loading!")
        }
        expandImg = imgD
        collapseImg = imgU

        // covers the bottom of the container view when cell is "collapsed"
        let coverView = UIView()
        coverView.backgroundColor = .white

        [keyLabel, valLabel, btn, containerView, coverView].forEach { v in
            v.translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview(v)
        }

        // set as desired
        keyLabel.font = .systemFont(ofSize: 20.0, weight: .bold)
        valLabel.font = .italicSystemFont(ofSize: 18.0)

        // use the built-in layout margins
        let g = contentView.layoutMarginsGuide
        
        // .constant will be set by data
        containerHeight = containerView.heightAnchor.constraint(equalToConstant: 0.0)

        // constrain bottom of valLabel to bottom of margins
        //  priority will be updated when expanded/collapsed
        collapsedConstraint = valLabel.bottomAnchor.constraint(equalTo: g.bottomAnchor)
        collapsedConstraint.priority = .defaultHigh
        
        // constrain bottom of containerView to bottom of margins
        //  priority will be updated when expanded/collapsed
        expandedConstraint = containerView.bottomAnchor.constraint(equalTo: g.bottomAnchor)
        expandedConstraint.priority = .defaultLow
        
        NSLayoutConstraint.activate([

            // button at upper-right
            btn.topAnchor.constraint(equalTo: g.topAnchor),
            btn.trailingAnchor.constraint(equalTo: g.trailingAnchor),
            btn.heightAnchor.constraint(equalToConstant: 32.0),
            btn.widthAnchor.constraint(equalTo: btn.heightAnchor, multiplier: 1.5),

            // keyLabel at upper-left
            keyLabel.topAnchor.constraint(equalTo: g.topAnchor),
            keyLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            keyLabel.trailingAnchor.constraint(equalTo: btn.leadingAnchor, constant: -8.0),
            
            // valLabel aligned and below keyLabel
            valLabel.topAnchor.constraint(equalTo: keyLabel.bottomAnchor, constant: 4.0),
            valLabel.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            valLabel.trailingAnchor.constraint(equalTo: btn.leadingAnchor, constant: -8.0),
            
            // containerView below valLabel
            containerView.topAnchor.constraint(equalTo: valLabel.bottomAnchor, constant: 8.0),
            containerView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: g.trailingAnchor),

            // activate our "control" constraints
            collapsedConstraint,
            expandedConstraint,
            containerHeight,

            // cover view sits at the very bottom of the contentView
            //  to cover the top part of the containerView
            //  when cell is "collapsed"
            coverView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            coverView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
            coverView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            coverView.heightAnchor.constraint(equalToConstant: contentView.layoutMargins.bottom),
            
        ])
        
        // we don't want the labels to stretch or compress vertically
        keyLabel.setContentCompressionResistancePriority(.required, for: .vertical)
        valLabel.setContentCompressionResistancePriority(.required, for: .vertical)
        keyLabel.setContentHuggingPriority(.required, for: .vertical)
        valLabel.setContentHuggingPriority(.required, for: .vertical)

        // action for button
        btn.addTarget(self, action: #selector(btnTap(_:)), for: .touchUpInside)
        
        // Important!
        contentView.clipsToBounds = true

        // so we can see the containerView
        //  until we replace it with or add a collectionView as a subview
        containerView.backgroundColor = .systemYellow
        
    }
    
    // closure so we can tell the controller we want the cell
    //  to collapse or expand
    var expand: ((Bool)->())?
    
    private var expanded: Bool = false {
        didSet {
            // set collapsed/expanded constraint priorities
            collapsedConstraint.priority = expanded ? .defaultLow : .defaultHigh
            expandedConstraint.priority = expanded ? .defaultHigh : .defaultLow
            // update button image
            btn.setImage(expanded ? collapseImg : expandImg, for: [])
        }
    }
    
    func fillData(_ d: DemoStruct) -> Void {
        keyLabel.text = d.key
        valLabel.text = d.value
        containerHeight.constant = d.cvHeight
        expanded = d.expanded
    }
    
    @objc func btnTap(_ sender: Any?) -> Void {
        expanded.toggle()
        // tell the controller our expanded state changed
        expand?(expanded)
    }
    
}

controller class - 生成 20 行数据，具有不同的“集合视图”高度。

class DemoTableViewController: UITableViewController {
    
    var theData: [DemoStruct] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // create 20 rows of sample data
        theData = (1...20).map { DemoStruct(key: "Key \($0)", value: "Value \($0)", cvHeight: 40.0, expanded: false) }
        
        // vary the containerView heights
        //  this will end up being the collectionView heights
        let demoHeights: [CGFloat] = [
            40, 160, 80, 120,
        ]
        for i in 0..<theData.count {
            theData[i].cvHeight = demoHeights[i % demoHeights.count]
        }
        
        tableView.register(SampleTVCell.self, forCellReuseIdentifier: "stvc")
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return theData.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let c = tableView.dequeueReusableCell(withIdentifier: "stvc", for: indexPath) as! SampleTVCell
        
        let d = theData[indexPath.row]
        c.fillData(d)
        
        // set the closure
        c.expand = { isExpanded in
            // update data
            self.theData[indexPath.row].expanded = isExpanded
            // this tells the tableView to animate cell height changes
            tableView.performBatchUpdates(nil, completion: nil)
        }
        
        return c
    }
    
}