UIStackView内不同宽度的水平居中视图

Question

我想设置一个UIViewStack，以便它将两个视图居中，即使它们具有不同的宽度。这是一个例子：

是否可以使用UIStackView实现此类配置？我似乎无法弄明白！

任何帮助都将不胜感激。

Answer 1

您应该使用嵌套的StackView。首先在Horizontal StackView中嵌入View1和View2。按比例填充对齐属性中心和分布。然后将Horizontal StackView嵌入Vertical Stackview。在这里，我附上了我的演示屏幕截图：

Answer 2

不，你不能。来自苹果的Doc

  

堆栈视图使用“自动布局”来定位和调整其排列视图的大小。堆栈视图将第一个和最后一个排列的视图与其沿着堆栈轴的边缘对齐。的 In a horizontal stack, this means the first arranged view’s leading edge is pinned to the stack’s leading edge, and the last arranged view’s trailing edge is pinned to the stack’s trailing edge.

您可以改为使用约束。

Answer 3

我可以在添加视图后使UIStackView自动增长宽度

1. 创建UIViewController并将UIStackView放在那里
2. 约束 StackView.leading优先级设置为250，以避免在xib中出现警告问题

3. 代码

   class StackSampleViewController：UIViewController {

   @IBOutlet weak var stackView: UIStackView!
   
   //Keep center auto grow with subviews
   @IBAction func touchUpAdd(_ sender: Any) {
       let view = UIView()
       view.translatesAutoresizingMaskIntoConstraints = false
       view.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
   
       if (stackView.subviews.count % 2) == 0 {
           view.widthAnchor.constraint(equalToConstant: 100).isActive = true
           view.backgroundColor = .black
       } else {
           view.widthAnchor.constraint(equalToConstant: 50).isActive = true
           view.backgroundColor = .red
       }
   
       stackView.addArrangedSubview(view)
   }
   

   }

4. 结果

Answer 4

是的，您可以先创建主垂直堆栈视图并设置配准中心和分布填充。然后在主堆栈中创建第二个水平堆栈视图，并设置对齐方式和分色填充。添加您要添加​​的最后一个元素。

第一个stackview：

第二个堆栈视图：