Hello and welcome to brand new tutorial on how to create a simple Login Screen Using Swift UI.
Swift UI is a new buzz and helps in creating a responsive UI, so UI in apps is automatically adjusts itself with different IOS devices. In turn it makes it way easier for IOS developer to create UI.
Downside of using swift UI for dev is you need xCode 11.3+ for developing apps with swift UI. and obviously apps will not run on IOS device having OS version < 13.
Lets get started then, by creating a brand new ios
Step 1
Step 2 : Choose single view app below
Step 3 : Add required details and Please ensure to choose SwiftUI in User interface drop down,
Step 4 : Save the project (doing next
Step 5 : So this will be the screen you are presented with . so you will see code on left and a canvas showing a visual.
so if you look the code , you will see there is struct called ContentView inherited from View which represent the screen.
Then a Text Widget is added to body (body being another view inside Content View). The best part of SwiftUI is its ability to see your changes on the fly ie code -> Canvas, Design View -> Canvas.
Let’s play with it and change the Text string with “Welcome to Relsell Global”. And you will see in a moment Canvas got update. and now it will be showing new string.
Step 6 : Right now our screen is very basic and the code is created by Xcode itself. There is only a single widget added to body. Now let’s add more widgets. if you see your Xcode screen top-right portion you will see a plus icon. press it to get below screen for adding widgets.
Step7 : Let’s add a button to the canvas . Just drag the button and drop it on canvas. below your text. While doing that you will see a blue horizontal line comes up . As you are doing this Swift UI will add a container widget called VStack , yes you got it right vertical stack , to wrap your Text widget and button widget.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Color.blue
VStack {
Text("Welcome to Relsell Global").foregroundColor(Color.white)
Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
Text("Login")
}.foregroundColor(Color.white)
}
}
};
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Lets change the name of button to Login and add some color to the background and button .
Wait Let build and run our code , on simulator
Lets improve above screen and beautify ui a bit
import SwiftUI
struct ContentView: View {
@State private var name: String = "Enter your name"
@State private var password: String = "password"
var body: some View {
ZStack {
Color.blue
VStack {
Text("Welcome To Relsell Global")
TextField("Enter your name", text: $name)
.foregroundColor(Color.black)
.padding()
.multilineTextAlignment(.leading)
.textFieldStyle(RoundedBorderTextFieldStyle())
TextField("Enter password", text: $password)
.foregroundColor(Color.black)
.padding()
.multilineTextAlignment(.leading)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
Text("Login")
.padding()
}
.background(Color.black)
.foregroundColor(Color.white)
.cornerRadius(10)
}.padding(.horizontal, 15)
}
};
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}Above code changes will give below output when you run it on simulator.
We have modified our code and added padding to our text fields and added rounded border style. Then we added foreground and background color to it .
Similarly we modified our Button. and added rounded corners. then we added foreground and background
Lets add icons to Textfields , and make password text field entry as secure. For making password textfield as secure , modify password field type to become as SecureField
To show relevant icon in each text field i will introduce to a new container HStack. Hstack arranges its child items in horizontal fashion. See the below updated code.
//
// ContentView.swift
// LoginScreenDemo
//
// Created by ANIL KUKRETI on 20/01/20.
// Copyright © 2020 Relsell Global. All rights reserved.
//
import SwiftUI
struct ContentView: View {
@State private var name: String = ""
@State private var password: String = ""
let verticalPaddingForForm = 40.0
var body: some View {
ZStack {
Color.blue
VStack(spacing: CGFloat(verticalPaddingForForm)) {
Text("Welcome To Relsell Global")
HStack {
Image(systemName: "person")
.foregroundColor(.secondary)
TextField("Enter your name", text: $name)
.foregroundColor(Color.black)
}
.padding()
.background(Color.white)
.cornerRadius(10)
HStack {
Image(systemName: "person")
.foregroundColor(.secondary)
SecureField("Enter password", text: $password)
.foregroundColor(Color.black)
}
.padding()
.background(Color.white)
.cornerRadius(10)
Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
Text("Login")
.padding()
}
.background(Color.black)
.foregroundColor(Color.white)
.cornerRadius(10)
}.padding(.horizontal, CGFloat(verticalPaddingForForm))
}
};
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
above code will give you
But please add a good icon for password. (homework)
Improve the above screen further using gradients
//
// ContentView.swift
// LoginScreenDemo
//
// Created by ANIL KUKRETI on 20/01/20.
// Copyright © 2020 Relsell Global. All rights reserved.
//
import SwiftUI
struct ContentView: View {
@State private var name: String = ""
@State private var password: String = ""
let verticalPaddingForForm = 40.0
var body: some View {
ZStack {
RadialGradient(gradient: Gradient(colors: [.blue, .red]), center: .center, startRadius: 100, endRadius: 470)
VStack(spacing: CGFloat(verticalPaddingForForm)) {
Text("Welcome To Relsell Global")
.font(.title)
.foregroundColor(Color.white)
HStack {
Image(systemName: "person")
.foregroundColor(.secondary)
TextField("Enter your name", text: $name)
.foregroundColor(Color.black)
}
.padding()
.background(Color.white)
.cornerRadius(10)
HStack {
Image("icons8-key-50")
.resizable()
.frame(width: 16.0, height: 16.0) .foregroundColor(.secondary)
SecureField("Enter password", text: $password)
.foregroundColor(Color.black)
}
.padding()
.background(Color.white)
.cornerRadius(10)
Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/) {
Text("Login")
.padding()
}
.background(Color.black)
.foregroundColor(Color.white)
.cornerRadius(10)
}.padding(.horizontal, CGFloat(verticalPaddingForForm))
}
};
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The final out put will be
This brings us to an end of this tutorial. Thanks for reading it. Ask questions in comments if something is missing.
Last but not the least here is the code in github repository.
Study it and create it world is waiting for you.
Have a nice day.
