使用堆栈视图将图像添加到 table 视图单元格问题

Adding images to table view cell problem using stack views

在我的原型单元格中,我有一个水平堆栈视图,我将它连接到我的 UITableViewCell,我在我的 UITableViewCell 中定义了一个更新函数,它将多个图像添加到堆栈视图中,我在 TableViewController cellForRowAt 中调用了该函数,但什么都没有发生了。

//inside UITableViewCell  
@IBOutlet weak var lineStack: UIStackView!

func update(_ imageName: String){
    let numberOfCopies = Int(deviceWidth/50)
    let startX = (Int(deviceWidth) - (numberOfCopies*50))/2
    xValue = xValue + startX
    let image = UIImage(named: imageName)

    for _ in 1...Int(numberOfCopies) {
        xValue = xValue + heightValue
        let imageView = UIImageView(image: image)
        imageView.frame = CGRect(x: xValue , y: 0, width: widthValue, height: heightValue)
        lineStack.addSubview(imageView)
    }
}

 //inside TableViewController

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Line", for: indexPath) as! LineTableViewCell
        let imageName = imagesName[indexPath.row]
        cell.update(imageName)
        return cell
 }

对于行:

lineStack.addSubview(imageView)

您需要使用 addArrangedSubview() 而不是 addSubview()。前者是向视图添加子视图的常规方式,而后者专门用于 UIStackView 并告诉视图正确插入它。

你的 post 表明你希望你的图像是 50 x 50 点...使用自动布局约束 .addArrangedSubview():

class TestCell: UITableViewCell {

    @IBOutlet var lineStack: UIStackView!

    func update(_ imageName: String) {
        let numberOfCopies = Int(deviceWidth/50)
        let image = UIImage(named: imageName)

        for _ in 1...Int(numberOfCopies) {
            let imageView = UIImageView(image: image)
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true
            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor).isActive = true
            lineStack.addArrangedSubview(imageView)
        }
    }
}

编辑 示例结果,堆栈视图水平居中:

堆栈视图设置为:

Axis: Horizontal
Alignment: Fill
Distribution: Fill
Spacing: 0

这是有约束的布局:

请注意,stack view 的 Width 约束为 10,但其 Priority 为 250 ... 这允许 stack view 水平拉伸,同时保持 IB 满足约束。