Tab Bars and Modal View Presentation

In this chapter, we will focus on tab bars and presenting views modally in SwiftUI.

We will begin by discussing how to implement tab bars using the standard UI elements, then we will examine recreating the equivalent of a tab bar that would require heavy customization and could not be obtained normally, such as a tab bar with the selection buttons on the top of the screen. Finally, we will examine the modal view presentation in depth.

In this chapter, we’re going to cover the following main topics:

• Implementing tab bars with TabView and tabItem
• Implementing a customized tab bar
• All about modal views, including sheets, alerts, and popovers

By the end of this chapter, you will know all about tab bars and the many ways to present modal views.

Technical requirements

You will find the code related to this chapter at https://github.com/PacktPublishing/An-iOS-Developer-s-Guide-to-SwiftUI, under the CH6 folder.

Creating a standard tab bar

Follow these steps to create a standard tab bar:

1. We can start a new iOS project by using the usual iOS App template.
2. Then, we can add a new view to the project and name it HomeView.
3. To let ContentView use this HomeView view, we can substitute this view as the content of the default ContentView.
4. Finally, we populate the HomeView.swift file with the following code.

   We start by creating five views, which will be individually switched as the content of TabView:

   import SwiftUI
   struct ViewA:
       View {
       var body: some View {
               Text("This is View 1")
                   .fontWeight(.bold)
                   .font(.title)
            ...

Creating custom tab bars

Sometimes, you must implement your take on a tab bar because what you want cannot be created with the standard one; for example, you want something that resembles a tab bar but has custom graphical requirements and is in a different position on the screen. In this section, you will also learn that going for a custom approach requires much more work than the “standard Apple way” of doing things, besides having other drawbacks.

For our customized tab bar, we want it to have round corners, to be drawn in a frame, with a shadow, and to show the title in a different bright color, say in red and in bold, when a tab is selected. We also want it to sit at the top of the user screen rather than at the bottom.

To begin, it is essential to establish the necessary information for presenting a tab, which includes an image representing the non-selected state, an image representing the selected state, and a title. For the sake of simplicity, we will limit...

The hitchhiker’s guide to modal navigation

In this section, we will examine, in detail, how to display modal views. A modal view is a view that appears on top of the currently displayed view and that prevents interaction with the underlying view. The modal view is used to capture user input or display additional information without navigating away from the current screen. Once a modal view appears, it needs to be dismissed before interaction is possible with the rest of the application.

Showing a modal sheet

Sheets are used to display a view on top of another one, and they can be dismissed by dragging them down or programmatically. You need a Boolean that controls whether the sheet is presented, and the sheet view can be attached to the main view using the .sheet(isPresented: ) modifier.

An example of a modal sheet is the following code:

import SwiftUI
struct SheetView: View {
    @Environment(\.dismiss) var dismiss
    var...

Summary

In this chapter, we looked at how we display tab bars in SwiftUI from the standard way of implementing tab bars called TabView. We have also explored modifying views to imitate a tab bar in situations where the standard system provided tab bar will not do, like when selection buttons have to be placed at the top of the screen.

We examined in depth how familiar modal views—sheets, alerts, and popovers—are shown in SwiftUI with focus on both iPhone and iPad, including using presentation detents, with attention on how to achieve this in different releases of iOS.

Moving forward, the next chapter will explore in depth the topic of navigation within SwiftUI.