How to achieve this effect seen as seen in the Hotel Tonight app

Question

I am trying to figure out how a couple of pieces of this effect are done. The effect is the transition from a scroll view of images to what looks like a UIViewController with paging enabled.

I have included two screenshots. In Fig 1, there appears to be an embedded scroll view and when the user clicks on the red button, it opens up to the full screen view shown in Fig 2.

The second is a transition to a scroll view with paging enabled. The one question I have is the 'hide' button (shown as a red button). The effect is an animation down to Fig 1.

I'd imagine that this is done as a Nested Scroll View in Fig1 with an animation towards expanding out. How is this part done? Can there be animated an mask that is pulled back? Is my thinking correct or is there a different way to achieve this?

thx in advance

Answer 1

It's hard to tell what's going on from a couple of static pictures. I would guess that the app just uses UIView animation to slide away two groups of views from the top and bottom of the screen, while expanding the size of the scroll view with the picture in it to be nearly full-screen. Then the hide button would do the same thing in reverse. I've done something very similar to this in a couple of our company's apps.

In this case, I'd put the group of views above the picture in a container view, and the group of views below the picture into a separate container view.

I don't quite understand the sequence of views and where the page controller comes into play, so it's a bit hard to recommend a specific approach.