Working with Tab View and Tab Bar Customizations
If you're trying to achieve, there will be roadblocks. I've had them; everybody has had them. But obstacles don't have to stop you. If you run into a wall, don't turn around and give up. Figure out how to climb it, go through it, or work around it.
- Michael Jordan
The tab bar is a row of persistently visible buttons, which open different features of the app, at the bottom of the screen. Once a less-prominent UI design in the mainstream, the tab bar design becomes popular again lately.
Before the debut of the large screen devices, there were only 3.5-inch and 4-inch iPhones. One drawback of tab bars is that you sacrifice a bit of screen estate. This was really an issue for small screen devices. As Apple rolled out the iPhone 6 and 6 Plus with larger screen sizes in late 2014, app developers started to replace the existing menus of their apps with tab bars. At the time, the Facebook app switched from a sidebar menu design to a tab bar. Other popular apps like Whatsapp, Twitter, Quora, Instagram, and Apple Music also started to adopt tab bars for navigation.
Tab bars allow users to access the core features of an app quickly, with just a single tap. Though it takes up a bit of screen estate, it is worth it.
While navigation controllers let users navigate hierarchical content by managing a stack of view controllers, tab bars manage multiple view controllers that don't necessarily have a relation to one another. Normally a tab bar controller contains at least two tabs and you're allowed to add up to five tabs depending on your needs.
I already introduced
TabView in the previous chapter. However, we configured it as a paged scrolling view. In this chapter, we will use it to create a standard tab interface as displayed in figure 21-1. We're going to create a tab bar with three items:
- Favorites - this is the restaurant list screen.
- Discover - this is a new screen to discover favorite restaurants recommended by your friends or other foodies around the globe. We will implement this tab in the iCloud chapter.
- About - this is the "About" the about screen of the app. Once again we'll keep this page blank until the next chapter.
On top of that, we will show to customize the tab bar in SwiftUI.
To access the full version of the book, please get the full copy here. You will also be able to access the full source code of the project.