Reproducing Popular iOS Controls - Part 23: | Ray Wenderlich Videos

🎓 Courses & Articles
1

In this video you'll learn about custom transitions, particularly as they pertain to the App Store app.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5298-reproducing-popular-ios-controls/lessons/23
2

mmm, when you presented the view debugger, was the view debugger of your version of the appstore cards? i mean, the whole .full and .card enum values was something of your project or do you have a way to infer that from the appstore app?

3

That was specific to how I built/recreated the project and has no relation what so ever to the actual App Store.

1 Like
4

Great tutorial Lea. I’ve always wondered how the app store transition worked.

I noticed in the Apple app, when you drag down to dismiss the DetailViewController, the close button in the upper right gradually fades out. Do you know how they implemented this? Did they manually add a close button image on top of the snapshotView?

Also, is there a simple way to take a snapshot of any tableView cell?

5

Hey!

That’s a great question. First, I’m not claiming that Apple does actually take the same approach as I did in the tutorial, so they might not be taking the snapshot at all and instead doing something a little more convoluted. One approach would be to have both the view snapshot and the close button together in a container view and then manipulate the container view itself rather than just the snapshot. In that scenario you could easily access the close button and change it’s alpha value as the view shrinks. You’d also have to make sure that the height and width of the close button is becoming smaller. You can do this by either directly manipulating its size, or you can re-do the animation by animating layout constraints instead of using CGAffineTransform and make sure that the height and width of the button are relative to the size of the container view.

Hope that helps!

6

Thanks Lea. That helps. I think Apple is taking the snapshot. Just a thought. Perhaps the close button is just an image contained in the image assets folder that’s part of a transparent rectangular image which has the same size as the screen and is placed above the snapshot image as soon as the snapshot image is added. It is then scaled using the same code that scales the snapshot image while also modifying its alpha using a scale factor.

7

Yep, that’s also possible :slight_smile:! There are many ways to achieve the same goal.