隐藏内部视图时，UIStackView 将内容向左移动

Question

我在水平堆栈视图中有 3 个按钮。如果隐藏了一个或两个按钮，我想将按钮向左移动。它基本上是左移操作。我在情节提要中尝试了几个堆栈视图选项，但不确定我是否在正确的轨道上。

如何在堆栈视图或其他方式中执行此操作？

Answer 1

将 IBOutlet 连接到您的按钮。现在在您的按钮上设置一些条件。当满足这些条件时，您可以将按钮的对齐方式设置为左对齐。以编程方式尝试此操作。

// These are IBOUtlet Collections
@IBOutlet var buttons: [UIButton]!
@IBOutlet var hideButtons: [UIButton]!

override func viewDidLoad() {
  super.viewDidLoad()
  configureButtons()
}

private func configureButtons() {
  for (index, button) in buttons.enumerated() {
    button.tag = index
    button.addTarget(self, action: #selector(buttonPressed(_:)), for: .touchUpInside)
  }
  for (index, button) in hideButtons.enumerated() {
    button.tag = index
    button.addTarget(self, action: #selector(hidePressed(_:)), for: .touchUpInside)
    button.setTitle("Show", for: .selected)
  }
}

@objc private func hidePressed(_ sender: UIButton) {
  sender.isSelected = !sender.isSelected

  buttons[sender.tag].isHidden = sender.isSelected

  var totalHiddenCount = 0
  for button in buttons {
    if button.isHidden == true {
      totalHiddenCount += 1
    }
  }
  for button in buttons {
    if totalHiddenCount >= 2 {
      button.contentHorizontalAlignment = .left
    } else {
      button.contentHorizontalAlignment = .center
   }
  }
 }

@objc private func buttonPressed(_ sender: UIButton) {}

Answer 2

如果您有一个未设置约束的堆栈视图，堆栈视图的大小就是其内容的大小。假设方括号 [] 是你的堆栈视图，X 代表你的按钮，如果你只给堆栈视图一个前导约束，任何类型的垂直约束并将分布设置为 "Fill Equally" 它将表现如下：

---8px---[X X X X]

remove/hide 一键：

---8px---[X X X]

这听起来像您正在寻找的行为。

另一个注意事项：即使您将其分布设置为 "Fill Equally"，如果堆栈视图的按钮分布不均，请确保为您的第一个（或更多）按钮提供宽度和高度限制。

Answer 3

在隐藏按钮的同时更新 stackview 尾随约束。

@IBOutlet weak var stackViewTrailing: NSLayoutConstraint!

func hideButton(button: UIButton) -> Void {
     button.isHidden = true

     stackViewTrailing.constant += button.frame.width
}

Answer 4

很简单。按照以下步骤操作。

1) 首先为 StackView 提供正确的 Constrain，然后将所有 3 个图像设置到其中。

2) 然后给堆栈一个固定的宽度 view.And 创建 StackView Constrain Width Outlet。检查图像。

@IBOutlet var discardWidth: NSLayoutConstraint!

3) 用 2 images 计算 StackView width。在我的例子中 stackView with 3 images 的宽度是 100px 而 2 images 是 69px.

4) 编码如下

     if // **Your Condition** {
            img1.isHidden = true
            discardWidth.constant = 69
        } else {
            img1.isHidden = false
            discardWidth.constant = 100

简单吧。它只是向您显示没有拉伸图像的正确图像。检查下图。

隐藏内部视图时，UIStackView 将内容向左移动

UIStackView shift content to left when inner views are hidden

ios

swift

uistackview