UIStackView shift content to left when inner views are hidden

问题

I've 3 buttons inside a horizontal stack view. I want to shift buttons to left if one or two buttons are hidden. It's basically left shift operation. I've tried few options with stack view in storyboard but not sure if I'm on right track.

How to do it in stack view or otherwise?

回答1:

Update the stackview trailing constraint while hide the button.

@IBOutlet weak var stackViewTrailing: NSLayoutConstraint!

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

     stackViewTrailing.constant += button.frame.width
}

回答2:

If you have a stack view with NO constraints set, the size of the stack view is that of its contents. Lets say the brackets [] were your stack view and X represents your buttons, if you give the stack view only a leading constraint, a vertical constraint of any kind and set the distribution to "Fill Equally" it will behave as follows:

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

remove/hide one button:

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

This sounds like the behaviour you are seeking.

Another note: If the buttons are not distributed equally by your stack view even though you have its distribution set to "Fill Equally", make sure to give your first button (or more) a width and height constraint.

回答3:

Very Simple. Follow the below steps.

1) First provide the proper Constrain for the StackView after the setup your all 3 images into it.

2) Then give a fixed width to the stack view.And create the StackView Constrain Width Outlet. Check the image.

@IBOutlet var discardWidth: NSLayoutConstraint!

3) Count the StackView width with the 2 images. In my case the width of stackView with 3 images is 100px and with 2 images it is 69px.

4) Coding as follow.

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

Simple Right. Its just show you proper image without the stretching image. Check below image.

回答4:

Take an IBOutlet Connection to your buttons. Now put some conditions on your buttons. And when these conditions are met, you can set the alignment of your button to left. Try this programmatically.

// 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) {}

来源：https://stackoverflow.com/questions/53775590/uistackview-shift-content-to-left-when-inner-views-are-hidden

标签

ios

swift

uistackview