SwiftUI Form Tutorial — How to create settings screen using Form Part-1

In this tutorial, we are going to learn how to use Forms in SwiftUI. With Forms, we will also explore it’s limitation, usage and how we can use it with Section and Group to achieve desired UI.

Forms are basically scrolling list of static controls like text and images and user interactive controls like text fields, toggle switches, buttons, and more.

You can create a basic form just by wrapping the default text view inside Form like this:

var body: some View {
        Form {
            Text("Hello, world!")
        }
    }

Output is like “Settings” App UI

You can add as many things inside a form as you want, although if you intend to add more than 10, You have to add in Group to avoid Errors.

Note: We can only add 10 children views in parent. It applies everywhere in SwiftUI. It’s a SwiftUI limitation.

To overcome the limitation we can use 2 options.

1. Group (It don’t actually change the way your user interface looks)
2. Section (splitting items into chunks)

Enough with theory. You will learn more when you implement it practically.

Here is the UI which we are going to implement. It is similar to settings screen with little bit profile content.

So in this first part we are going to implement the UI only. In next Part we will add picker to select diff options on click of diff cells.

For the first section, we will be using Group. In That we will use it HStack and VStack to set the UI as per requirement.

HStack: A view that arranges its subviews in a horizontal line.

VStack: A view that arranges its subviews in a vertical line.

And add rows in sections as per required design. we can achieve it them by wrapping them in HStack [It will contain the image/text/toggle/picker as per our requirement]

here is the complete content-view look like

struct ContentView: View {
    
    @State var isDarkModeEnabled: Bool = true
    @State var downloadViaWifiEnabled: Bool = false
    
    var body: some View {
        NavigationView {
            Form {
                Group {
                    HStack{
                        Spacer()
                        VStack {
                            Image(uiImage: UIImage(named: "UserProfile")!)
                                .resizable()
                                .frame(width:100, height: 100, alignment: .center)
                            Text("Wolf Knight")
                                .font(.title)
                            Text("WolfKnight@kingdom.tv")
                                .font(.subheadline)
                                .foregroundColor(.gray)
                            Spacer()
                            Button(action: {
                                print("Edit Profile tapped")
                            }) {
                                Text("Edit Profile")
                                    .frame(minWidth: 0, maxWidth: .infinity)
                                    .font(.system(size: 18))
                                    .padding()
                                    .foregroundColor(.white)
                                    .overlay(
                                        RoundedRectangle(cornerRadius: 25)
                                            .stroke(Color.white, lineWidth: 2)
                                    )
                            }
                            .background(Color.blue)
                            .cornerRadius(25)
                        }
                        Spacer()
                    }
                }
                
                Section(header: Text("CONTENT"), content: {
                    HStack{
                        Image(uiImage: UIImage(named: "Favorite")!)
                        Text("Favorites")
                    }

                    HStack{
                        Image(uiImage: UIImage(named: "Download")!)
                        Text("Downloads")
                    }

                })

                Section(header: Text("PREFRENCES"), content: {
                    HStack{
                        Image(uiImage: UIImage(named: "Language")!)
                        Text("Language")
                    }
                    HStack{
                        Image(uiImage: UIImage(named: "DarkMode")!)
                        Toggle(isOn: $isDarkModeEnabled) {
                            Text("Dark Mode")
                        }
                    }
                    HStack{
                        Image(uiImage: UIImage(named: "DownloadViaWifi")!)
                        Toggle(isOn: $downloadViaWifiEnabled) {
                            Text("Only Download via Wi-Fi")
                        }
                    }
                    HStack{
                        Image(uiImage: UIImage(named: "PlayInBackground")!)
                        Text("Play in Background")
                    }

                })
            }
            .navigationBarTitle("Settings")
        }
        
    }
}

That’s it. In next part, we will learn more about bindings with Toggle and Picker to make it interactive settings screen.

Second Part is here:

SwiftUI Form Tutorial — How to create settings screen using Form Part-2