Complete guide about STACKS in SwiftUI
Stacks in SwiftUI can help you create organized and flexible UIs, as you can easily stack multiple views together and adjust the spacing and alignment as needed. Stacks can be particularly useful for creating forms, menus, and other types of structured layouts.
There are three types of stacks in SwiftUI:
HStackVStackZStack
HStack:
Its horizontal stack that arranges its child views from left to right, in the order they are specified. You can add spacing between the child views using the spacing parameter.
VStack:
Its vertical stack that arranges its child views from top to bottom, in the order they are specified. You can add spacing between the child views using the spacing parameter.
ZStack:
Its a stack that arranges its child views in a 3D space, with each view being positioned along the z-axis. The last child view added to the ZStack appears on top of the other child views. You can adjust the position of the child views using the alignment parameter.
Let’s dive into an example to gain a better understanding of stacks. We will create a UserList application for the sole purpose of demonstrating the concept of stacks. As this project is solely intended to explore the concept of stacks, we will focus exclusively on the user interface (UI) design.Okay enough with the details, lets get started!
Open Xcode and create a new SwiftUI project. First things first, we need to create a data source for our application. To do so, we’ll create a UserModel struct that will contain the following properties: name, isActive, statusColor, and profileImage.
struct UserModel:Identifiable {
var id = UUID()
let name: String
let isActive: Bool
let profileImage: String
var statusColor: Color {
return isActive ? .green : .yellow
}
}Next, in the ContentView.swift file, add the following code:
struct ContentView: View {
let users = [
UserModel(name: "John", isActive: true, profileImage: "profile1"),
UserModel(name: "Sarah", isActive: false, profileImage: "profile2"),
UserModel(name: "David", isActive: true, profileImage:"profile6"),
UserModel(name: "Emily", isActive: false, profileImage:"profile4"),
UserModel(name: "Mike", isActive: true, profileImage:"profile5"),
UserModel(name: "Mike", isActive: true, profileImage:"profile1")
]
var body: some View {
Text("Hello World")
}
}Let’s begin by creating a ZStack view. As mentioned earlier, the ZStack is a powerful and flexible way to layer and arrange views on top of each other in a 3D coordinate space. In our application, we will use it to display a profile image and the active status of the person. We will achieve this by displaying a small circle above the profile image, and this can only be done using the ZStack view.
var body: some View {
Form {
ForEach(users) { user in
ZStack(alignment: .leading) {
Image(user.profileImage)
.resizable()
.scaledToFit()
.frame(width: 100,height: 100)
.clipShape(Circle())
Circle()
.fill(user.statusColor)
.frame(width: 15, height: 15).padding(.leading,80)
.padding(.top,65)
}
}
}
}Let’s breakdown the above code:
- Form view is used to display the data in the form of list
- ForEach loop is added to iterate over an array of UserModel instances
- ZStack view to layer image and circle views on top of each other, aligning them to the leading edge and we have adjusted the padding in such a way so that our result will look like this:
How cool is that!! Now lets use HStack. We are going to add information of the user, the profile image and name should be in a horizontal position.
var body: some View {
Form {
ForEach(users) { user in
HStack{
ZStack(alignment: .leading) {
Image(user.profileImage)
.resizable()
.scaledToFit()
.frame(width: 100,height: 100)
.clipShape(Circle())
Circle()
.fill(user.statusColor)
.frame(width: 15, height: 15).padding(.leading,80)
.padding(.top,65)
}
Text(user.name).font(.title2)
}
}
}
}Replace the above code in the body of the ContentView and your output should look like :
Great, its time to use VStack. We are simply going to add an static data like message and time below the username which will be one below the other.
struct UserView: View {
let users = [
User(name: "John", isActive: true, profileImage: "profile1"),
User(name: "Sarah", isActive: false, profileImage: "profile2"),
User(name: "David", isActive: true, profileImage:"profile6"),
User(name: "Emily", isActive: false, profileImage:"profile4"),
User(name: "Mike", isActive: true, profileImage:"profile5"),
User(name: "Mike", isActive: true, profileImage:"profile1")
]
var body: some View {
Form {
ForEach(users) { user in
HStack{
ZStack(alignment: .leading) {
Image(user.profileImage)
.resizable()
.scaledToFit()
.frame(width: 100,height: 100)
.clipShape(Circle())
Circle()
.fill(user.statusColor)
.frame(width: 15, height: 15).padding(.leading,80)
.padding(.top,65)
}
VStack{
Text(user.name).font(.title2)
Text("Hello").font(.callout)
Text("10:20pm").font(.caption)
}
}
}
}
}
}Replace your ContentView with the above code and the output will be like this :
For more reference I’ve attached the project here.
Summary:
Stacks are a fundamental feature in SwiftUI that enable developers to organize and layout views in a flexible and intuitive way. The ability to easily stack views horizontally, vertically, or in a layered fashion with the HStack, VStack, and ZStack views respectively, enables developers to create complex user interfaces with ease. By using stacks, developers can take advantage of SwiftUI's automatic layout management, which ensures that views are displayed in a way that is optimized for the available screen size. This makes it easier to create responsive and adaptive user interfaces that work seamlessly across a range of devices. Additionally, stacks in SwiftUI are highly customizable, with a range of modifiers and options that allow developers to fine-tune the appearance and behavior of their user interface elements. This flexibility, combined with SwiftUI's declarative syntax, makes it easy to create sophisticated and dynamic layouts that respond to user input and adapt to changing data or screen sizes. Overall, the importance of stacks in SwiftUI cannot be overstated, as they are a key tool for building modern, responsive, and intuitive user interfaces.
Hope this article was helpful 😄.
Follow me on twitter : https://twitter.com/iamafsana_
Sayonara!! 😃