Book Image

SwiftUI Cookbook

By : Giordano Scalzo, Edgar Nzokwe
Book Image

SwiftUI Cookbook

By: Giordano Scalzo, Edgar Nzokwe

Overview of this book

SwiftUI is an innovative and simple way to build beautiful user interfaces (UIs) for all Apple platforms, right from iOS and macOS through to watchOS and tvOS, using the Swift programming language. In this recipe-based book, you’ll work with SwiftUI and explore a range of essential techniques and concepts that will help you through the development process. The recipes cover the foundations of SwiftUI as well as the new SwiftUI 2.0 features introduced in iOS 14. Other recipes will help you to make some of the new SwiftUI 2.0 components backward-compatible with iOS 13, such as the Map View or the Sign in with Apple View. The cookbook begins by explaining how to use basic SwiftUI components. Then, you’ll learn the core concepts of UI development such as Views, Controls, Lists, and ScrollViews using practical implementation in Swift. By learning drawings, built-in shapes, and adding animations and transitions, you’ll discover how to add useful features to the SwiftUI. When you’re ready, 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 while 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 found in building SwiftUI apps.
Table of Contents (15 chapters)

Using ScrollViewReader (iOS 14+)

ScrollViewReader can be used to programmatically scroll to a different section of a list that might not be currently visible. In this recipe, we will create an app that displays a list of characters from A to L. The app will also have a button at the top for programmatically scrolling to the last element in the list and a button at the bottom for programmatically scrolling to an element in the middle of the list.

Getting ready

Create a new SwiftUI app using the UIKit App Delegate life cycle:

Figure 2.14 – UIKit App Delegate in Xcode

Figure 2.14 – UIKit App Delegate in Xcode

Name the app UsingScrollViewReader.

How to do it…

We will start by creating an array of structs with a name and an ID. The array will be used to display SF symbols for the characters A–L. We will then proceed to implement ScrollViewReader and programmatically move to the top or the bottom of the list.

The steps are as follows:

  1. Create a struct called ImageStore, just above the ContentView_Previews struct. The struct should implement the Identifiable protocol:
    struct ImageStore: Identifiable {
        var name: String
        var id: Int
    }
  2. Within the ContentView struct, just before the body variable, declare an array called imageNames. Initialize the array with ImageStore structs whose name parameters represent the letters A–Q from SF Symbols:
        let imageNames = [
            ImageStore(name:"a.circle.fill",id:0),
            ImageStore(name:"b.circle.fill",id:1),
            ImageStore(name:"c.circle.fill",id:2),
            ImageStore(name:"d.circle.fill",id:3),
            ImageStore(name:"e.circle.fill",id:4),
            ImageStore(name:"f.circle.fill",id:5),
            ImageStore(name:"g.circle.fill",id:6),
            ImageStore(name:"h.circle.fill",id:7),
            ImageStore(name:"i.circle.fill",id:8),
            ImageStore(name:"j.circle.fill",id:9),
            ImageStore(name:"k.circle.fill",id:10),
            ImageStore(name:"l.circle.fill",id:11),
            ImageStore(name:"m.circle.fill",id:12),
            ImageStore(name:"n.circle.fill",id:13),
            ImageStore(name:"o.circle.fill",id:14),
            ImageStore(name:"p.circle.fill",id:15),
            ImageStore(name:"q.circle.fill",id:16),
        ]
  3. Replace the TextView component in the body variable with a ScrollView component, ScrollViewReader, and a Button component to navigate to the letter Q in the list:
    ScrollView {
         ScrollViewReader { value in
         Button("Go to letter Q") {
         value.scrollTo(16)
               }
            }         
        }
  4. Now use a ForEach struct to iterate over the imageNames array and display its content using the SwiftUI's Image struct:
     ForEach(imageNames){ image in
       Image(systemName: image.name)
         .id(image.id)
         .font(.largeTitle)
         .foregroundColor(Color.yellow)
         .frame(width: 90, height: 90)
         .background(Color.blue)
         .padding()
       }
  5. Now, add another button at the bottom that causes the list to scroll back to the top:
    Button("Go back to A") {
            value.scrollTo(0)
       }
  6. The app should be able to run now, but let's add some padding and background to the bottom and top buttons to improve their appearance:
    Button("Go to letter Q") {
           value.scrollTo(0)
          }
          .padding()
          .background(Color.yellow)
    	Button("Go to G") {
            value.scrollTo(6, anchor: .bottom)
          }
           .padding()
           .background(Color.yellow)

    The resulting app preview should look as follows:

Figure 2.15 – The UsingScrollViewReader app

Figure 2.15 – The UsingScrollViewReader app

Run the app in Xcode live preview and tap the button at the top to programmatically scroll down to the letter Q.

Scroll to the bottom of the view and tap the button to scroll up to the view where the letter G is at the bottom of the visible area.

How it works…

We start this recipe by creating the ImageStore struct that defines the properties of each image we want to display:

struct ImageStore: Identifiable {
    var name: String
    var id: Int
}

The id parameter is required for ScrollViewReader as a reference for the location to scroll to, just like a house address provides the final destination for driving. By making the struct extend the Identifiable protocol, we are able to iterate over the imageNames array without specifying an id parameter to the ForEach struct:

ForEach(imageNames){ image in
                    Image(systemName: image.name)
				…
                }

ScrollViewReader should be embedded inside a scroll view. This provides a scrollTo() method that can be used to programmatically scroll to the item whose index is specified in the method:

ScrollViewReader { value in
                Button("Go to letter Q") {
                    value.scrollTo(16)
                }
			…
}

The scrollTo() method also has an anchor parameter that is used to specify the position of the item we are scrolling to; for example, scrollTo(6, anchor: .top), in this case, causes the app to scroll until the ImageStore item with ID 6 at the bottom of the view.