Creating an App Store like Animated View Transition
I believe you should have used the built-in App Store app before. In the Today section, it presents users with various articles and app recommendations. What interests me and many of you is the animated view transition. As you can see in figure 1, the articles are listed in a card like format. When you tap it, the card pops out to reveal the full content. To dismiss the article view and return to the list view, you can simply drag down the article to minimize it. If you don't understand what I mean, the best way is to open the App Store app on your iPhone to try it out.
In this chapter, we will build a similar list view and implement the animated transition using SwiftUI. In particular, you will learn the following techniques:
- How to use GeometryReader to detect screen sizes
- How to create a variable-sized card view
- How to implement an App Store like animated view transition
- How to implement a drag-to-dismiss view animation
Let's get started.
Introducing the Demo App
As usual, we will build a demo app together. The app looks very similar to the App Store app but without the tab bar. It only has a list view showing all the articles in card format. When a user taps any of the articles, the card expands to full screen and display the article details. To return to the list view, the user can either tap the close button or drag down the article view to collapse it.
We will build the app from scratch. But to save you time from typing some of the code, I have prepared a starter project [only available in the full version of the book] for you. After downloading the project, unzip it and open
SwiftUIAppStore.xcodeproj to take a look.
The starter projects comes with the following implementation:
- It already bundles the required images in the asset catalog.
ContentView.swiftfile is the default SwiftUI view generated by Xcode.
Article.swiftfile contains the
Articlestruct, which represents an article in the app. For testing purpose, this file also creates the
sampleArticlesarray which includes some test data. You may modify its content if you want to change the article data.
Understanding the Card View
You've learned how to create a card-like UI before. This card view is very similar to that implemented in chapter 5, but it will be more flexible to support scrollable content. In other words, it has two modes: excerpt and full content. In the excerpt mode, it only displays the image, category, headline and sub-headline of the article. As its name suggests, the full content will display the article details as shown before in figure 2.
If you look a bit closer into the card views shown in figure 4, you should find that the size of card views varies according to the height of the image. However, the height of the card will not exceed 500 points.
Let's also take a look at how the card view looks like in full content mode. As you can see in the figure below, the card view expands to full screen that displays the content. Other than that, the image is a little bit bigger and the sub-headline is hidden. Further, the close button appears on screen for users to dismiss the view. Please also take note that this is a scrollable view.
To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.