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

Question

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

如何在堆栈视图中执行此操作？

Answer 1

如果您的堆栈视图未设置任何约束，则堆栈视图的大小为其内容的大小。可以说方括号[]是您的堆栈视图，X表示您的按钮，如果您仅向堆栈视图提供前导约束，任何垂直约束并将分布设置为“均等填充”，它将表现如下：

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

删除/隐藏一个按钮：

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

这听起来像是您要寻求的行为。

另一注：如果即使将按钮的分布设置为“均等填充”，即使堆栈视图中的按钮分布也不均匀，请确保为第一个按钮（或更多按钮）设置宽度和高度限制。

Answer 2

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

@IBOutlet weak var stackViewTrailing: NSLayoutConstraint!

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

     stackViewTrailing.constant += button.frame.width
}

Answer 3

将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 4

非常简单。请执行以下步骤。

1）在将所有3张图像都设置为Constrain之后，首先为StackView提供正确的StackView Constrain Width。

2）然后为堆栈视图提供固定宽度。并创建@IBOutlet var discardWidth: NSLayoutConstraint! 插座。检查图像。

StackView width

3）用2 images计算stackView with 3 images。在我的情况下，100px的宽度为2 images，69px的宽度为 if // **Your Condition** { img1.isHidden = true discardWidth.constant = 69 } else { img1.isHidden = false discardWidth.constant = 100 。

4）编码如下。

SomeViewController.swift 
SomeView.swift
SomeView.xib

简单右。它只是向您显示适当的图像而没有拉伸图像。检查下图。