如何在水平StackView中居中按钮？

Question

我有一个带有两个按钮的水平堆栈视图。现在我想，如果隐藏了一个按钮，则另一个按钮应该位于中间。

喜欢

[x   x]
[  x  ] 

Answer 1

通过情节提要或以编程方式将UIStackView的分发属性设置为均等填充：

stackView.distribution = .fillEqually

隐藏一个按钮后，另一个按钮将居中。

Answer 2

如何使用一些隐藏的UIViews？

• 在您的课程中声明stackView：

  var myFirstStack: UIStackView!
  var bool = true
  

bool是一个布尔值，用于在您要隐藏或显示按钮时模拟条件。

• 在viewDidLoad中初始化stackView：

  myStack = UIStackView(arrangedSubviews: createButtons("1", "2"))
  let v1 = UIView()
  v1.isHidden = true
  let v2 = UIView()
  v2.isHidden = true
  myStack.insertArrangedSubview(v1, at: 1)
  myStack.addArrangedSubview(v2)
  myStack.translatesAutoresizingMaskIntoConstraints = false
  myStack.axis = .horizontal
  myStack.spacing = 20
  myStack.distribution = .fillEqually
  
  view.addSubview(myStack)
  

它使用此功能：

func createButtons(_ named: String...) -> [UIButton] {
    var i = true
    return named.map { name in
        let btn = UIButton()
        btn.translatesAutoresizingMaskIntoConstraints = false
        btn.setTitle(name, for: .normal)
        btn.backgroundColor = i ? .yellow : .red
        i.toggle()
        btn.setTitleColor(.black, for: .normal)
        return btn
    }
}

• 添加自动布局约束：

  myFirstStack.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
  myFirstStack.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -20).isActive = true
  myFirstStack.heightAnchor.constraint(equalToConstant: 100).isActive = true
  myFirstStack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
  

这是到目前为止的样子：

• 按下第三个按钮时，UIView将被隐藏或显示：

  @IBAction func hide(_ sender: Any) {
      myFirstStack.arrangedSubviews[0].isHidden = bool  //This is the button to hide
      myFirstStack.spacing = bool ? -100 : 20           //Adjust the spacing to your liking 
      myFirstStack.arrangedSubviews[1].isHidden = !bool //Hide or show the first UIView
      myFirstStack.arrangedSubviews[3].isHidden = !bool //Hide or show the second UIView
      bool.toggle()
  }
  

结果如下：