Four Steps in Designing a Simple Login Screen with SwiftUI
First journey in getting started with SwiftUI
As a Mobile Developer. Usually, I always develop applications using React Native. React Native has always been the first choice, whether for personal projects or office work.
However, for me, a developer is always required to continuously learn and develop other abilities. Shortly, I’m interested in starting to explore SwiftUI because of its exclusive. Besides that, I couldn’t do it before because I was using the Windows ecosystem.
The article below will be my first stage in discovering SwiftUI.
So, let’s get started
Step 1— Creating an Initial Project
At this stage, we will develop a simple page that displays the Logo and Validation Form for the Login process.
In the next step, we will get to understand components such as Image, Text, TextField, and Button.
Initiating a project can be accomplished using Xcode. Then, proceed to File > New > Project
Select Appon the Application Menu in the first step, then click Next.
Next, fill in “Product Name” with the project’s name, then fill in the form below according to the data you have. Then, proceed by clicking Next.
The project has been successfully created, and the initial code will appear as shown below on the ContentView.swift
Step 2— Adding Custom Color and Image Background
Before writing code, we can first organize data assets such as images, icons, color settings, and fonts that will be used.
Unlike React Native. In SwiftUI, we can place these assets in the provided file: Assets.xcassets, as shown below.
Step 3— Creating Logo and Form Component
We will write the two main components for our Login Screen later in the following steps.
Logo Component
The following components will be responsible for expressing information about the project logo that we use.
We will use the image and text components in the following elements, as shown in the image below.
FormBox Component
The following components will be responsible for displaying the layout for filling in the email and password data. The email and password will later validate whether a user has privileges to access the application.
We only initialize the state for the email and password at this phase. The following article will explain the validation process, which discusses the login process to the main application screen.
Step 4— Combining All Components
After successfully completing the two main components in the previous step, the last step is to combine the two components in the struct ContentView.
In addition, we can add an Image Background that will be placed behind the two components using the benefit of ZStack
Results so far :
The following is the final result of the project we developed.
Final Thoughts
For now, we have successfully designed Login Screen with SwiftUI. However, the explanation above only covers the display. Dealing with the validation will be explained in the following article.
I hope you have found this helpful. Thank you for reading.
