Chapter 12
Playing with Modal Views, Floating Buttons and Alerts

Earlier, we built a navigation interface that lets users navigate from the content view to the detail view. The view transition is nicely animated and completely taken care by iOS. When a user triggers the transition, the detail view slides from right to left fluidly. Navigation UI is just one of the commonly-used UI patterns. In this chapter, I'll introduce to you another design technique to present content modally.

For iPhone users, you should be very familiar with modal views. One common use of modal views is for presenting a form for input. Say, for example, the Calendar app presents a modal view for users to create a new event. The built-in Reminders and Contact apps also use modal views to ask for user input.

Figure 1. Sample modal views in Calendar, Reminders, and Contact apps
Figure 1. Sample modal views in Calendar, Reminders, and Contact apps

From the user experience point of view, this modal view is usually triggered by tapping a button. Again, the transition animation of the modal view is handled by iOS. When presenting a full-screen modal view, it slides up fluidly from the bottom of the screen.

If you're a long-time iOS users, you may find the look & feel of the modal views displayed in figure 1 is not exactly the same as the usual ones. Prior to iOS 13, the presentation of modal views covers the entire screen, while in iOS 13, modal views are displayed in card-like format by default. The modal view doesn't cover the whole screen but partially covers the underlying content view. You can still see the top edge of the content/parent view. On top of the visual change, the modal view can now be dismissed by swiping down from anywhere on the screen. You do not need to write a line of code to enable this gesture. It's completely built-in and generated by iOS. Of course, if you want to dismiss a modal view via a button, you can still do that.

Okay, so what are we going to work on in this chapter?

I will show you how to present the same detail view that we implemented in the previous chapter using a modal view. While modal views are commonly used for presenting a form, it doesn't mean you can't use them for presenting other information. Other than modal views, you will also learn how to create a floating button in the detail view. While the modal views can be dismissed through the swipe gesture, I want to provide a Close button for users to dismiss the detail view. Furthermore, we will also look into Alerts which is another kind of modal views.

Figure 2. Presenting the detail screen using modal views
Figure 2. Presenting the detail screen using modal views

We got a lot to discuss in this chapter. Let's get started.

To access the full content and the complete source code, please get your copy at

results matching ""

    No results matching ""