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 custom rows in a list

The number of lines of code required to display items in a list view row could vary from one to several lines of code. A custom list row is used when working with several lines of code within a list view row. Implementing custom lists improves modularity and readability, and allows code reuse.

Getting ready

Let's start by creating a new SwiftUI app called CustomRows.

How to do it…

We will reuse part of the code in the static list and clean it up to make it more modular. We create a separate file to hold the WeatherInfo struct, a separate SwiftUI file for the custom WeatherRow, and finally, we implement the components in the ContentView.swift file. The steps are as follows:

  1. Create a new Swift file called WeatherInfo by selecting File | New | File | Swift File or by pressing the ⌘ + N keys.
  2. Define the WeatherInfo struct within the WeatherInfo.swift file:
    struct WeatherInfo: Identifiable {
        var id = UUID()
        var image: String
        var temp: Int
        var city: String
  3. Create a weatherData variable that holds an array of WeatherInfo:
    let weatherData: [WeatherInfo] = [
         WeatherInfo(image: "snow", temp: 5,        city:"New York"),
         WeatherInfo(image: "cloud", temp:5,        city:"Kansas City"),
         WeatherInfo(image: "sun.max", temp: 80,        city:"San Francisco"),
         WeatherInfo(image: "snow", temp: 5, city:"Chicago"),
         WeatherInfo(image: "cloud.rain", temp: 49,        city:"Washington DC"),
         WeatherInfo(image: "cloud.heavyrain", temp: 60,        city:"Seattle"),
         WeatherInfo(image: "sun.min", temp: 75,       city:"Baltimore"),
         WeatherInfo(image: "sun.dust", temp: 65,       city:"Austin"),
         WeatherInfo(image: "sunset", temp: 78,       city:"Houston"),
         WeatherInfo(image: "moon", temp: 80, city:"Boston"),
         WeatherInfo(image: "", temp: 45,         city:"denver"),
         WeatherInfo(image: "cloud.snow", temp: 8,        city:"Philadelphia"),
         WeatherInfo(image: "cloud.hail", temp: 5,       city:"Memphis"),
         WeatherInfo(image: "cloud.sleet", temp:5,       city:"Nashville"),
         WeatherInfo(image: "sun.max", temp: 80,        city:"San Francisco"),
         WeatherInfo(image: "cloud.sun", temp: 5,        city:"Atlanta"),
         WeatherInfo(image: "wind", temp: 88,        city:"Las Vegas"),
         WeatherInfo(image: "cloud.rain", temp: 60,        city:"Phoenix"),
  4. Create a new SwiftUI file by selecting File | New | File | SwiftUI View or by pressing the + N keys.
  5. Name the file WeatherRow.
  6. Add the following code to design the look and functionality of the weather row:
    struct WeatherRow: View {
        var weather: WeatherInfo
        var body: some View {
            HStack {
                Image(systemName: weather.image)
                    .frame(width: 50, alignment: .leading)
                    .frame(width: 80, alignment: .leading)
            .font(.system(size: 25))
  7. Add the following code to the WeatherRow_Previews struct to display information from a sample WeatherInfo struct instance:
    static var previews: some View {
            WeatherRow(weather: WeatherInfo(image: "snow",           temp: 5, city:"New York"))
  8. The resulting WeatherRow.swift canvas preview should look as follows:
    Figure 2.3 – WeatherRow preview

    Figure 2.3 – WeatherRow preview

  9. Open the ContentView.swift file and create a list to display data using the custom WeatherRow component:
    var body: some View {
                List {
                    ForEach(weatherData){ weather in
                        WeatherRow(weather: weather)

    The resulting canvas preview should look as follows:

Figure 2.4 – CustomRowApp preview

Figure 2.4 – CustomRowApp preview

Run the app live preview and admire the work of your own hands.

How it works…

The WeatherInfo Swift file contains the description of the WeatherInfo struct. Our dataset, an array of WeatherInfo variables, was also declared in the file to make it available to other sections of the project.

The WeatherRow SwiftUI file contains the design we will use for each weather row. The weather property within WeatherRow will hold the WeatherInfo arguments passed to the view. HStack in the body of WeatherRow is used to display data from weather variables since a SwiftUI view can only return one view at a time. When displaying multiple views – an image view and two text views, in this case – the views are all encased in an HStack component. The .frame(width: 50, alignment: .leading) modifier added to the image and first text view sets the width used by the element it modifies to 50 units and the alignment to the .leading parameter.

Finally, the .font(.system(size: 25)) and .padding() modifiers are added to HStack to increase the text and image font sizes and add padding to all sides of WeatherRow.