How to Animate Between Two Views Inside a StackView?

Question

I would like to animate between two different UIView's that occupy the same space on the screen. Sometimes the user would like to see an Image and other times statistics. By tapping a button I would like to animate between the two.

Right now I only have one of the views arranged inside the stackView in a XIB and I'm wondering how do i set this up without messing up autoLayout?

Do I need to get a reference to the stackView and one view for the other there? And if so does that mean I have to setup layout constraints programatically?

What's the best way to handle this?

Thank you.

By your description, I would research for solution with UICollectionView, rather than regular UIViews. — Vasilii Muravev, Jun 26 '17 at 20:38
I disagree. A `UIStackView` is far preferable in this case, mostly because you don't have to deal with constraints or layouts. — NRitH, Jun 26 '17 at 20:48

score 0 · Answer 1 · answered Jun 26 '17 at 20:51

Put both views in a UIStackView. Set outlets to the two subviews. (You don't necessarily need an outlet to the stack view itself.) When you set one of them to isHidden = true, the stack view takes care of "removing" it from the visible content without preserving the frame that it would occupy when non-hidden. In your animation, just animate the isHidden = [true|false] statement.

score 0 · Answer 2 · answered Apr 26 '18 at 15:35

XCode 9.1 and swift 4

I would do this way:

If i have two View inside one StackView: set outlets for the two View.
In any event like press button, just hidden the View one i want:

self.ViewTwo.isHidden = true

And animating like this:

UIView.animate(withDuration: 0.5) { self.ViewTwo.isHidden = true }

And when i just want back :

UIView.animate(withDuration: 0.5) { self.ViewTwo.isHidden = false }

The direction of the animation will be according to the settings configured in the stack View (Vertical or Horizontally)

How to Animate Between Two Views Inside a StackView?

2 Answers2