UIStackView 对齐问题

Posted 2023-03-15

【中文标题】UIStackView 对齐问题

【英文标题】：UIStackView alignment issue

【发布时间】：2019-12-18 09:25:24

【问题描述】：

我想达到这个要求

如果垂直堆栈有两个标签而不是文本应该与图像居中对齐

如果不是顶部对齐到图像

如何在不编写任何代码的情况下实现这一目标

【参考方案1】：

您需要控制外部（即包含图像和标签的堆栈视图的最终堆栈视图）堆栈视图的alignment。

由于您需要控制哪些标签需要添加到标签的堆栈视图中，因此我假设您将以编程方式执行此操作。所以基本上你需要：

finalStackView.alignment = labelsStackView.arrangedSubviews.count > 2 ? .top : .center

---

这是一个产生以下输出的完整示例：

class ViewController: UIViewController 

    let finalStackView = UIStackView()

    override func viewDidLoad() 
        super.viewDidLoad()
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        imageView.widthAnchor.constraint(equalToConstant: 200).isActive = true
        imageView.image = #imageLiteral(resourceName: "taylor-swift")

        let label1 = UILabel()
        let label2 = UILabel()
        let label3 = UILabel()
        let label4 = UILabel()

        label1.translatesAutoresizingMaskIntoConstraints = false
        label2.translatesAutoresizingMaskIntoConstraints = false
        label3.translatesAutoresizingMaskIntoConstraints = false
        label4.translatesAutoresizingMaskIntoConstraints = false

        label1.text = "Hello"
        label2.text = "72 mins"
        label3.text = "Hello 3"
        label4.text = "Hello 4"

        let labelsStackView = UIStackView(arrangedSubviews: [label1, label2, label3, label4])
        labelsStackView.translatesAutoresizingMaskIntoConstraints = false
        labelsStackView.axis = .vertical
        labelsStackView.distribution = .fill
        labelsStackView.alignment = .leading

        finalStackView.addArrangedSubview(imageView)
        finalStackView.addArrangedSubview(labelsStackView)
        finalStackView.axis = .horizontal
        finalStackView.distribution = .fill
        finalStackView.alignment = labelsStackView.arrangedSubviews.count > 2 ? .top : .center

        view.addSubview(finalStackView)
        finalStackView.translatesAutoresizingMaskIntoConstraints = false
        finalStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        finalStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        finalStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    


    

使用上面的确切代码，输出为：

将 2 个标签添加到 labelsStackView，输出为：

【参考方案2】：

将labels vertical stackview 保存在Horizontal stackView 中。

如果您有超过 2 个标签，请将 Horizontal stackView 对齐更改为 top 否则保留为 center。

你的布局结构应该是这样的

> main stack view (Horizontal)
 > Image
 > stack view (Horizontal)
   >labels stack view (Vertical)
    > Labels