Hiding a UIStackView with nested UISTackviews

Question

Preface: I took a peek at this post and it didn't solve my problem. Here's a link to a repo that shows the error I'm encountering.

I have a UIViewController with a vertical UIStackView containing nested horizontal UIStackViews.

There are two UIStackViews that are toggled. If UIStackViewNumber1 is displayed, UIStackViewNumber2 is hidden & vice versa. I originally set the view to display both, but it's too crowded.

UIStackView
    stackViewThatDoesntMove
    stackViewNumber1
    stackViewNumber2
    stackViewThatDoesntMove

Everything works fine with no AutoLayout errors if I don't hide anything. Each of the UIStackViews has nested stackViews containing buttons, labels, sliders, etc. I found the view was too crowded, so I thought I'd set hide one of stackViews and animate the change, as follows:

stackViewNumber2.isHidden = true

UIView.animate(withDuration: 0.33,
               options: [.curveEaseOut],
               animations: {
                self.stackViewNumber1.layoutIfNeeded()
                self.stackViewNumber2.layoutIfNeeded()
                self.view.layoutIfNeeded()
                    },
               completion: nil)
}

While I got the desired result in Simulator and on a physical device, the moment I hide one of the UIStackViews, my console fills up with AutoLayout errors.

I took a look at this post and my problem seemed pretty straightforward. I went with the approach with the least "bookkeeping" and wrapped stackViewNumber2 in a UIView. I end up with the same set of errors I originally had without wrapping stackViewNumber1 in a UIView.

I also read Apple's documentation on UIStackView and tried playing around with the arrangedSubviews() to set constraints isActive = false, as follows:

for subview in stackViewNumber2.arrangedSubviews {
    for constraint in subview.constraints {
        constraint.isActive = false
    }
}

stackViewNumber2.updateConstraints()
// then run animation block to update view

Is there a more efficient way to hide nested UIStackViews without adding an IBOutlet for constraint, making sure it's not weak, and doing bookkeeping on whether isActive is true/false?

I think my problem has to do with nested stackViews, but I'm unable to figure out how to address it. Thank you for reading and I welcome suggestions on how to hide a UIStackView containing nested UIStackViews.

Answer 1

Instead of hiding I think it would be better to remove the stackView itself.

myStackView.removeArrangedSubview(playButton)
playButton.removeFromSuperview()

Hope it helps.

Answer 2

I started out wanting to animate hiding one view and unhiding another, but at Md. Ibrahim Hassan's suggestion, I tried removing the stackViewNumber1 from the superview and replacing it with stackViewNumber2. The end result is much cleaner with minimal bookkeeping, no dragging a bazillion @IBOutlets onto the viewController for updating constraints, etc.

The views of parentStackView are stored in the stack's arrangedSubviews() array in the order they're displayed in Main.storyboard.

In this example, the arrangedSubviews array looks like this:

[topStackView, stackViewNumber1, stackViewNumber2, stopButton]

I only need to know about parentStackView, stackViewNumber1, and stackViewNumber2, so I dragged 3 outlets to the storyboard, as follows:

// StackViews the viewController needs to know about...
@IBOutlet weak var parentStackView: UIStackView!
// note weak is removed from the following 2 stackViews
@IBOutlet var stackViewNumber1: UIStackView!
@IBOutlet var stackViewNumber2: UIStackView!

From there, if I want to remove stackViewNumber2, the following code removes it:

parentStackView.removeArrangedSubview(stackViewNumber2)
// parentStackView.arrangedSubviews() = [topStackView, stackViewNumber1, stopButton]
stackViewNumber2.removeFromSuperview()
parentStackView.insertArrangedSubview(stackViewNumber1, at: 1)
// parentStackView.arrangedSubviews() = [topStackView, stackViewNumber1, stopButton]

Now, let's say I want to take out stackViewNumber1 and replace it with stackViewNumber2:

parentStackView.removeArrangedSubview(stackViewNumber1)
// parentStackView.arrangedSubviews() = [topStackView, stopButton]
stackViewNumber2.removeFromSuperview()
parentStackView.insertArrangedSubview(stackViewNumber2, at: 1) 
// parentStackView.arrangedSubviews() = [topStackView, stackViewNumber2, stopButton]

Recall stackViewNumber1 and stackViewNumber2 are not weak. The reason is I want to keep them around so I can swap them in and out. I didn't see any adverse impact on memory usage as a result of changing the 2 UIStackView outlets to weak.

End result: The slew of AutoLayout errors I encountered with my initial approach is gone without a ton of bookkeeping.

Update:

With a little more tinkering, I got animation to work, too. Here's the code:

    UIView.animate(withDuration: 0.25,
                   delay: 0,
                   usingSpringWithDamping: 2.0,
                   initialSpringVelocity: 10.0,
                   options: [.curveEaseOut],
                   animations: {
                    self.view.layoutIfNeeded()
    },
                   completion: nil)