如何使用 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 是你的限制：

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

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
 }
}