stackView 在 Swift 5 中设置自定义 UIView 的约束

Question

我正在尝试做一个tweet之类的demo，我用StackView来控制“昵称”、“内容”、“图片”和“评论”的布局，但是图片的布局有一些问题，就像下面的照片:

我创建了一个自定义 UIView GalleyView 和 commentsView 来表示 images 和 comments。但是，图像布局在我的演示中不正确。但是，images没有正确显示，comments消失了。另外，Cell无法正确计算身高，不知道是怎么回事。这是我的代码：

class WechatMomentListCell: UITableViewCell{
    
 func setup() {
        contentView.addSubview(senderAvatar)
        contentView.addSubview(stackView)
        
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.addArrangedSubview(senderNick)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        stackView.setCustomSpacing(10, after: senderNick)
        stackView.addArrangedSubview(content)
        stackView.setCustomSpacing(10, after: content)
        stackView.addArrangedSubview(images)
        stackView.setCustomSpacing(10, after: images)
        stackView.addArrangedSubview(comments)
        
        senderAvatar.clipsToBounds = true;
        senderAvatar.layer.cornerRadius = 10;
        senderAvatar.snp.makeConstraints{ (make) in
            make.leading.top.equalTo(20)
            make.width.height.equalTo(46)
        }
        
        stackView.snp.makeConstraints{(make) in
            make.top.equalTo(20)
            make.leading.equalTo(senderAvatar.snp.trailing).offset(10)
            make.bottom.trailing.equalTo(-16)
        }
        
        senderNick.textColor = UIColor.init(red: 91, green: 106, blue: 175)
        senderNick.font = UIFont.boldSystemFont(ofSize: 20)

        content.lineBreakMode = NSLineBreakMode.byWordWrapping;
        content.numberOfLines = 0;

        //I didn't set constraints to images and comments

这是我的 GalleryViews class:

class GalleryView: UIView {
    var imageViews: [UIImageView] = []
    
    func config(tweet: Tweet?) {
        for i in tweet?.images ?? [] {
            let flagImage = UIImageView()
            flagImage.sd_setImage(with: URL(string: i.url))
            self.imageViews.append(flagImage)
        }
        setup()
    }
    
    func setup() {
        if imageViews.count != 0 {
            switch imageViews.count{
            case 1:
                addSubview(imageViews[0])
                imageViews[0].snp.makeConstraints{ (make) in
                    make.leading.top.equalToSuperview()
                    make.width.height.equalTo(180)
                }
            default:
                for index in 0...imageViews.count - 1 {
                    addSubview(imageViews[index])
                    imageViews[index].snp.makeConstraints{ (make) in
                        make.leading.equalTo(((index)%3)*109)
                        make.top.equalTo(((index)/3)*109)
                        make.width.height.equalTo(90)
                    }
                }
            }
        }
    }

Answer 1

由于您正在使用包含 UIView 列表的堆栈视图，因此在开始附加排列的子视图之前，您应该在每次使用它时重置堆栈视图。

stackView.arrangedSubviews.forEach({ [=10=].removeFromSuperview() })

stackView 在 Swift 5 中设置自定义 UIView 的约束

stackView set constraints of custom UIView in Swift 5

ios

swift

uiview

uikit

uistackview