Chapter 4
Layout User Interface with Stacks

Stacks in SwiftUI are similar to stack views in UIKit. By combining views in horizontal and vertical stacks, you can construct complex user interfaces for your apps. In UIKit, it is necessary to use auto layout to build interfaces that fit all screen sizes. However, auto layout can be a complicated subject and difficult to learn for beginners. The good news is that in SwiftUI, you no longer need to use auto layout. Everything, including VStack, HStack, and ZStack, is a stack.

In this chapter, I will guide you through all types of stacks and show you how to build a grid layout using stacks. Our project will involve laying out a simple grid interface step by step. By the end of this chapter, you will be able to effectively combine views with stacks and build the UI you desire.

Figure 1. The demo app
Figure 1. The demo app

Understanding VStack, HStack, and ZStack

SwiftUI offers three types of stacks for developers to combine views in different orientations. Depending on how you want to arrange the views, you can use:

  • HStack - arranges views horizontally
  • VStack - arranges views vertically
  • ZStack - overlays one view on top of another

To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.

results matching ""

    No results matching ""