How To Build UI Forms With SwiftUI

Introduction

In a brief introduction, I gave you an overview of SwiftUI and how to build a simple user interface. The SwiftUI framework provides developers with a new way to develop a clean UI, allowing you to make it the same UI with much less code.

In my previous article, you learned how to make table view list and Navigation,

Lists and Navigation In SwiftUI

Designing the Text Field and Label

We will begin implementing text fields and labels placing them just above each text field. For creating a label, we simply use a text component and write the code like below.

Text("NAME").font(.headline)

We set the above code label text "Name" and font style type "headline".

To create a text field with a placeholder, you can write the code like below.

TextField("Enter Restaurant NAME", text: $text)

To place the Label above the text field, you can use a VStack component to arrange both components. You can write it like below.

struct ContentView : View {
var body: some View {
VStack(alignment: .leading, spacing: 10.0) {
Text("NAME").font(.headline)
TextField("Enter Restaurant NAME", text: $text)
.padding(.all)
.clipShape(RoundedRectangle(cornerRadius: 5.0))
.background(Color(red: 239.0/255.0, green: 243.0/255, blue: 244.0/255.0, opacity:1.0))
}.padding(.horizontal,15)
}
}

OUTPUT

For reuse purpose, we will create a separate struct class, which accepts two parameters, label and placeholder -

struct TextFieldWithLabel: View {
var label: String
var placeholder : String
@State var text: String = ""
var body: some View {
VStack(alignment: .leading, spacing: 10.0) {
Text(label).font(.headline)
TextField(placeholder, text: $text)
.padding(.all)
.clipShape(RoundedRectangle(cornerRadius: 5.0))
.background(Color(red: 239.0/255.0, green: 243.0/255, blue: 244.0/255.0, opacity:1.0))
}.padding(.horizontal,15)
}
}

Now, you can create a text field by constructing a TextFieldWithLabel struct class with specified Text Label variable. The name is "label" and the text field placeholder variable is "placeholder" like below,

struct ContentView: View {
var body: some View {
TextFieldWithLabel(label:"NAME", placeholder:"Enter Restaurant NAME")
}
}

Creating Multiple TextFields using List

To present multiple text fields in a vertical arrangement, you can use "VStack" component to layout the text fields and label. We will make the form scrollable by embedding into a stack using the "List" that allows developers to easily make a table list. Now contentView looks like -

struct ContentView: View {
var body: some View {
List{
VStack(alignment:.leading, spacing: 10.0) {
TextFieldWithLabel(label:"NAME", placeholder:"Enter Restaurant NAME")
TextFieldWithLabel(label:"TYPE", placeholder:"Enter Restaurant TYPE")
TextFieldWithLabel(label:"ADDRESS", placeholder:"Enter Restaurant ADDRESS")
TextFieldWithLabel(label:"PHONE", placeholder:"Enter Restaurant PHONE")
TextFieldWithLabel(label:"DESCRIPTION", placeholder:"Enter Restaurant DESCRIPTION")
}.listRowInsets(EdgeInsets())
}
}
}

Above code listRowInsects, you can extend the text field closer to the edges of the display.

OUTPUT

Creating a rounded Button

The SwiftUI framework provides a component called "Button" to create a Button. We will create RoundedButton struct class for better organizing code.

struct RoundedButton: View {
var body: some View {
Button(action: {}) {
HStack{
Spacer()
Text("SAVE")
.font(.headline)
.foregroundColor(.white)
Spacer()
}
}
.padding(.vertical,10.0)
.clipShape(RoundedRectangle(cornerRadius: 4.0))
.background(Color.red)
.padding(.horizontal, 80)
}
}

Embedding the View into a NavigationView

The final step is to embed the entire form in a navigation view. SwiftUI provides a container view named NavigationView which creates a navigation interface.

struct ContentView: View {
var body: some View {
NavigationView {
List{
VStack(alignment:.leading, spacing: 10.0) {
TextFieldWithLabel(label:"NAME", placeholder:"Enter Restaurant NAME")
TextFieldWithLabel(label:"TYPE", placeholder:"Enter Restaurant TYPE")
TextFieldWithLabel(label:"ADDRESS", placeholder:"Enter Restaurant ADDRESS")
TextFieldWithLabel(label:"PHONE", placeholder:"Enter Restaurant PHONE")
TextFieldWithLabel(label:"DESCRIPTION", placeholder:"Enter Restaurant DESCRIPTION")
RoundedButton().padding(.top,20)
}.listRowInsets(EdgeInsets())
}
.navigationBarTitle("New Restaurant")
}
}
}

Final output

Summary

I hope you understood how to build a form in SwiftUI with the help of labels and text fields. Thanks, cheers!!