CODEWITHSUNDEEP
iosswiftuistackview
Dan
Dan

Reputation: 475

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?

Upvotes: 0

Views: 2932

Answers (4)

Brian D.
Brian D.

Reputation: 36

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
}

Upvotes: 2

ZeroOne
ZeroOne

Reputation: 684

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

enter image description here

Upvotes: 0

Krunal Nagvadia
Krunal Nagvadia

Reputation: 1162

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!

enter image description here

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.

enter image description here

Upvotes: 1

Justin Ganzer
Justin Ganzer

Reputation: 692

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.

Upvotes: 1

Related Questions