Basic layout design using swiftUI for iOS mobile application
April 1, 2025
SwiftUI provides a powerful and intuitive way to design layouts for iOS applications using declarative syntax. The basic building blocks of a SwiftUI layout include VStack, HStack, and ZStack, which allow developers to arrange views vertically, horizontally, or by layering them on top of each other, respectively. These stacks can be combined to create complex layouts while maintaining a clean and readable structure. Additionally, Spacer and Padding help with spacing and alignment, ensuring a visually appealing design. SwiftUI also supports GeometryReader for dynamic layouts that adapt to different screen sizes. With these tools, developers can quickly build responsive and flexible user interfaces using minimal code.
Demonstration of layout components
This code demonstration covers essential SwiftUI layout components: VStack, HStack, and ZStack for vertical, horizontal, and layered arrangements, respectively; LazyHGrid and LazyVGrid for efficient grid-based layouts; List for dynamic, scrollable content; ScrollView for enabling scrolling within views; and Spacer for flexible spacing. These components help create responsive and well-structured iOS app interfaces efficiently.
import SwiftUI
struct ContentView: View {
var body: some View {
ContentViewBasicLayouts()
}
}
struct ContentViewBasicLayouts: View {
var body: some View {
ZStack{
Color(.black).ignoresSafeArea()
VStack {
Image(“flower”)
.resizable()
.cornerRadius(/*@START_MENU_TOKEN@*/17.0/*@END_MENU_TOKEN@*/)
.aspectRatio(contentMode: .fit)
.padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
Text(“This is a flower”)
.font(.title)
.fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
.foregroundColor(.white)
}
}
HStack {
ForEach(1…10, id: \.self) { number in
Text(“Item \(number)”)
.padding()
.background(Color.green)
.cornerRadius(8)
}
}
VStack(alignment: .center, spacing: 20) {
Text(“Title”)
Text(“Subtitle”)
}
}
}
struct ContentViewGrids: View {
var body: some View {
let columns = [GridItem(.flexible()), GridItem(.flexible())]
LazyVGrid(columns: columns, spacing: 20) {
ForEach(1…6, id: \.self) { item in
Text(“Item \(item)”)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
}
let rows = [GridItem(.fixed(100)), GridItem(.flexible())]
LazyHGrid(rows: rows, spacing: 10) {
ForEach(1…6, id: \.self) { item in
Text(“Item \(item)”)
.padding()
.background(Color.orange)
.cornerRadius(8)
}
}
}
}
struct ContentViewList: View {
var body: some View {
List {
Text(“Item 1”)
Text(“Item 2”)
Text(“Item 3”)
}
let fruits = [“Apple”, “Banana”, “Cherry”]
List(fruits, id: \.self) { fruit in
Text(fruit)
}
List {
Section(header: Text(“Fruits”)) {
Text(“Apple”)
Text(“Banana”)
}
}
}
}
struct ContentViewScroll: View {
var body: some View {
ScrollView {
VStack {
ForEach(1…20, id: \.self) { number in
Text(“Row \(number)”)
.padding()
.background(Color.blue)
.cornerRadius(8)
}
}
}
ScrollView(.horizontal) {
HStack {
ForEach(1…10, id: \.self) { number in
Text(“Item \(number)”)
.padding()
.background(Color.green)
.cornerRadius(8)
}
}
}
}
}
struct ContentViewSpacerDivider: View {
var body: some View {
HStack {
Text(“Left”)
Spacer()
Text(“Right”)
}
VStack {
Text(“Top”)
Divider()
Text(“Bottom”)
}
}
}
In the above separate content view has been created to describe each UI component. In the video also, it is shown how it looks after build the code.