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.

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Chapter 1: Using the Basic SwiftUI Views and Controls

Chapter 1: Using the Basic SwiftUI Views and Controls

Technical requirements

Laying out components

Dealing with text

Adding buttons and navigating with them

Beyond buttons – using advanced pickers

Applying groups of styles using ViewModifier

Separating presentation from content with ViewBuilder

Simple graphics using SF Symbols

Integrating UIKit into SwiftUI – the best of both worlds

Adding SwiftUI to an existing app

Exploring more views and controls (iOS 14+)

Free Chapter

Chapter 2: Going Beyond the Single Component with Lists and Scroll Views

Chapter 2: Going Beyond the Single Component with Lists and Scroll Views

Technical requirements

Using scroll views

Creating a list of static items

Using custom rows in a list

Adding rows to a list

Deleting rows from a list

Creating an editable List view

Moving the rows in a List view

Adding sections to a list

Creating editable Collections

Using Searchable lists

Chapter 3: Exploring Advanced Components

Chapter 3: Exploring Advanced Components

Technical requirements

Using LazyHStack and LazyVStack

Displaying tabular content with LazyHGrid and LazyVGrid

Scrolling programmatically with ScrollViewReader

Displaying hierarchical content in expanding lists

Using disclosure groups to hide and show content

Creating SwiftUI widgets

Chapter 4: Viewing while Building with SwiftUI Preview

Chapter 4: Viewing while Building with SwiftUI Preview

Technical requirements

Previewing a layout in dark mode

Previewing a layout at different dynamic type sizes

Previewing a layout in a NavigationView

Previewing a layout on different devices

Using previews in UIKit

Using mock data for previews

Chapter 5: Creating New Components and Grouping Views with Container Views

Chapter 5: Creating New Components and Grouping Views with Container Views

Technical requirements

Showing and hiding sections in forms

Disabling and enabling items in forms

Filling out forms easily using Focus and Submit

Navigating between multiple views with TabView

Using gestures with TabView

Chapter 6: Presenting Extra Information to the User

Chapter 6: Presenting Extra Information to the User

Technical requirements

Presenting alerts

Adding actions to alert buttons

Presenting confirmation dialogs

Presenting new views using sheets

Creating context menus

Displaying popovers

Chapter 7: Drawing with SwiftUI

Chapter 7: Drawing with SwiftUI

Technical requirements

Using SwiftUI's built-in shapes

Drawing a custom shape

Drawing a curved custom shape

Drawing using the Canvas API

Implementing a progress ring

Implementing a Tic-Tac-Toe game in SwiftUI

Rendering a gradient view in SwiftUI

Building a bar chart

Building a pie chart

Chapter 8: Animating with SwiftUI

Chapter 8: Animating with SwiftUI

Technical requirements

Creating basic animations

Transforming shapes

Creating a banner with a spring animation

Applying a delay to a view modifier animation to create a sequence of animations

Applying a delay to a withAnimation function to create a sequence of animations

Applying multiple animations to a view

Creating custom view transitions

Creating a hero view transition with .matchedGeometryEffect

Lottie animations in SwiftUI

Implementing a stretchable header in SwiftUI

Creating floating hearts in SwiftUI

Implementing a swipeable stack of cards in SwiftUI

Chapter 9: Driving SwiftUI with Data

Chapter 9: Driving SwiftUI with Data

Technical requirements

Using @State to drive a View's behavior

Using @Binding to pass a state variable to child Views

Implementing a CoreLocation wrapper as @ObservedObject

Using @StateObject to preserve the model's life cycle

Sharing state objects with multiple Views using @EnvironmentObject

Chapter 10: Driving SwiftUI with Combine

Chapter 10: Driving SwiftUI with Combine

Technical requirements

Introducing Combine in a SwiftUI project

Managing the memory in Combine to build a timer app

Validating a form using Combine

Fetching remote data using Combine and visualizing it in SwiftUI

Debugging an app based on Combine

Unit testing an app based on Combine

Chapter 11: SwiftUI Concurrency with async await

Chapter 11: SwiftUI Concurrency with async await

Technical requirements

Integrating SwiftUI and an async function

Fetching remote data in SwiftUI

Pulling and refreshing data asynchronously in SwiftUI

Converting a completion block function to async await

Implementing infinite scrolling with async await

Chapter 12: Handling Authentication and Firebase with SwiftUI

Chapter 12: Handling Authentication and Firebase with SwiftUI

Technical requirements

Implementing Sign in with Apple in a SwiftUI app

Integrating Firebase into a SwiftUI project

Using Firebase to sign in using Google

Implementing a distributed Notes app with Firebase and SwiftUI

Chapter 13: Handling Core Data in SwiftUI

Chapter 13: Handling Core Data in SwiftUI

Technical requirements

Integrating Core Data with SwiftUI

Showing Core Data objects with @FetchRequest

Adding Core Data objects from a SwiftUI view

Filtering Core Data requests using a predicate

Deleting Core Data objects from a SwiftUI view

Presenting data in a sectioned list with @SectionedFetchRequest

Chapter 14: Creating Cross-Platform Apps with SwiftUI

Chapter 14: Creating Cross-Platform Apps with SwiftUI

Technical requirements

Creating an iOS app in SwiftUI

Creating the macOS version of the iOS app

Creating the watchOS version of the iOS app

Chapter 15: SwiftUI Tips and Tricks

Chapter 15: SwiftUI Tips and Tricks

Technical requirements

Snapshot testing SwiftUI views

Unit testing SwiftUI with ViewInspector

Showing a PDF in SwiftUI

Implementing SwiftUI views using Playground

Using custom fonts in SwiftUI

Implementing a Markdown editor with Preview

Other Books You May Enjoy

Other Books You May Enjoy

Packt is searching for authors like you

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Using SwiftUI's built-in shapes

SwiftUI provides five different basic shapes:

Rectangle
RoundedRectangle
Capsule
Circle
Ellipse

They can be used to create more complex shapes if we combine them.

In this recipe, we'll explore how to create them, add a border and a fill, and how to lay out the shapes.

There will be more than what we can show here, but with this recipe as a starting point, you can modify the shapes to discover the potential of the built-in shapes of SwiftUI.

Getting ready

As usual, start by creating a new SwiftUI project with Xcode and call it BuiltInShapes.

How to do it…

We are going to implement a simple app that shows the different basic shapes laid out vertically:

Create a VStack component with a spacing of 10 and a horizontal padding of 20:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
  ...