Chapter 26
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.

Figure 1. Apple's App Store app
Figure 1. Apple's App Store app

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.

Figure 2. The demo app
Figure 2. The demo app

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.

Figure 3. The starter project
Figure 3. The starter project

The starter projects comes with the following implementation:

  1. It already bundles the required images in the asset catalog.
  2. The ContentView.swift file is the default SwiftUI view generated by Xcode.
  3. The Article.swift file contains the Article struct, which represents an article in the app. For testing purpose, this file also creates the sampleArticles array 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.

Figure 4. The sample card views
Figure 4. The sample card views

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.

Figure 5. The components of a card view in excerpt mode
Figure 5. The components of a card view in excerpt mode

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.

Figure 6. The components of a card view in full content mode
Figure 6. The components of a card view in full content mode

To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.

results matching ""

    No results matching ""