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,

1. 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!!