Book Image

SwiftUI Cookbook - Second Edition

By : Giordano Scalzo, Edgar Nzokwe
Book Image

SwiftUI Cookbook - Second Edition

By: Giordano Scalzo, Edgar Nzokwe

Overview of this book

SwiftUI provides an innovative and simple way to build beautiful user interfaces (UIs) for all Apple platforms, from iOS and macOS through to watchOS and tvOS, using the Swift programming language. In this recipe-based cookbook, you’ll cover the foundations of SwiftUI as well as the new SwiftUI 3 features introduced in iOS 15 and explore a range of essential techniques and concepts that will help you through the development process. The cookbook begins by explaining how to use basic SwiftUI components. Once you’ve learned the core concepts of UI development, such as Views, Controls, Lists, and ScrollViews, using practical implementations in Swift, you'll advance to adding useful features to SwiftUI using drawings, built-in shapes, animations, and transitions. You’ll understand how to integrate SwiftUI with exciting new components in the Apple development ecosystem, such as Combine for managing events and Core Data for managing app data. Finally, you’ll write iOS, macOS, and watchOS apps by sharing the same SwiftUI codebase. By the end of this SwiftUI book, you'll have discovered a range of simple, direct solutions to common problems encountered when building SwiftUI apps.
Table of Contents (17 chapters)

Using scroll views

You can use SwiftUI scroll views when the content to be displayed cannot fit in its container. Scroll views create scrolling content where users can use gestures to bring new content into the section of the screen where it can be viewed. Scroll views are vertical by default but can be made to scroll horizontally or vertically.

In this recipe, we will learn how to use horizontal and vertical scroll views.

Getting ready

Let's start by creating a SwiftUI project called WeScroll.

Optional: If you don't have it yet, download the San Francisco Symbols (SF Symbols) app here: https://developer.apple.com/sf-symbols/.

As we mentioned in Chapter 1, Using the Basic SwiftUI Views and Controls, SF Symbols is a set of over 3,200 symbols provided by Apple.

How to do it…

Let's learn how scroll views work by implementing horizontal and vertical scroll views that display SF symbols for alphabet characters A - P. Here are the steps:

  1. Add an array variable to our ContentView struct that contains the letters a to p:
        let letters =
        ["a","b","c","d","e","f","g","h",
         "i","j","k","l","m","n","o","p"]
  2. Replace the original text view with a VStack, a ScrollView, and a ForEach struct:
        var body: some View {
            VStack{
                ScrollView {
                    ForEach(self.letters, id: \.self){
                            letter in
                            Image(systemName: letter)
                            .font(.largeTitle)
                            .foregroundColor(Color.yellow)
                            .frame(width: 50, height: 50)
                            .background(Color.blue)
                            .symbolVariant(.circle.fill)
                        }
                }
                .frame(width:50, height:200)
                
                ScrollView(.horizontal, showsIndicators:
                   false) {
                    HStack{
                        ForEach(self.letters, id: \.self){
                           name in
                           Image(systemName: name)
                            .font(.largeTitle)
                            .foregroundColor(Color.yellow)
                            .frame(width: 50, height: 50)
                            .background(Color.blue)
                            .symbolVariant(.circle.fill)
                        }
                    }
                }
            }
        }
  3. Run/resume the Xcode preview from the canvas window. It should look as follows:
Figure 2.1 – The WeScroll app with horizontal and vertical scroll views

Figure 2.1 – The WeScroll app with horizontal and vertical scroll views

How it works…

By default, scroll views display items vertically. Therefore, our first scroll view displays its content along the vertical axis without requiring us to specify the axis.

In this recipe, we also introduce the ForEach structure, which computes views on-demand based on an underlying collection of identified data. In this case, the ForEach structure iterates over a static array of alphabet characters and displays the SF Symbols of the said characters.

We provided two arguments to the ForEach structure: the collection we want to iterate over and an id. This id helps us distinguish between the items in the collection and should be unique. Using \.self as id, we indicated that the alphabet characters we are using are unique and will not be repeated in this List. We used unique items because SwiftUI expects each row to be uniquely identifiable and will not run as expected otherwise.

You can use the ForEach structure without specifying the id argument if your collection conforms to the Identifiable protocol.

Moving on to the second scroll view, it uses two arguments: axis and showIndicators. The .horizontal axis's enum indicates we want the content to scroll horizontally, while the .showIdicators: false argument prevents the scrollbar indicator from appearing in the view.

See also

Apple's documentation on scroll views: https://developer.apple.com/documentation/swiftui/scrollview