Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make SwiftUI view fullscreen?

Tags:

ios

swift

swiftui

As the title already says I'm trying to make a view fullscreen (make it extend over the SafeArea), but SwiftUI seems to always align views to the safeArea.

After researching this for a while I found .edgesIgnoringSafeArea(.all) which seems like a pretty straightforward way to do it. The problem is that it doesn't work. The view still isn't full screen. Here is some example code:

struct ContentView : View {
    var body: some View {
        Text("Test")
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)
            .background(Color.red)
    }
}
like image 510
timfraedrich Avatar asked Jun 24 '19 09:06

timfraedrich


People also ask

How do I view full screen in SwiftUI?

How to present a full screen modal view using fullScreenCover() SwiftUI's fullScreenCover() modifier gives us a presentation style for times when you want to cover as much of the screen as possible, and in code it works almost identically to regular sheets.

How do I change the frame size in SwiftUI?

By default SwiftUI's views take up only as much space as they need, but if you want that to change you can use a frame() modifier to tell SwiftUI what kind of size range you want to have. Note: if you want a view to go under the safe area, make sure you add the ignoresSafeArea() modifier.

How do I make my VStack full screen?

To make the VStack the width of the actual screen you can use UIScreen. main. bounds.


3 Answers

Just swap the ..background(Color.red) and .edgesIgnoringSafeArea(.all). And it will work perfectly.

struct ContentView : View {

    var body: some View {
        Text("Test")
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .background(Color.red)
            .edgesIgnoringSafeArea(.all)

    }
}
like image 161
Md Shafiul Islam Avatar answered Oct 13 '22 22:10

Md Shafiul Islam


According to Apple documentation from iOS 14 you can use fullScreenCover(item:onDismiss:content:)

And here is sample code:

struct ContentView: View {
    @State private var isFullScreen = false
    var body: some View {
        ZStack{
        Color.yellow.edgesIgnoringSafeArea(.all)
        Text("Hello, FullScreen!")
            .padding()
            .background(Color.blue)
            .foregroundColor(.green)
            .cornerRadius(8)
            .fullScreenCover(isPresented: $isFullScreen) {
                FullScreen(isFullScreen: $isFullScreen)
            }
            .onTapGesture {
                isFullScreen.toggle()
            }
    }
    }
}

struct FullScreen: View {
    @Binding var isFullScreen: Bool
    
    var body: some View {
        ZStack {
            Color.red.edgesIgnoringSafeArea(.all)
            Text("This is full screen!!")
                .onTapGesture {
                    self.isFullScreen.toggle()
                }
            
        }
    }
}
like image 6
Islom Alimov Avatar answered Oct 13 '22 23:10

Islom Alimov


The Augmented Reality App with SwiftUI also has a problem in entering full screen. (Xcode 12.3, SwiftUI 5.3)

struct ContentView : View {
    var body: some View {
        return ARViewContainer().edgesIgnoringSafeArea(.all)
    }
}

The code above is from the AR template. However, it doesn't work.

The solution is tricky: you have to set "LaunchScreen.storyboard" as "Launch Screen File" in "[yourTarget] -> General -> App Icons and Launch Images". If there is no "LaunchScreen.storyboard" in the project, it can still work by entering "LaunchScreen" in that field.

I found a similar discussion on Apple forum that explains the potential reason of failure:

If that isn't set properly, then it sounds like your app is launching into a compatibility mode which is letterboxing your app.

like image 4
Gaoping Avatar answered Oct 13 '22 23:10

Gaoping