Book Image

SwiftUI Cookbook - Third Edition

By : Juan C. Catalan

5 (1)

Book Image

SwiftUI Cookbook - Third Edition

5 (1)

By: Juan C. Catalan

Overview of this book

SwiftUI is the modern way to build user interfaces for iOS, macOS, and watchOS. It provides a declarative and intuitive way to create beautiful and interactive user interfaces. The new edition of this comprehensive cookbook includes a fully updated repository for SwiftUI 5, iOS 17, Xcode 15, and Swift 5.9. With this arsenal, it teaches you everything you need to know to build beautiful and interactive user interfaces with SwiftUI 5, from the basics to advanced topics like custom modifiers, animations, and state management. In this new edition, you will dive into the world of creating powerful data visualizations with a new chapter on Swift Charts and how to seamlessly integrate charts into your SwiftUI apps. Further, you will be able to unleash your creativity with advanced controls, including multi-column tables and two-dimensional layouts. You can explore new modifiers for text, images, and shapes that give you more control over the appearance of your views. You will learn how to develop apps for multiple platforms, including iOS, macOS, watchOS, and more. With expert insights, real-world examples, and a recipe-based approach, you’ll be equipped to build remarkable SwiftUI apps that stand out in today’s competitive market.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Using the Basic SwiftUI Views and Controls

Using the Basic SwiftUI Views and Controls

Technical requirements

What’s new in SwiftUI

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 a legacy UIKit app

Exploring more views and controls

Displaying Scrollable Content with Lists and Scroll Views

Displaying Scrollable Content 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

Using searchable lists with scopes

Exploring Advanced Components

Exploring Advanced Components

Technical requirements

Using LazyHStack and LazyVStack

Displaying tabular content with LazyHGrid and LazyVGrid

Scrolling programmatically

Displaying hierarchical content in expanding lists

Using disclosure groups to hide and show content

Creating SwiftUI widgets

Viewing while Building with SwiftUI Preview in Xcode 15

Viewing while Building with SwiftUI Preview in Xcode 15

Technical requirements

Using the live preview canvas in Xcode15

Previewing a view in a NavigationStack

Previewing a view with different traits

Previewing a view on different devices

Using previews in UIKit

Using mock data for previews

Creating New Components and Grouping Views with Container Views

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

Creating multi-column lists with Table

Using Grid, a powerful two-dimensional layout

Presenting Views Modally

Presenting Views Modally

Technical requirements

Presenting alerts

Adding actions to alert buttons

Presenting confirmation dialogs

Presenting new views using sheets and full-screen covers

Displaying popovers

Creating context menus

Navigation Containers

Navigation Containers

Technical requirements

Simple navigation with NavigationStack

Typed data-driven navigation with NavigationStack

Untyped data-driven navigation with NavigationStack

Multi-column navigation with NavigationSplitView

Navigating between multiple views with TabView

Programmatically switching tabs on a TabView

Drawing with SwiftUI

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

Animating with SwiftUI

Animating with SwiftUI

Technical requirements

Creating basic animations

Transforming shapes

Creating a banner with a spring animation

Applying a delay to an animation view modifier 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

Chained animations with PhaseAnimator

Custom animations with KeyframeAnimator

Creating custom view transitions

Creating a hero view transition with .matchedGeometryEffect

Implementing a stretchable header in SwiftUI

Implementing a swipeable stack of cards in SwiftUI

Driving SwiftUI with Data

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

Using Observation to manage model data

Driving SwiftUI with Combine

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

SwiftUI Concurrency with async await

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

Handling Authentication and Firebase with SwiftUI

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 users with Google Sign-In

Implementing a Notes app with Firebase and SwiftUI

Persistence in SwiftUI with Core Data and SwiftData

Persistence in SwiftUI with Core Data and SwiftData

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

Getting started with SwiftData

Data Visualization with Swift Charts

Data Visualization with Swift Charts

Technical requirements

Understanding the basics of Swift Charts

Customizing charts: axes, annotations, and rules

Different types of charts: marks and mark configuration

Histograms with data bins

Pie charts and donut charts

Interactive charts: selection

Interactive charts: scrollable content

Creating Multiplatform Apps with SwiftUI

Creating Multiplatform Apps with SwiftUI

Technical requirements

Creating an iOS app in SwiftUI

Creating the macOS version of the app with a new target

Creating a multiplatform version of the app sharing the same target

Creating the watchOS version of the iOS app

SwiftUI Tips and Tricks

SwiftUI Tips and Tricks

Technical requirements

Using XCTest to test SwiftUI apps

Using custom fonts in SwiftUI

Showing a PDF in SwiftUI

Implementing a Markdown editor with preview functionality

Other Books You May Enjoy

Other Books You May Enjoy

Index

Customer Reviews

5 (1)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

Implementing a stretchable header in SwiftUI

A stretchable header is a well-known effect where, on top of a scroll view, there is an image that scales up when the user slides down the entries.

An example can be found on the artist page of the Spotify app. But in general, it is so common that you expect it when a page has a big image as a banner on top of a list of items.

In this recipe, we’ll implement a skeleton of the artist page on the Spotify app, and we’ll see that this effect is easy to implement in SwiftUI too.

Getting ready

Let’s create a SwiftUI app called StretchableHeader and add the two images: avatar.jpg and header.jpg, which you can find in the GitHub repo at https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd-Edition/tree/main/Resources/Chapter09/recipe11:

Figure 9.17: Importing the images

How to do it…

We are going to implement two components, one for each row and the other for the header. The former...