SwiftUI spacer layout issue

Question

I'm still trying to get my head around swiftUI by creating a log in form. I am trying to position the 'forgotPasswordImage' at the bottom of the white rounded rectangle and giving it the same width (and proportional height).

As you can see from the screen shot the 'forgotPassword' image does not sit at the bottom as I would expect. Interestingly it is the addition of the below methods to the image that cause it to move up.

Image("forgotPasswordBottom").resizable().relativeWidth(1).scaledToFit()

How can I position the image at the bottom of the rounded rectangle while applying a matching width and a height that maintains the correct aspect ratio.

thanks!

import SwiftUI

struct LogIn : View {
    var body: some View {

        ZStack{

            Image("LoginBackground")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)

            RoundedRectangle(cornerRadius: 30).foregroundColor(.white).relativeSize(width: 0.8, height: 0.7)

            VStack{
                Spacer()
                Image("forgotPasswordBottom").resizable().relativeWidth(1).scaledToFit()
            }.relativeSize(width: 0.8, height: 0.7)

        }
    }
}

In macOS Catalina beta 4 release notes, they are announcing that SwiftUI relativeWidth, relativeSize and relativeHeight are being deprecated. I doubt they'll keep them around for iOS. Xcode beta 4 is not available yet, but if no new modifiers are added, your way out is probably using GeometryReader: swiftui-lab.com/geometryreader-to-the-rescue We are probably a few hours away from finding out. — kontiki

multitudes multitudes · Accepted Answer · 2019-10-28T15:29:38

Since relativeWidth is deprecated and not available, if you want a responsive design you could use UIScreen.main.bounds.width, assigning this value to a variable you can use it in code to get the login frame of the right size proportional to the screen :

var loginViewWidth = UIScreen.main.bounds.width / 1.3

I would nest the login view in a separate second ZStack. Also I would use the (alignment: .bottom) modifier this ZStack to position the "forgotPasswordBottom" button to the bottom of the view automatically, and add the modifier 'frame' to the whole ZStack like this:

import SwiftUI

struct ContentView: View {

var loginViewWidth = UIScreen.main.bounds.width / 1.3

    var body: some View {
        ZStack{
            Image("LoginBackground")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)

            ZStack(alignment: .bottom) {

                RoundedRectangle(cornerRadius: 30).foregroundColor(.white)

                Image("forgotPasswordBottom")
                    .resizable()
                    .aspectRatio(contentMode: .fit)

            }.frame(width: loginViewWidth, height: loginViewWidth * 1.7)
        }
    }
}

SwiftUI spacer layout issue

1 Answers