11

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?

backslash-f
  • 7,923
  • 7
  • 52
  • 80
CodierGott
  • 471
  • 1
  • 5
  • 10

2 Answers2

27

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

backslash-f
  • 7,923
  • 7
  • 52
  • 80
  • 1
    above solution worked for me could you pls tell me why you are using GeometryReader and then ZStack because i also tried below code ZStack { Image("bgImg") .resizable() .scaledToFill() .edgesIgnoringSafeArea(.all) } which worked for me so what differences in that – Dilip Tiwari Jul 21 '20 at 06:44
  • @Dilip At that time (Aug 25 '19), that was the only way I could get it to work. If it now works without `GeometryReader`, that's even better then. :) – backslash-f Jul 21 '20 at 07:09
  • thanks a lot i am using your answer only, thanks for reply – Dilip Tiwari Jul 21 '20 at 10:51
  • 2
    This makes the image to increase the ZStack and if I align something to the left it starts from out of the screen – Sir NIkolay Cesar The First Aug 01 '20 at 16:14
0

To get my VStack correct I had to do this: ZStack(alignment: .leading)

7RedBits.com
  • 454
  • 6
  • 6