The code in this chapter is based on Xcode 15.0 and iOS 17.0. You can download and install the latest version of Xcode from the App Store. You’ll also need to be running macOS Ventura (13.4) or newer.

Simply search for Xcode in the App Store and select and download the latest version. Launch Xcode and follow any additional installation instructions that your system may prompt you with. Once Xcode has fully launched, you’re ready to go.

All the code examples for this chapter can be found on GitHub at https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd-Edition/tree/main/Chapter01-Using-the-basic-SwiftUI-Views-and-Controls/.

SwiftUI has been evolving since the day it was announced in 2019. Every year, Apple adds new APIs and SwiftUI becomes more and more powerful. At the time of this writing, it is possible to create an iOS app exclusively using SwiftUI, without having to integrate UIKit. Since the previous edition of this book, Apple added new functionality to SwiftUI.

In WWDC 2022, Apple added new features to SwiftUI, improved some existing features, and even deprecated some of the APIs just introduced a few years ago. These are the most relevant features:

• Swift Charts, which allows you to create data visualizations across all Apple platforms
• New data-driven navigation with NavigationStack and NavigationSplitView
• Enhancements to Form, to support multi-platform apps with a single code base:
  • LabeledContent view to display pairs of data, like key-value pairs or title and description, inside forms
  • Deeper customization of multi-line TextField instances
  • New MultiDatePicker control to select more than one date
  • New mixed-state controls for Toggle and Picker views and a new format for Stepper views.
• Table, introduced in macOS 12, now available on iPadOS 16 and iOS 16, and new toolbar customization for iPadOS
• PhotosPicker view, a multi-platform and privacy-preserving API for picking photos and videos
• ShareLink view, which enables the presentation of the share sheet even in WatchOS
• Transferable protocol, to share data between apps
• ShapeStyle extensions like gradient and shadow, which can also be applied to SFSymbols
• Grid, to arrange content in a two-dimensional way
• Layout protocol to create full-custom layouts

In WWDC 2023, Apple added more functionality to SwiftUI. These are the most relevant features:

• Interactivity and animation added to widgets
• Improvement to Xcode previews with a new Preview(_:traits:body:) macro that supports UIKit and AppKit out of the box
• Native SwiftUI support for MapKit
• Interactivity and pie charts added to Swift Charts
• Navigation, date pickers, and toolbars available in WatchOS 10
• SwiftData, a successor of CoreData, used to persist data between app launches
• The Observable macro, and new @State, @Environment, and @Bindable property wrappers, offering a new way of sharing data throughout the app
• New powerful animations with the new spring animation, the PhaseAnimator struct, and the Keyframe Animator and CustomAnimation protocol
• Inspector, a new modal presentation with the inspector(isPresented:content:) view modifier
• Symbol Effects, animated symbols added to SF Symbols 5
• New powerful scrolling APIs: transition effects, scroll position, paged scrolling, and inset control
• Enhancements to list and tables: item selection, expanding sections programmatically, column visibility, column header visibility, hierarchical rows, and alternating row background
• New dialog customizations, new gestures, and new input events

In this very first recipe of the book, we will start laying out components. In SwiftUI, our user interface is composed of different elements. It is very important to understand how to group components together in different layouts. SwiftUI uses three basic layout components, VStack, HStack, and ZStack. Use the VStack view to arrange components on a vertical axis, HStack to arrange components on a horizontal axis, and—you guessed it right—use the ZStack to arrange components along the vertical and horizontal axis.

In this recipe, we will also look at spacing and adjust the position used to position elements. We will also look at how Spacer and Divider can be used for layout.

Getting ready

Let’s start by creating a new SwiftUI project called TheStacks. Use the following steps:

1. Start Xcode (Finder | Applications | Xcode).
2. Click on Create a new Xcode project from the left pane.
3. The following screen asks us to choose an Xcode template. Select iOS, and then App. Click Next.
4. A screen to select the options for the project will appear. Enter the product name, TheStacks.
5. Make sure that Interface is set to SwiftUI, Language is set to Swift, and Storage is set to None. Click Next.
6. Select the folder location to store the project and choose if you want to create a Git repository or not. Then click Create.

How to do it…

Let’s implement the VStack, HStack, and ZStack within a single screen to better understand how each works and the differences between them. The steps are given here:

1. Select the Contentview/Contentview.swift file on the navigation pane (left side of Xcode).
2. Replace the content of the body variable with a VStack and some Text views:

       var body: some View {
           VStack {
               Text("VStack Item 1")
               Text("VStack Item 2")
               Text("VStack Item 3")
           }
           .background(.blue)
       }
   

3. Press Cmd + Option + Enter if the canvas is not visible, then click on the Resume button above the canvas window to display the resulting view:

Figure 1.1: VStack with three items

4. Add a Spacer and a Divider between VStack Item 2 and VStack Item 3:

   Spacer()
   Divider()
      .background(.black)
   

5. The content expands and covers the screen’s width and height, as follows:

Figure 1.2: VStack + Spacer + Divider

6. Add an HStack and a ZStack below VStack Item 3:

   HStack{
      Text("HStack Item 1")
      Divider()
          .background(.black)
      Text("HStack Item 2")
      Divider()
           .background(.black)
      Spacer()
      Text("HStack Item 3")
   }
   .background(Color.red)
   ZStack{
      Text("ZStack Item 1")
          .padding()
          .background(.green)
          .opacity(0.8)
      Text("ZStack Item 2")
          .padding()
          .background(.green)
          .offset(x: 80, y: -400)
   }
   

7. The preview should look like the following screenshot (it may vary depending on the device selected for previews):

Figure 1.3: VStack, HStack, and ZStack

This concludes our recipe on using stacks. Going forward, we’ll make extensive use of VStack and HStack to position various components in our views.

How it works…

In Xcode 15, a new iOS app project with SwiftUI selected as the interface option starts with a VStack that includes an Image view and a Text view located at the center of the screen. We replaced the content provided by the template with our own VStack, with three embedded Text views. SwiftUI container views like VStack determine how to display content by using the following steps:

1. Figure out its internal spacing and subtract that from the size proposed by its parent view.
2. Divide the remaining space into equal parts.
3. Process the size of its least flexible view.
4. Divide the remaining unclaimed space by the unallocated space, and then repeat Step 2.
5. The stack then aligns its content and chooses its own size to exactly enclose its children.

Adding the Spacer() forces the view to use the maximum amount of vertical space. This is because the Spacer() is the most flexible view—it fills the remaining space after all other views have been displayed.

The Divider() component is used to draw a horizontal line across the width of its parent view. That is why adding a Divider() view stretched the VStack background from just around the Text views to the entire width of the VStack. By default, the divider line does not have a color. To set the divider color, we add the .background(.black) modifier. Modifiers are methods that can be applied to a view to return a new view. In other words, it applies changes to a view. Examples include .background(.black), .padding(), and .offset(…).

The HStack container is like the VStack but its contents are displayed horizontally from left to right. Adding a Spacer() in an HStack thus causes it to fill all available horizontal space, and a divider draws a vertical line between components in the HStack.

The ZStack is like HStack and VStack but overlays its content on top of existing items.

There’s more…

You can also use the .frame modifier to adjust the width and height of a component. Try deleting the Spacer() and Divider() from the HStack and then apply the following modifier to the HStack:

.frame(
    maxWidth: .infinity,
    maxHeight: .infinity,
    alignment: .topLeading
)