Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SwiftUI fullscreen image background

I want to have a full screen image in the background. I have implemented this:

struct LoginView: View {
    var body: some View {
        VStack {
            Spacer();
            Text("Hallo");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Text("Hallo2");
            Spacer();
            }.background(Image("Background LaunchScreen")
                .resizable()
                .aspectRatio(UIImage(named: "Background LaunchScreen")!.size, contentMode: .fill)
                .clipped())
            .edgesIgnoringSafeArea(.all)
    }
}

When I remove the spacers, the image is no longer displayed in full screen mode.
Surely that can be solved differently?

And if I turn the iPhone in the simulator to the side, I have left and right white stripes.
How can I change this?

like image 619
CodierGott Avatar asked Aug 25 '19 20:08

CodierGott


People also ask

How do I make SwiftUI full screen?

It is often required that a view fill a space, whether it is width, height or both. Luckily for us SwiftUI makes this very easy to do. TLDR: To make a view fill the screen or parent view, you can set the maxHeight and maxWidth to . infinity when using the frame view modifier.

How do I change the background in SwiftUI?

SwiftUI doesn't have a dedicated modifier for displaying background colors or images, but instead lets us specify any kind of background view using its background() modifier. To be clear, you can use any view as your background – another text view if you wanted, for example.


1 Answers

Here's a possible solution using GeometryReader and ZStack:

import SwiftUI

struct LoginView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("LaunchImage")
                    .resizable()
                    .aspectRatio(geometry.size, contentMode: .fill)
                    .edgesIgnoringSafeArea(.all)
                VStack {
                    ForEach (1...10, id: \.self) { _ in
                        Text("Hallo")
                            .foregroundColor(Color.white)
                    }
                }
            }
        }
    }
}

#if DEBUG
struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}
#endif

Results

portrait landscape

like image 155
backslash-f Avatar answered Oct 04 '22 04:10

backslash-f