Preparing the UI

Creating our UI✍️

Let’s start building the interface of our login page! As you in the preview, all views of the UI are aligned vertically, so let’s delete the default Text view with its .padding modifier and insert a VStack instead. We embed all the views we need for our UI in this VStack.

struct ContentView: View {
    var body: some View {
        VStack {
            
        }
    }
}

Let’s start with the “Welcome!” Text at the top of our login page. For this, just insert a Text view with a “Welcome!” String. We also apply some modifiers to it including the .fontWeight modifier to customize the font-weight of our Text. Additionally, we add some bottom padding.

VStack {
    Text("Welcome!")
        .font(.largeTitle)
        .fontWeight(.semibold)
        .padding(.bottom, 20)
}

Next, outsource the Text view by CMD-clicking on it and selecting “Extract Subview”.

Below the WelcomeText view in the VStack, we insert an Image view. The Image should display the profile picture of the user. To do this, enter the name of the image file which we imported into the Asset.xcassets folder earlier.

VStack {
    WelcomeText()
    Image("ProfilePicture")
}

Again, we resize the Image and round off its corners by using the common modifiers we are already familiar with. We also add some bottom padding.

Image("ProfilePicture")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 150, height: 150)
    .clipped()
    .cornerRadius(150)
    .padding(.bottom, 75)

We outsource this view as well and call it UserImage

VStack {
    WelcomeText()
    UserImage()
}

This is how your preview should look now:

Leave a Reply

Your email address will not be published. Required fields are marked *