ios - Swift - StackView 并使用以编程方式添加的 View 添加约束到堆栈 - 加载后调整单元格高度？

Question

我正在尝试制作一个自定义 tableView 单元格，该单元格具有来自数组图像的 stackView。
我使用了界面生成器并添加了一个水平stackView:
中心 X
中心 Y
最高 +12
底部 +12
我正在使用循环来添加 Arranged Subview，它工作正常。但是图像非常小，即使它们不应该是由于它们的 CGRect。但是他们正在被stackView调整。
这个想法是保持堆栈居中，同时还使用顶部/底部来调整单元格的高度。
我推断我面临的图像很小的问题是因为 stackView 被初始化为空。所以 stackViews 的高度非常小。并且因为 imageViews 被添加到其中，所以它们会被调整大小以适应。
如何让单元格/stackView 在显示后调整它们的高度？
注意:我在尝试以编程方式向 imageView 添加顶部和底部约束时也遇到了问题。

for pictogram in pictograms {
            let imageView = UIImageView()
            
            let size = self.bounds.width / CGFloat(pictograms.count + 1)
            print("size: ", size)
            
            imageView.frame = CGRect(x: 0, y: 0, width: size, height: size)
            imageView.contentMode = .scaleAspectFit
            
            imageView.image = pictogram.image
            pictogramStack.addArrangedSubview(imageView)
        }

Answer 1

您正在使用 UIStackView以错误的方式。堆栈 View 将为您安排 subview - 无需计算宽度和设置框架。
像这样布局你的单元原型(prototype):

请注意，底部约束具有 Priority: 999 .自动布局需要进行多次“通过”来布局堆栈 View (特别是在表格 View 单元格中)。使用 999 的优先级作为底部约束将避免约束冲突错误/警告消息。
像这样设置堆栈 View 属性:

与 Distribution: Fill Equally我们不需要做任何let size = self.bounds.width / CGFloat(pictograms.count + 1)种计算。
另外，为了使设计时更容易一些，给堆栈 View 一个 Placeholder内在高度:

那将有 没有在运行时效果，但允许您在设计时清楚地看到您的单元格元素。
现在，当你用 ImageView “填充”堆栈 View 时，没有 .frame =设置，您需要添加的唯一约束是高度 == 宽度:

NSLayoutConstraint.activate([
    // image view should have 1:1 ratio
    imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor),
])

这是一个完整的例子:

class HorizontalImagesStackCell: UITableViewCell {
    
    @IBOutlet var theStack: UIStackView!
    
    func addImages(_ pictograms: [String]) -> Void {
        
        // cells are reused, so remove any previously added image views
        theStack.arrangedSubviews.forEach {
            $0.removeFromSuperview()
        }
        
        pictograms.forEach { s in
            // make sure we can load the image
            if let img = UIImage(named: s) {
                // instantiate an image view
                let imageView = UIImageView()
                // give it a background color so we can see its frame
                imageView.backgroundColor = .green
                // scale aspect fit
                imageView.contentMode = .scaleAspectFit
                // set the image
                imageView.image = img
                NSLayoutConstraint.activate([
                    // image view should have 1:1 ratio
                    imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor),
                ])
                // add it to the stack
                theStack.addArrangedSubview(imageView)
            }
        }
        
    }
}

class ImagesInStackTableViewController: UITableViewController {
    
    // we'll display 5 rows of images
    //  going from 5 images to 4 images ... to 1 image
    let myData: [Int] = [5, 4, 3, 2, 1]
    
    let myImages: [String] = [
        "img1", "img2", "img3", "img4", "img5"
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return myData.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "HCell", for: indexPath) as! HorizontalImagesStackCell

        // get the first n number of images
        let a: [String] = Array(myImages.prefix(myData[indexPath.row]))
        
        cell.addImages(a)
        
        return cell
    }
}

使用这 5 张图片:

我们得到这个结果( ImageView 设置为 .scaleAspectFit 并具有绿色背景，因此我们可以看到帧):