如何使用 SnapKit 以编程方式对齐 Stackview 中的元素？

Question

我正在尝试在自定义可重用视图中实现特定设计。

（类似这样的东西：）

所以我传递了一个 URL 来检索图像，并传递了一个字符串以在下面添加。

首先，我希望整个视图是元素的宽度（如果文本很长，那么整个视图会更宽），我不知道该怎么做，视图似乎是整个屏幕宽度。

其次，我想让项目水平和垂直居中，我试过了。

这是我当前的代码：

func initLayout() {
        stackView.axis  = NSLayoutConstraint.Axis.vertical
        stackView.distribution  = UIStackView.Distribution.fillEqually
        stackView.alignment = UIStackView.Alignment.center
        stackView.spacing   = 10.0

        stackView.addArrangedSubview(imageView)
        stackView.addArrangedSubview(textContainer)
        stackView.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(stackView)
        self.snp.makeConstraints { (make) -> Void in
            make.height.equalTo(70)
        }
        self.stackView.snp.makeConstraints{ (make) -> Void in
            make.edges.equalTo(self)
        }
    }

结果如下：

如你所见（或不可见），视图居中在屏幕中间，这不是我想要的。视图应该是文本的宽度，所有内容都在这个特定宽度内居中，然后我将它添加到我的 VC 中并将它放置在前面。

Answer 1

如果我理解得很好，那是你的约束没有 Snapkit:

在 class 控制器声明下设置对象：

let myImageView: UIImageView = {
    let iv = UIImageView()
    iv.contentMode = .scaleToFill
    iv.clipsToBounds = true
    iv.backgroundColor = .red
    iv.translatesAutoresizingMaskIntoConstraints = false
    
    return iv
}()

let myLabel: UILabel = {
    let label = UILabel()
    label.text = "Débats"
    label.textColor = .white
    label.textAlignment = .center
    label.font = .systemFont(ofSize: 30, weight: .semibold) // set your font size here
    label.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}()

现在在 viewDidLoad 中设置参数和约束：

myImageView.image = UIImage(named: "profilo") // set here your image
    
    let myWidth = myLabel.intrinsicContentSize.width // This reveal only text width in label
    
    view.addSubview(myLabel)
    myLabel.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true
    myLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
    myLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 25).isActive = true
    myLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    view.addSubview(myImageView)
    myImageView.widthAnchor.constraint(equalToConstant: myWidth).isActive = true
    myImageView.heightAnchor.constraint(equalTo: myImageView.widthAnchor).isActive = true
    myImageView.bottomAnchor.constraint(equalTo: myLabel.topAnchor).isActive = true
    myImageView.centerXAnchor.constraint(equalTo: myLabel.centerXAnchor).isActive = true

这是结果：

兴趣代码：

class Aiutotipo: UIViewController {

let myImageView: UIImageView = {
    
    let iv = UIImageView()
    iv.contentMode = .scaleToFill
    iv.clipsToBounds = true
    iv.backgroundColor = .red
    iv.translatesAutoresizingMaskIntoConstraints = false
    
    return iv
}()

let myLabel: UILabel = {
    let label = UILabel()
    label.text = "Débats"
    label.textColor = .white
    label.textAlignment = .center
    label.font = .systemFont(ofSize: 30, weight: .semibold)
    label.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}()

override func viewDidLoad() {
    super.viewDidLoad()
    
    myImageView.image = UIImage(named: "profilo") // set here your image
    
    let myWidth = myLabel.intrinsicContentSize.width // This reveal only text width in label
    
    view.addSubview(myLabel)
    myLabel.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true
    myLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
    myLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 25).isActive = true
    myLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    view.addSubview(myImageView)
    myImageView.widthAnchor.constraint(equalToConstant: myWidth).isActive = true
    myImageView.heightAnchor.constraint(equalTo: myImageView.widthAnchor).isActive = true
    myImageView.bottomAnchor.constraint(equalTo: myLabel.topAnchor).isActive = true
    myImageView.centerXAnchor.constraint(equalTo: myLabel.centerXAnchor).isActive = true
 }
}

如何使用 SnapKit 以编程方式对齐 Stackview 中的元素？

How to programmatically align elements in a Stackview using SnapKit?

ios

swift

uistackview

snapkit