问题描述
我已经查看了其他几个 Stack Overflow 问题，但我一直无法找到一个能回答我所遇到的特定问题的问题。很多答案都说要使表视图部分可扩展，但我希望该行可扩展，并且能够在扩展时向该行添加集合视图。而且，最好是在没有任何外部库的情况下完成。
我有一个 UITableView 部分，其中包含可以点击展开或折叠的行。折叠时，单元格在左侧的垂直 UIStackView 中显示两行文本，在右侧显示图像和向下箭头。下图显示了折叠视图，我可以使用 AutoLayout 约束使其工作。
展开时，应该在单元格内添加一个 UICollectionView 并且行应该动画展开以显示集合视图。下图大致显示了它应该是什么样子。底部的灰色区域是collection view，是一个动态高度的水平collection view。
但我不确定如何将集合视图添加到 UITableViewCell 以及如何为其设置动画。我曾考虑在代码中创建集合视图，向左右添加约束以将其固定到边缘行（因此它将是全宽）。然后我要在集合视图的顶部添加一个约束，将它固定到表格视图单元格的底部，然后在一个动画块中，我要更改约束，使集合视图的底部位于表格视图单元格的底部和集合视图的顶部被约束在图像视图的底部并将压缩阻力优先级设置为 1000 以确保集合视图不被压缩，但我最终得到了不可满足的约束，我的限制最终被删除。我最终放弃了这个想法，因为我觉得它太复杂了，应该有更直接的方法来做到这一点。
我考虑过的另一种方法是在同一个 XIB 文件中有两个单独的视图 - 一个用于正常状态，一个用于展开状态。但是我不确定如何为状态之间的行中的所有更改设置动画。
有没有人知道如何在展开时将集合视图（或任何视图，我猜）添加到表格视图单元格的底部以及如何为其设置动画？做这样的事情的最佳实践是什么？感谢您的帮助。
解决方法
我建议...
- 向您的单元格添加一个子视图作为集合视图“容器”
- 设置它的
.clipsToBounds = true - 用
.constant = 0给它一个高度限制 - 使用
.constant = 0为 collectionView 设置高度约束 - 当您知道所需的 collectionViewCell 高度后，设置 collectionView 的约束
.constant以便加载单元格 - 动画“容器”视图的高度约束以展开/折叠
从“容器”视图本身开始...一旦您正确展开/折叠它，然后添加到集合视图中。
编辑这是一个非常基本的动画展开/折叠表格视图单元格示例。
data struct - 键和值字符串、“高度”属性（大概会在您知道行的集合视图的高度时设置）和“扩展”标志。
struct DemoStruct {
var key: String = ""
var value: String = ""
var cvHeight: CGFloat = 0
var expanded: Bool = false
}
单元格类 - 两个标签，展开/折叠按钮，标签下方的“容器”视图：
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,// 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)
}
}
控制器类 - 生成 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
}
}