Adding new screen

App Development
1

Hello, so I created a main menu screen with two buttons. I’m trying to figure out how to add a new screen and link it toward one of the buttons of the main menu screen. Any suggestions?

2

@haafg20

Welcome to the community.

Are you writing the code in SwiftUI or UIKit?

1 Like
3

I’m new to XCode, but I’m using SwiftUI.

4

There is a few ways to present a new screen.

  1. NavigationLink
  2. .sheet()
  3. .fullScreenCover()

Try this code in a test project to see how each works.

struct ContentView: View {
    @State private var isShowingSheet = false
    @State private var isShowingFullScreenCover = false

    var body: some View {
        NavigationView {
            VStack(spacing: 30) {
                Text("Screen navigation options")
                Spacer()

                //  Using a NavigationLink
                NavigationLink(destination: FirstScreenView()) {
                    Text("Show First Screen")
                }

                //  Using a .sheet modifier
                Button("Show Second Screen") {
                    isShowingSheet = true
                }

                //  Using a .fullScreenCover modifier
                Button("Show Third Screen") {
                    isShowingFullScreenCover = true
                }

                Spacer()
            }
            .sheet(isPresented: $isShowingSheet) {
                SecondScreenView()
            }
            .fullScreenCover(isPresented: $isShowingFullScreenCover) {
                ThirdScreenView(isShowingFullScreenCover: $isShowingFullScreenCover)
            }
        }
    }
}

struct FirstScreenView: View {
    var body: some View {
        ZStack {
            Color.red
                .ignoresSafeArea()
            VStack(spacing: 30) {
                Text("First Screen")
                Text("Tap the < Back button to dismiss")
            }
        }
    }
}


struct SecondScreenView: View {
    var body: some View {
        ZStack {
            Color.green
                .ignoresSafeArea()
            VStack(spacing: 30) {
                Text("Second Screen")
                Text("Swipe down to dismiss")
            }
        }
    }
}


struct ThirdScreenView: View {
    @Binding var isShowingFullScreenCover: Bool

    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea()
            VStack(spacing: 20) {
                Text("Third Screen")
                    .foregroundColor(.white)

                Button("Tap here to Dismiss") {
                    isShowingFullScreenCover = false
                }
                .foregroundColor(.white)
            }
        }
    }
}
2 Likes
5

Nice example Chris, thanks, very useful to see them all in one place like that.

6

This helped a lot. By chance am I able to set that new screen to a lock orientation such as landscape-right orientation?

7

It’s a bit tricky but this is one method you could implement for the ThirdScreen in the sample I provided where the View is .fullScreenCover.

When the Third View appears the .onAppear() modifier is triggered to rotate the View to LandscapeRight.

When the dismiss button is tapped the View is rotated back to Portrait.

struct ThirdScreenView: View {
    @Binding var isShowingFullScreenCover: Bool

    var body: some View {
        ZStack {
            Color.blue
                .ignoresSafeArea()
            VStack(spacing: 20) {
                Text("Third Screen")
                    .foregroundColor(.white)

                Button("Tap here to Dismiss") {
                    rotatePortrait()
                    isShowingFullScreenCover = false
                }
                .foregroundColor(.white)
            }
        }
        .onAppear {
            rotateLandscapeRight()
        }
    }

    func rotateLandscapeRight() -> Void {
        let value = UIInterfaceOrientation.landscapeRight.rawValue
        UIDevice.current.setValue(value, forKey: "orientation")
    }

    func rotatePortrait() -> Void {
        let value = UIInterfaceOrientation.portrait.rawValue
        UIDevice.current.setValue(value, forKey: "orientation")
    }
}
1 Like
8

Just curious, should this rotateLandscapeRight() function keep it locked? I tested it out, and it allows the user to go orient it back to portrait without clicking the dismiss button.

9

Ah, I see what you mean. Initially it appears to be locked but once you rotate the device a second time it rotates back to portrait.

In that case the code I provided is not the solution.