Creating a TabView navigation layout

A popular pattern in many apps is a tabbed bar along the bottom of the screen. Each tab is typically laid out with an icon and some accommodating text that informs the user what content to expect behind the tab.

Before we get started, make sure you have setup your iOS project.

Create your views

To implement a basic tab bar layout that switches views, first you need to define some template views…

  1. Click File → New → New File…

  2. Select SwiftUI View

  3. Repeat for however many tabs you wish to have

Setup your tab bar

Next, in your master view, you will need to define your TabView which will hold all the information for each tab. Within the TabView, we need to define all our views and apply the .tabItem() modifier to them, shown below…


  TabView {
     ViewName().tabItem {
        //
     }
  }

Apple allows only Text and Image types within the tabItem modifier. If you add other types, then the tab will appear empty. We add those like so…

  
  TabView {
  
     // tab 1
     ViewName().tabItem {
        Image(systemName: "1.square")
        Text("Tab Label 1")
     }

     // tab 2
     ViewName().tabItem {
        Image(systemName: "2.square")
        Text("Tab Label 2")
     }

     // tab 3
     ViewName().tabItem {
        Image(systemName: "3.square")
        Text("Tab Label 3")
     }

     // tab 4
     ViewName().tabItem {
        Image(systemName: "4.square")
        Text("Tab Label 4")
     }

  }

Apply kindly supply us with their SF Symbols library, which contains 3100 symbols to use within our UI. Whilst it’s recommended you start with this, you can add your own assets in using the Assets section in Xcode and link them up in your code.

To use the system symbols, simply download the application from here, and once installed, right click on your chosen icon and select Copy Name. Once you have that, past it into the Image view, using the systemName property.

Demo

If you’ve followed along okay, you should end up with the following…

You can download the raw code here.