Watch Project – Fitness Companion UI

In this chapter, we will implement the activity button screen for the Fitness Companion project. In the previous chapter, we looked at the design of Fitness Companion and, more specifically, the Current Activity screen design. Then we broke the screen down into all the components required. We then implemented all the components using SwiftUI. At the end of the previous chapter, we only had a single screen that couldn’t be swiped. The main section will be swipeable and present the user with a list of buttons for controlling the current activity. Then, we will analyze the activity button screen, break it down into all the components it is composed of, and implement all the components to provide a fitness app-like feel.

This chapter will be split into the following sections:

• Activity button screen overview
• Implementing the activity button screen
• Extra tasks

By the end of this chapter, you will have created a...

Technical Requirements

This chapter requires you to download Xcode version 14 or above from Apple’s App Store.

To install Xcode, just search for Xcode in the App Store and select and download the latest version. Open Xcode and follow any additional installation instructions. Once Xcode has opened and launched, you’re ready to go.

Version 14 of Xcode has the following features/requirements:

• It includes SDKs for iOS 16, iPadOS 16, macOS 12.3, tvOS 16, and watchOS 9
• It supports on-device debugging in iOS 11 or later, tvOS 11 or later, and watchOS 4 or later
• You will require a Mac running macOS Monterey 12.5 or later

Download the sample code from the following GitHub link:

https://github.com/PacktPublishing/Elevate-SwiftUI-Skills-by-Building-Projects

Activity button screen overview

In this section, we will take another look at the wireframe from Chapter 8 and break it down into its components. The following figure showcases the activity button screen:

Figure 9.1 – Activity button screen

Before we code our application, we will break down the activity button screen into the elements that comprise it. As a little task, see whether you can figure out what these are. Don’t worry if you don’t know the exact UI component names; we will look at the components in the following section.

Image components

An Image component is one of the core components offered by SwiftUI. It allows you to display an image, which can be used to provide a visual representation or to aid a body of text. We will use it to display icons for buttons to control the current activity. The following figures show the icons from the application:

Figure 9.2 – Lock image

...

Implementing the Activity Button Screen

In this section, we will implement our application’s activity button screen and thus complete the fourth and final project in this book. Before we do this, we must implement a swipeable page system. The first page will contain the implementation from the previous chapter, and the second page will be the activity buttons. Naturally, you can use this to expand to as many pages as you require.

Swipeable Pages

In this section, we will implement our swipeable pages. Luckily for us, it is super simple to implement as many things as possible in SwiftUI. Simply enclose our current VStack in the MainView inside a TabView as demonstrated here:

TabView{
    VStack( alignment: .leading )
    {
        Text( timerString )
            .font( .title2 )
         ...

Summary

In this chapter, we successfully added the activity button screen to our Fitness Companion application. We began by analyzing the wireframe and breaking down each element into SwiftUI components. From there, we implemented the components to match the design from the wireframes. Through this process, we gained a deeper understanding of how to combine core SwiftUI components using stacks to create complex buttons. We finally looked at a few implementations for the extra tasks as well.

I want to express my gratitude for taking the time to read this book. There were moments when I questioned the purpose of writing yet another programming book, but ultimately, it was a worthwhile endeavor. I sincerely hope that you were able to gain something from it. If you have any questions or would like to contact me directly, please feel free to use any of the platforms listed here:

• Twitter: https://twitter.com/SonarSystems
• Email: [e-mail]
• Discord: https...