Question 131565 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – SwiftUI TabView with PageTabViewStyle in Landscape on device with safeArea adding odd leading edge inset

I have a TabView with PageTabViewStyle and when my device is in landscape orientation, there is an odd inset on the leading edge. This is not there on devices without a safeArea and it is not there on any edge in portrait.

struct ContentView: View {

    var body: some View {
        TabView {
            Color.red
                .edgesIgnoringSafeArea(.all)
        }
        .tabViewStyle(PageTabViewStyle())
        .edgesIgnoringSafeArea(.all)
    }
}

enter image description here

Tags:

2

Answers


  1. 0

    That would be the TabView doing that. That is actually the "prior" view, which would be an empty view for your set up. You can see if you run this code in landscape:

    var body: some View {
    TabView {
        Color.red
            .edgesIgnoringSafeArea(.all)
        Color.green
            .edgesIgnoringSafeArea(.all)
        Color.blue
            .edgesIgnoringSafeArea(.all)
    }
    .tabViewStyle(PageTabViewStyle())
    .edgesIgnoringSafeArea(.all)
}

    Then swipe to the next view. You will see that slice of the screen has turned red. Swipe again and it turns blue.

    The fix: set a .frame on the TabView that is the device size, but all of it in a ScrollView and put an .edgesIgnoringSafeArea(.all) on that:

    var body: some View {
    ScrollView {
        TabView {
            Color.red
            Color.green
            Color.blue
        }
        .frame(
            width: UIScreen.main.bounds.width ,
            height: UIScreen.main.bounds.height
        )
        .tabViewStyle(PageTabViewStyle())
    }
    .edgesIgnoringSafeArea(.all)
}

    And yes, the TabView can scroll vertically, but it will spring back.

    Login or Signup to reply.
  2. 0

    If you want to have only the background in fullscreen try it like this:

    var body: some View {
    ZStack {
        // Background ignoring safe area
        LinearGradient(colors: [Color(hue: 0.106, saturation: 0.234, brightness: 0.922, opacity: 1.0), Color.white], startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
        // TabView
        TabView() {
            Onboarding1()
            Onboarding2()
            Onboarding3()
        }
        .tabViewStyle(PageTabViewStyle())
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search