SwiftUI - View Layout

---

---

View Layout is the most important and powerful feature of SwiftUI. Layouts are responsible how multiple views are arranged and displayed in the user interface of an app. As we know that SwiftUI uses declarative syntax, so we have to only describe the layout of the UI and the framework will take care of the rendering.

SwiftUI provides various pre-define layouts as well as custom layouts through which we can create layout. It also provide various pre-defined modifiers that can help us to enhance the appearance of the layout in the UI.

Layout Type in SwiftUI

SwiftUI supports various in-built layouts using them we can easily create a layout for the user interface of an app. We can also mix and match them together to create a new layout for the app. Following are some pre-defined layouts supported by SwiftUI −

Stack Layout

It is the most frequently used layout in SwiftUI. It arranges child views in either, horizontally, vertically, or in layer using HStack, VStack and ZStack. The HStack arrange views in horizontal line, VStack arrange views in vertical line, whereas ZStack arrange views in layers means a view present on the top of another view.

Syntax

Following is the syntax −

// For VStack
VStack{
   //code
}
// For HStack
HStack{
   //code
}
// For ZStack
ZStack{
   //code
}

Example

The following SwiftUI program uses stack layout −

import SwiftUI
struct ContentView: View {
   var body: some View {
      VStack{
         Text("Hello Swift")
         Text("Hello Swift")
      }
      HStack{
         Text("Learn Swift")
         Text("Learn Swift")
      }
      ZStack{
         Rectangle()
            .frame(width: 100, height: 70)
         Text("Swift").font(.title2).foregroundStyle(.white)
      }
   }
}
#Preview {
   ContentView()
}

Following is the output −

Grid Layout

Grid layout is a special type of container which arranges the specified views in a 2-D layout using GridRow structure. For example first view will display in the first column of the grid, second will be in the second column of the grid, and so on. The working of grid layout is quite similar when we warp the HStack instance in VStack instance.

Syntax

Following is the syntax −

Grid{
   GridRow{
      //code
   }
}

Example

The following SwiftUI program create grid layout.

import SwiftUI
struct ContentView: View {
   var body: some View {
      @State var result : String = ""
      Text("Calculator").font(.title)
      TextField("Enter your number", text: $result)
      Grid{
         GridRow{
            Text("AC")
            Text("+/-")
            Text("%")
            Text("/")
         }
         GridRow{
            Text("7")
            Text("8")
            Text("9")
            Text("x")
         }
         GridRow{
            Text("4")
            Text("5")
            Text("6")
            Text("-")
         }
         GridRow{
            Text("1")
            Text("2")
            Text("3")
            Text("+")
         }
         GridRow{
            Text("0")
            Text(".")
            Text("=")
         }
      }
   }
}
#Preview {
   ContentView()
}  

Following is the output −

List Layout

List layout is used to arrange multiple views in a vertically scrollable list, where each child view is present in each row of the list. It can work well with both static and dynamic view and also have various UI controls such as buttons, toggles, stepper, etc., to make list much more interactive.

Syntax

Following is the syntax −

List{
   //code
}

Example

The following SwiftUI program create list layout.

import SwiftUI
struct ContentView: View {
   @State private var value = false   
   var body: some View {
      VStack{
         
         Text("Setting").font(.title)
         List{
            Text("Wi-Fi")
            Text("Mobile Network")
            Toggle("Bluetooth", isOn: $value)
            Text("Connection and Sharing")
         }
      }
   }
}
#Preview {
   ContentView()
}

Following is the output −

Form Layout

Form layout is used to create a structured input form. It grouped together various fields and labels and display them in a vertically scrollabel form. It used to store data provided by user.

Syntax

Following is the syntax −

Form{
   //code
}

Example

The following SwiftUI program create form layout.

import SwiftUI
struct ContentView: View {
   @State private var fname: String = ""
   @State private var lname: String = ""
   @State private var branch: String = ""
   
   var body: some View {
      NavigationStack{
         Form{
            TextField("First Name", text:$fname)
            TextField("Last Name", text:$lname)
            TextField("Branch", text:$branch)
            Button("Submit"){
               print("Form is submitted")
            }
         }.navigationTitle("User Form")
      }
   }
}
#Preview {
   ContentView()
}

Following is the output −

Group Layout

Group layout is used to display multiple views in a group without affecting the layout of the UI. It is commonly used when we want ot apply modifiers to the multiple views at the same or can used to create hierarchies.

Syntax

Following is the syntax −

Group{
   //code
}

Example

The following SwiftUI program create group layout.

import SwiftUI

struct ContentView: View {
   var body: some View {
      Group{
         Text("Notes 1")
            .font(.title2)
         Text("Notes 2")
            .font(.title2)
         Text("Notes 3")
            .font(.title2)
      }
      .background(.gray)
      .foregroundStyle(.white)
   }
}
#Preview {
   ContentView()
}

Following is the output −