Learn SwiftUI

An introductory guide to creating intuitive cross-platform user interfaces using Swift 5

Chris Barker

• Publisher: Packt Publishing
• Year: 2020
• ISBN:
  9781839210877
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

Get to grips with Apple's new SwiftUI framework for creating robust UIs for iOS and iPadOS using Swift programming

Key Features

• Use SwiftUI for building dynamic apps for Apple devices from scratch
• Understand declarative syntax in cross-platform development and how states work within SwiftUI
• Learn to develop watchOS apps by reusing SwiftUI code

Book Description

SwiftUI is the new and powerful interface toolkit that lets you design and build iOS, iPadOS, and macOS apps using declarative syntax. It is a powerful way to develop the UI elements of applications, which would normally be tightly coupled to application logic.

Learn SwiftUI will get you up to speed with the framework and cross-device UI development in no time. Complete with detailed explanations and practical examples, this easy-to-follow guide will teach you the fundamentals of the SwiftUI toolkit. You'll learn how to build a powerful iOS and iPadOS application that can be reused for deployment on watchOS. As you progress, you'll delve into UI and unit testing in iOS apps, along with learning how to test your SwiftUI code for multiple devices. The book will also show you how to integrate SwiftUI features such as data binding and network requests into your current application logic.

By the end of this book, you will have learned how to build a cross-device application using the SwiftUI framework and Swift programming.

What you will learn

• Explore the fundamentals of SwiftUI and compare it with existing UI frameworks
• Write SwiftUI syntax and understand what should and shouldn't be included in SwiftUI's layer
• Add text and images to a SwiftUI view and decorate them using SwiftUI's modifiers
• Create basic forms, and use camera and photo library functions to add images to them
• Understand the core concepts of Maps in iOS apps and add a MapView in SwiftUI
• Design extensions within your existing apps to run them on watchOS
• Handle networking calls in SwiftUI to retrieve data from external sources

Who this book is for

This SwiftUI book helps any mobile app developer looking to understand the fundamentals of the new SwiftUI framework along with the benefits of cross-device development. A solid understanding of iOS and macOS app development, along with some knowledge of the Swift programming language, will be beneficial. Basic programming knowledge is essential to grasp the concepts covered in the book effectively.

SwiftUI on watchOS

Welcome to Chapter 11! In this chapter, we are going to create our very own Apple Watch Companion app. For our iOS recipe app, we'll start by covering how we actually develop for watchOS and how Xcode interprets our Watch App within our current project.

We'll then create our Watch project and see how we can integrate it with our current project, reusing some of our existing code.

After that comes the good stuff. We'll look at how we can use the power of SwiftUI to easily create multiple watch interfaces with just a couple of lines of code and by dropping in with ease familiar syntax we've used earlier.

Finally, we'll hook up our iOS app and Watch App, and send newly created recipes straight over to our watch so that we can check our ingredients on the go.

The following topics will be covered in this chapter:

• Developing for watchOS
• Creating a watchOS project
• Using SwiftUI to create a list of recipes
• Passing data between our App and watchOS

Technical requirements

For this chapter, you'll need to download Xcode version 11.3 or above from the Apple Mac App Store. You'll also need to be running the latest version of macOS (Catalina or above).

Simply search for Xcode in the App Store, and select and download the latest version.

Launch Xcode and follow any additional installation instructions that your system may prompt you for. Once Xcode has fully launched, you're ready to go.

Developing for watchOS

Announced back in 2015, watchOS and Apple Watch was the most anticipated wearable to be released by Apple. With a Developer SDK straight from the word go, App Store apps could now allow users to have a companion in the form of an extension right on their wrists.

In this section, we'll delve a little into the understanding of how we start to develop for watchOS within our current Xcode project with the use of extensions. We'll learn a little about the history of watchOS and where it all started for developers.

Let's get started by understanding a little more about the watchOS framework, WatchKit.

What is WatchKit?

WatchKit is the framework developed by Apple that is used by developers to create watchOS apps. Unveiled at WWDC 2015 alongside Xcode 7 beta, developers were given the power to create companion apps that would run alongside their parent apps.

Initially, watchOS apps needed a parent app to work (or exist even), and they were built as an extension to the parent iOS project from within Xcode. Recently, watchOS branched off from this approach and with the birth of the App Store for Apple Watch, an independent watchOS app could be built.

For this book, we'll concentrate on building a companion app using iOS extensions as our method to implement this. We'll take a closer look now at what extensions are and how they sit within our project.

Understanding extensions

Extensions, particularly in iOS, aren't just for watchOS, they are used for many other components such as Today (widgets), photo sharing, custom keyboard, and audio.

Extensions are designed to allow interaction between the app and another UI element. Take the Today extension, for example —this is an external UI component that sits on your home screen in iOS, yet interacts directly with your app (and from within your app's project in Xcode).

You need to remember that extensions are not a permanent feature of your app, as a user can choose whether or not to interact with the extension or even enable it. Apple's guidelines suggest that when building an extension, think carefully about its design and make sure it looks like it belongs and functions how the user would expect it to.

The same applies to watchOS too, given how a user expects to interact with watchOS (for example, scrolling with the digital crown). User expectations should play a big part in how you think about and design your extension.

Next, let's look specifically at how watchOS works with extensions.

Extensions in watchOS

Although we're going to create a companion watchOS app within our current iOS project, watchOS is still an app in its own right. Apple initially took this approach as a view to eventually creating standalone apps, hence setting a base foundation for developers to build standalone watchOS apps going forward.

The app element of our companion (the WatchKit App) is just like we would expect. It has its own Assets.xcassets catalog; its own settings file, info.plist; and even its own Target so that we can run it as an app. But as we'll see in the next section, no code as such lives there.

The code is created separately in an Extension folder, which is specifically generated for the watchOS project. The WatchKit App is responsible only for the scene and interactions (such as buttons), and additional logic and execution are passed off to the extension to handle:

The preceding diagram shows how the WatchKit App interacts with the WatchKit extension.

All of this is great to know and forms a basic understanding of the watchOS architecture, but let's put it into practice. In the next section, we'll take our existing recipe project and start to create our very own watchOS app!

Creating a watchOS project

In this section, we'll start by taking our existing recipe project and through Xcode, we'll go through and, learn how to create a Watch App for iOS App.

Once we've done that, we'll take a look at the updated project structure, and, as per the previous section, we'll be able to see in more detail the separation between the WatchKit App and the extension.

Updating our project

Let's start by heading on over to Xcode and highlighting the project name at the top of the File Tree. With the project tree highlighted, take a look at the column to the right, which contains a list of projects and targets.

At the bottom of the column, you should see a + button. Click on this and you will be presented with an action sheet that says Choose a template for your new target.

Here, select watchOS from the top list and then select Watch App for iOS App:

Then, click on Next, where you'll be presented with the options for your next target. You might recognize this from Chapter 4, Creating Your First Application. The same principles apply, but we'll go th...

Table of contents

• Title Page
• Copyright and Credits
• Dedication
• About Packt
• Contributors
• Preface
• Getting Started with SwiftUI
• Understanding Declarative Syntax
• Building Layout and Structure
• Creating Your First Application
• Understanding Controls, Views, and Lists
• Working with Navigation in SwiftUI
• Creating a Form with States and Data Binding
• Networking and Linking to Your Existing App Logic
• Maps and Location Services
• Updating for iPad with NavigationViewStyle
• SwiftUI on watchOS
• SwiftUI versus UIKit
• Basic Animation in Views
• Animations in Transitions
• Testing in SwiftUI
• Other Books You May Enjoy