VStack, HStack and Zstack layout in SwiftUI

What are VStack, HStack, and ZStack layouts In SwiftUI?, you may familiar with VStack and HStack layouts. In UIKit framework, we used to use StackView to wrap UI components. If you are familiar with StackView in UIKIT, you have half done, we will go through each step, how VStack, HStack, and ZStack layouts implement SwiftUI framework. Stack layout, Spaces, and Padding are crucial parts of the SwiftUI layout, VStack, HStack, and ZStack layout allow to position views inside the container view, vertically and horizontally manner.

Note: This article is written only for beginner to understand how VStack, HStack, and ZStack layouts container works in SwiftUI, There are more property and features in those stack container, I will describe those topics briefly in another article.

1) Create Project :

  1. Start Xcode.
  2. Select a Single Application.
  3. Input Product name.
  4. Input organization Name.
  5. Input organization Identifier.
  6. Select Language Swift.
  7. User Interface SwiftUI.

2) Understand the Initial project?

I will not describe all the environmental components of the SwiftUI framework. but I would like to help you to understand how SwiftUI Codebase starts.

Whole SwiftUI framework is completely looping in view, no more UITableView, UIcollectionView, UIView, UICollectionViewCell, UITableViewCell classes in SwiftUI framework.

The given example SwiftUI uses Struct to initialize and define through the View protocol. Some properties return View. As Swift UI uses DSL like syntax, the return is omitted from the Struct body.

As I mentioned only one view is returning to the body, Most of the time this view would have NavigationView, VStack, HStack, or ZStack layout.

UIKit appending content in the view from the top left of the screen, Appkit appending content in View From Bottom left of the screen, But in SwiftUI Views are starting appending from the center of the screen. Here is how your Text label will look like for the below code.

SwiftUI Views are starting appending from the center of the screen

VStack, HStack, and ZStack are used as a parent view containers in SwiftUI. Let us see one by one, how Stack container use in SwiftUI.

VStack:

In UIKit we are using UITableView or UIScrollView, to arrange View components vertically, In SwiftUI VStack layout not only arranging View components vertically but also wrapping themselves in the Container view.

Three Text component is embedded in VStack, and the result on view container will look like this.

VStack Layout Example

How spacing works in VStack?

The spacer is used to occupy all available space by equal proportional in stack layout. Spacer plays an essential role in SwiftUI because SwiftUI doesn’t support Constraints and auto-layout methodology while designing iOS Application.

VStack applied Spacer

HStack:

In UIKit we are using UICollectionView or UIScrollView, to arrange View components horizontally, In SwiftUI HStack layout not only arranging View components horizontally but also wrapping themselves in the Container view.

HStack Layout Example

How spacing works in HStack?

The spacer in HStack is used to occupy all available space in equal proportional in HStack layout horizontally.

HStack applied Spacer

ZStack:

ZStack layout is quite different from VStack and Hstack. ZStack arranging and positioning views over each other, VStack and HStack placing UI in x and y-axis but ZStack placing views in the z-axis.

ZStack Layout Example

In this code, I have added a few extra properties with respect to each Text(), in order to understand how Text() is overlapping each other.

I also have written small article about, Why Swift is more advantageous than UIKit.

Conclusion:

I tried to introduce VStack, ZStack, and HStack with simple examples and I also introduced How Spacer is required in terms of layout design. As a beginner, you should know why VStack, ZStack, and HStack is essential for develop Apps in SwiftUI, Thank you for reading the article

Leave a Comment