Book Image

Elevate SwiftUI Skills by Building Projects

By : Frahaan Hussain
Book Image

Elevate SwiftUI Skills by Building Projects

By: Frahaan Hussain

Overview of this book

Elevate SwiftUI Skills by Building Projects helps you harness the cutting-edge potential of SwiftUI and its innovative and user-friendly approach to crafting user interfaces for Apple platforms with the power of Swift. This book will enhance your UI programming skills with SwiftUI through a project-based methodology, guiding you to create four real-world projects. Starting with a quick recap of Swift and SwiftUI, you’ll gradually develop projects tailored for iPhone, iPad, macOS, and watchOS using Swift and Xcode. You’ll experience SwiftUI’s versatility in action as you build a tax calculator for iPhone and a photo gallery for the iPad, which uses a larger display to enhance the viewing experience. You’ll also create an app store for Mac and, finally, get to grips with the power of SwiftUI for smaller devices such as the Apple Watch by designing a Fitness Companion app. By the end of this book, you'll have built fully functional projects across multiple platforms and gained the expertise needed to excel as a professional SwiftUI developer.
Table of Contents (12 chapters)

Exploring the Sidebar components

In this section, we will implement the sidebar’s user interface. As a reminder, it will look like the following:

Figure 6.7 – App Store wireframe

Figure 6.7 – App Store wireframe

There are two main elements to the sidebar. As a little task, see whether you can figure out what they are. Don’t worry if you don’t know the exact UI components’ names; we will look at these components in the following sections.

Label item

A label item component simply displays an item within the sidebar that can be used as a button to navigate the application. It allows you to display a string of characters, numbers, or even icons, all of which can be used in conjunction with each other. For us, we will use them as dummy buttons inside of our sidebar:

Figure 6.8 – Sidebar item

Figure 6.8 – Sidebar item

SearchBar

A SearchBar component allows the user to search through a set list of components. For us, we will use it as a...