paint-brush
Navigation Bar Tutorial in iOS 18 - #30DaysOfSwiftby@vaibhavdwivedi
249 reads

Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift

by Vaibhav
Vaibhav HackerNoon profile picture

Vaibhav

@vaibhavdwivedi

Building Shipios.app to make it easier to launch iOS Apps!

October 5th, 2024
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In the third post of the #30DaysOfSwift series, I am going to teach you how to make a sticky navigation bar. Create a new SwiftView file called "HomeView" Replace the ContentView() with HomeView() in YourAppNameApp.swift (in this case, my project is called ShipiOS. Thus, file name is ShipiOSApp.Swift).
featured image - Navigation Bar Tutorial in iOS 18 - #30DaysOfSwift
1x
Read by Dr. One voice-avatar

Listen to this story

Vaibhav HackerNoon profile picture
Vaibhav

Vaibhav

@vaibhavdwivedi

Building Shipios.app to make it easier to launch iOS Apps!

Learn More
LEARN MORE ABOUT @VAIBHAVDWIVEDI'S
EXPERTISE AND PLACE ON THE INTERNET.
0-item

STORY’S CREDIBILITY

Code License

Code License

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Day 2: Wandering around the multiple paths 🛣️


In the third post of the #30DaysOfSwift series, I am going to teach you how to make a sticky navigation bar.


The output would look something like this:


Screenshot from an app

Screenshot from an app

Steps:

  • Create a new SwiftView file called "HomeView."


  • Replace the ContentView() with HomeView() in YourAppNameApp.swift (In this case, my project is called ShipiOS. Thus, file name is ShipiOSApp.swift).
var body: some Scene {
        WindowGroup {
            HomeView()
        }
    }
  • Lastly, add the following code in your HomeView() file:
    Image description

    Image description

Code:

struct HomeView: View {
    @State private var selectedTab = 0 // Track the selected tab
    let generator = UIImpactFeedbackGenerator(style: .light) // For Haptics

    @EnvironmentObject var userCommonData: CommonData

    var body: some View {
        TabView(selection: $selectedTab) {
            ContentView() // Replace with your view
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)

            SecondView() // Replace with your view
                .tabItem {
                    Label("Chats", systemImage: "tray")
                }
                .tag(1)

            ThirdView() // Replace with your view
                .tabItem {
                    Label("Profile", systemImage: "gearshape")
                }
                .tag(2)
        }
        .accentColor(Color("AppSecondaryColor"))
        .onChange(of: selectedTab) {
            generator.impactOccurred()
        }
    }

}


Does it work? Let me know :)


Happy coding!

L O A D I N G
. . . comments & more!

About Author

Vaibhav HackerNoon profile picture
Vaibhav@vaibhavdwivedi
Building Shipios.app to make it easier to launch iOS Apps!

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X
X REMOVE AD