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)

Creating a list of static items

Lists are similar to scroll views in that they are used to view a collection of items. Lists are used for larger datasets, whereas scroll views are used for smaller datasets; the reason being that list views do not load the whole dataset in memory at once and thus are more efficient at handling large data.

Getting ready

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

How to do it…

We'll create a struct to hold weather information and an array of weather data. The data will then be used to create a view that provides weather information from several cities. Proceed as follows:

  1. Before the ContentView struct, create a struct called WeatherInfo with four properties: id, image, temp, and city:
    	struct WeatherInfo: Identifiable {
                var id = UUID()
                var image: String
                var temp: Int
                var city: String
    }
  2. Within the ContentView struct, create a weatherData property as 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: "moon.circle", 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"),
        ]
  3. Add the List view to the ContentView body. The list should display the information contained in our weatherData array. Also add the font(size: 25) and padding() modifiers:
    List {
                ForEach(self.weatherData){ weather in
                    HStack {
                        Image(systemName: weather.image)
                            .frame(width: 50, alignment:                                .leading)
                        Text("\(weather.temp)°F")
                            .frame(width: 80, alignment:                                .leading)
                        Text(weather.city)
                    }
                    .font(.system(size: 25))
                    .padding()
                }
            }

    The resulting preview should be as follows:

Figure 2.2 – List in the weather app

Figure 2.2 – List in the weather app

How it works…

We started the recipe by creating a WeatherInfo struct to hold and model our weather data. The id = UUID() property creates a unique identifier for each variable we create from the struct. Adding the id property to our struct allows us to later use it within a ForEach loop without providing id: .\self parameter as seen in the previous recipe.

The ForEach loop within the List view iterates through the items in our model data and copies one item at a time to the weather variable declared on the same line.

The ForEach loop contains HStack because we would like to display multiple items on the same line – in this case, all the information contained in the weather variable.

The font(.system(size: 25)) and padding() modifiers add some padding to the list rows to improve the design and readability of the information.

The images displayed are based on SF Symbols, explained in Chapter 1, Using the Basic SwiftUI Views and Controls.