Written By: @Ashley

Welcome to the Intro To SwiftUI workshop! We’re excited to help you on your journey to becoming an iOS developer! 🥳

Before we start make sure you have Xcode 16 or higher on your Mac (instructions on how to download Xcode are here).

Then, download the starter code from our GitHub Repository down below and open the AggieEats.xcodeproj file with Xcode.

</aside>

GitHub - Swift-Coding-Club-UCD/BuildingYourFirstiOSApp

**Getting Started With The Tab Bar Creating A View For Menu Options Creating The Weekly Menu View Creating The Home Page Adding QR Code Scanning Page Navigation Using Navigation Stacks Enabling Camera Access on iPhone/iPad**

Getting Started With The Tab Bar

Let’s start with creating the tab bar of the Aggie Eats app. The Tab Bar is how users navigate between different views of an app.

</aside>

In the TabView.swift file and inside the body, we will create a TabView that will make the tab bar. Inside the TabView, there will be 2 tabs, one tab to get to the Home Page and another tab for the weekly menu as shown below.

systemImage is the image/icon we will use for each tab. You can find icons to use by downloading the SF Symbols app, finding the name of the icon, and writing as a string inside of systemImage.

The names of the icons we’ll use for the home page and weekly menu views are provided in the code snippet.

</aside>

//TabView.swift
struct TabBarView: View {
    var body: some View {
        TabView {
            Tab("Today", systemImage: "house") {
                HomePage()
            }
            Tab("Weekly Menu", systemImage: "menucard") {
                WeeklyMenuView()
            }
        }
    }
}

Now, we want to see the tab bar when the Aggie Eats app is launched to be able to navigate to different views when we open the app. To do this, in AggieEatsApp.swift, under the WindowGroup, replace HomePage() with TabBarView().

This is how we establish our app view hierarchy in Swift.

</aside>

//AggieEatsApp.swift
@main
struct AggieEatsApp: App {
    var body: some Scene {
        WindowGroup {
            TabBarView()
        }
    }
}

So far, our app view hierarchy looks like this: our app opens up with the TabBarView with the HomePage and WeeklyMenuView being child views and users can navigate between the two.

</aside>

Table of Contents

Getting Started With The Tab Bar