Swift UI Design

The UI i want to build

Hi Team,
I am trying to build UI as attached in the Snapshot.

The Problem is inner small rectangle (With LOGIN Text), am unable to place at top of outer rectangle.

The Problematic UI

Code:

import SwiftUI
struct LoginView: View {
@State private var email: String = “”
@State private var password: String = “”
var body: some View {
ZStack{
VStack(){
Spacer()
Text(“LOGO”).bold()
Spacer()
ZStack{

                Rectangle()
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .shadow(radius: 5)
                    .aspectRatio(CGSize(width: 235, height: 300), contentMode: .fit)
                Rectangle()
                    .foregroundColor(.black)
                    .cornerRadius(10)
                    .shadow(radius: 5)
                    .aspectRatio(CGSize(width: 235, height: 50), contentMode: .fit)

                Text("LOGIN").font(.headline).fontWeight(.heavy).foregroundColor(Color.white).multilineTextAlignment(.center)
                    .position(x: 185, y: 154)

                VStack{
                    TextField("Email", text: $email)
                    TextField("Password", text: $password)
                }
            }
            Text("Don't have an accout? SignUP")
            Spacer()
        }
    }
    .padding(30)
}

}

Please help.

Thanks

@Umesh

Welcome to the community.

This is a rather tricky UI to create.

There is an overall VStack has the LOGO, the central LOGIN rectangle group and then the “Don’t have an account” with a “Sign Up” button (HStack).

The central element is the tricky part consisting of a VStack with the LOGIN title at the top and the white rectangle below it with a shadow around it. The VStack is configured with a spacing of 0 so that the two rectangles touch each other. The reason for that will become clear later. The VStack also has horizontal padding (I set that to 35 which looked about right on an iPhone 11, 12 and 13).

The LOGIN title consists of a ZStack in which you have a Custom Rectangle and a Text View. The Custom Rectangle has the top leading and top trailing corners with a radius but the bottom leading and bottom trailing with no radius.

The white rectangle is a ZStack in which you have a Custom Rectangle and a VStack containing the email, password, Forgot Password button and the Login button. The Custom Rectangle has the top leading and top trailing corners with no radius and the bottom leading and bottom trailing corners with a radius. Besides setting the fill color of the Custom Rectangle to white and adding a shadow, the .frame height was set to 350 which looked about right.

So with the two rectangles touching each other, as a result of the VStack having a spacing of 0, you have an interesting effect with the white rectangle having a shadow.

Hope that gives you a few clues on how to create the UI.

1 Like

@Umesh,

Did you manage to create something close to the sample?