如何修复不中心的堆栈视图？

Question

在这里，我有一个带有三个子视图的水平堆栈视图，但是，它看起来有些不利，如下所示。

我试图：

1. 将堆栈视图的CenterXanchor限制为等于Supperiew的Centriew的CenterXanchor
2. 设置了堆栈视图的对齐方式，以中心

如何正确地将我的堆栈视图正确对齐到Supperiew的中心？

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        view.addSubview(macroStackView)
        macroStackView.translatesAutoresizingMaskIntoConstraints = false
        constrainView()
    }
    
    lazy var carbView: UIView = {
        var view = UIView()
        
        var iv = UIImageView(image: Image.planViewBg)
        iv.frame = CGRect(x: 0, y: 0, width: 105, height: 118)
        iv.contentMode = .scaleAspectFit
        
        var label1 = UILabel()
        label1.text = "31%"
        label1.textAlignment = .center
        
        var label2 = UILabel()
        label2.text = "30g"
        label2.textAlignment = .center
        
        var label3 = UILabel()
        label3.text = "Carbs"
        label3.textAlignment = .center
        
        var labelStack = UIStackView(arrangedSubviews: [label1, label2, label3])
        labelStack.axis = .vertical
        labelStack.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(iv)
        iv.addSubview(labelStack)
        
        NSLayoutConstraint.activate([
            labelStack.centerXAnchor.constraint(equalTo: iv.centerXAnchor),
            labelStack.centerYAnchor.constraint(equalTo: iv.centerYAnchor),
        ])
        
        return view
    }()
    
    lazy var proteinView: UIView = {
        var view = UIView()
        
        var iv = UIImageView(image: Image.planViewBg)
        iv.frame = CGRect(x: 0, y: 0, width: 105, height: 118)
        iv.contentMode = .scaleAspectFit
        
        var label1 = UILabel()
        label1.text = "23%"
        label1.textAlignment = .center
        
        var label2 = UILabel()
        label2.text = "23g"
        label2.textAlignment = .center
        
        var label3 = UILabel()
        label3.text = "Protein"
        label3.textAlignment = .center
        
        var labelStack = UIStackView(arrangedSubviews: [label1, label2, label3])
        labelStack.axis = .vertical
        labelStack.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(iv)
        iv.addSubview(labelStack)
        
        NSLayoutConstraint.activate([
            labelStack.centerXAnchor.constraint(equalTo: iv.centerXAnchor),
            labelStack.centerYAnchor.constraint(equalTo: iv.centerYAnchor),
        ])
        
        return view
    }()
    
    lazy var fatView: UIView = {
        var view = UIView()
        
        var iv = UIImageView(image: Image.planViewBg)
        iv.frame = CGRect(x: 0, y: 0, width: 105, height: 118)
        iv.contentMode = .scaleAspectFit
        
        var label1 = UILabel()
        label1.text = "46%"
        label1.textAlignment = .center
        
        var label2 = UILabel()
        label2.text = "20g"
        label2.textAlignment = .center
        
        var label3 = UILabel()
        label3.text = "Fat"
        label3.textAlignment = .center
        
        var labelStack = UIStackView(arrangedSubviews: [label1, label2, label3])
        labelStack.axis = .vertical
        labelStack.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(iv)
        iv.addSubview(labelStack)
        
        NSLayoutConstraint.activate([
            labelStack.centerXAnchor.constraint(equalTo: iv.centerXAnchor),
            labelStack.centerYAnchor.constraint(equalTo: iv.centerYAnchor),
        ])
        
        return view
    }()
    
    lazy var macroStackView: UIStackView = {
        var stack = UIStackView(arrangedSubviews: [carbView, proteinView, fatView])
        stack.axis = .horizontal
        stack.distribution = .fillEqually
        stack.alignment = .center
        
        return stack
    }()
    
    func constrainView() {
        NSLayoutConstraint.activate([
            macroStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            macroStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 30),
            macroStackView.widthAnchor.constraint(equalTo: view.widthAnchor,
                                                  multiplier: 0.9)
        ])
    }
}

Answer 1

iv s没有其translatesAutoresizingMaskIntoconstraints设置为false。这使其位置固定在View s中的（0，0）。 视图 s被堆栈视图正确拉伸，这就是为什么（0、0、105、118）帧在右侧留出很多空白的原因。

堆栈视图的比对描述了如何分布到轴上的垂直。在这种情况下，轴是水平的，因此对齐是关于沿堆栈视图高度对齐的内容，而不是您可能假定的宽度。似乎您想要.fill在这里 - “框”应填充堆栈视图的高度。

无论如何，一个简单的解决方案是通过添加约束来正确定位iv s在View s中。

首先设置

iv.translatesAutoresizingMaskIntoConstraints = false

您应该在要添加约束时 。然后添加以下约束：

iv.widthAnchor.constraint(equalToConstant: 105),
iv.heightAnchor.constraint(equalToConstant: 118),
iv.centerXAnchor.constraint(equalTo: view.centerXAnchor),
iv.centerYAnchor.constraint(equalTo: view.centerYAnchor),

我也看不到任何确定macrostackView的高度。您应该将高度约束添加到macrostackView。

macroStackView.heightAnchor.constraint(equalToConstant: 118)

另外，您可以从view中取消安装iv，并且只有直接返回IV。

lazy var carbView: UIView = {
    var iv = UIImageView(image: Image.planViewBg)
    iv.translatesAutoresizingMaskIntoConstraints = false
    iv.contentMode = .scaleAspectFit
    
    var label1 = ...
    var label2 = ...
    var label3 = ...
    
    var labelStack = UIStackView(arrangedSubviews: [label1, label2, label3])
    ...
    iv.addSubview(labelStack)
    
    ...
    
    return iv
}()

在这种情况下，您需要设置堆栈视图的间距以实现所需的间距。