Search code examples
iosswiftuiswiftui-navigationlink

Switch between views in SwiftUI


Basically, I am trying to go from a loading page with only a logo and a progress view bar to a completely new screen called HomeView. Whenever the progress bar is done loading, I want to go straight to HomeView and I will never go back to the loading page again. Is there a way to switch between screens like this?

I saw many people on youtube use navigation links, but I don't have a button or anything to trigger it. Also, I saw that when they go to the new page, they can still click on the blue back button to go back to the loading page, which is what I don't want to happen.

I leave the code below in case y'all need a reference.

I am new to ios programming so thank y'all for helping.

This is the loading page

import SwiftUI

struct ContentView: View {
    
    @State var downloadAmount: Float = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ZStack {
            Color (red: 12/255, green: 18/255, blue: 25/255).edgesIgnoringSafeArea(.all)
            VStack(spacing: 30.0) {
                Image("logo")
                ProgressView(value: downloadAmount, total: 50).accentColor(Color(red: 255/255, green: 232/255, blue: 147/255))            }.padding(.horizontal, 50)
            .onReceive(timer) { _ in
                if downloadAmount < 50 {
                    downloadAmount += 2
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            
    }
}

And I want to go straight to HomeView after the progress bar runs out.

import SwiftUI

struct HomeView: View {
    
    @State var progressValue: Float = 0.2
    
    var body: some View {
        Text("Hello World")
    }
}

struct HomeView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
            
    }
}



Solution

  • You can present a different view basing on the downloadAmount property. I'd also recommend using withAnimation when updating the progress bar:

    struct ContentView: View {
        @State var downloadAmount: Float = 0.0
        let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
    
        var body: some View {
            ZStack {
                Color(red: 12 / 255, green: 18 / 255, blue: 25 / 255).edgesIgnoringSafeArea(.all)
                if downloadAmount >= 50 { // display conditionally
                    HomeView()
                } else {
                    logoView
                }
            }
            .onReceive(timer) { _ in
                if downloadAmount < 50 {
                    withAnimation { // add animation
                        downloadAmount += 2
                    }
                }
            }
        }
    
        var logoView: some View { // extract as a computed variable for clarity
            VStack(spacing: 30.0) {
                Image("logo")
                ProgressView(value: downloadAmount, total: 50).accentColor(Color(red: 255 / 255, green: 232 / 255, blue: 147 / 255))
            }
            .padding(.horizontal, 50)
        }
    }
    

    I'd recommend extracting the logo view to another struct / computed property. Also, it might be good to move the timer logic to an @ObservableObject.