Advice on how to construct a UI element

[pixelblur]

Hi,

I’m constructing an app, but I’m having a bit of trouble figuring out the best way to construct this relatively simple UI element:

At first I was creating the views programmatically and adding them as a subview - but was running into some Auto Layout troubles. Then I decided to simply create a couple of views on the Storyboard, then just animated them up and down like this:

This works - but seems kinda kludgy - and there’s one bug. If you close the app then come back to it (and if the second option is selected (the views are moved up) the last time you were in it), then the Auto Layout vertical space kicks in and pushes everything down while the second option’s alpha is 1.

I’m sure there’s a more elegant way to do this. Here are some of the ways I’ve thought of…

• create Xibs of the two views so I can reuse them someone else if I have to.
• use a collectionview and just scroll to the indexPath.

Any thoughts on the best way to approach something like this?

Thanks!

[rcasey]

Would it work to enclose your two views (A and B) in a separate UIView? That view should just be tall enough to show one of your views with the other being off-screen. Set that view’s clipToBounds property to true so A and B don’t “bleed” into the rest of the display when you animate them up or down.

[pixelblur]

Thanks for the reply - that was my first approach - it works great except for one bug: if you leave the app on screen B, when you return it will attempt to satisfy the Auto Layout settings for the top spacing of the top item, which pushes everything down - so the first item will be shown (like A), but the opacity of the first item is 0, so it’s invisible.

(turquoise represents the UIView the other two views are embedded in)

I suppose I can figure out a way to use viewDidAppear to do some checks to help stop the top vertical spacing from happening, but it seems a bit kludgy.