Mac Project – App Store Body

In this chapter, we will work on implementing the main body for the App Store project. In the previous chapter, we looked at the design of the App Store and more specifically the SideBar design. Then, we broke the SideBar down into all the necessary components required for our application requirements. We then implemented all the components using SwiftUI. At the end of the previous chapter, we only had a SideBar with some optional event tracking, but no content in the main body. The main section will be scrollable and showcase apps using icons and banners. Now we will analyze the main body, break it down into all the components it comprises, and implement all the components to provide an app store-like feel.

This chapter will be split into the following sections:

• Main body overview
• Implementing the main body
• Extra Tasks

By the end of this chapter, you will have created an app store template with a scrollable view to showcase...

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, 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:

• Includes SDKs for iOS 16, iPadOS 16, macOS 12.3, tvOS 16, and watchOS 9
• Supports on-device debugging in iOS 11 or later, tvOS 11 or later, and watchOS 4 or later
• Requires a Mac running macOS Monterey 12.5 or later

For further information regarding the technical details, please refer to Chapter 1.

The code files for this chapter can be found here:

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

In the next section, we will provide clarity on the specifications of our application’s design and look at mockups of...

Main body overview

In this section, we will take another look at the wireframes from Chapter 6 and break them down into their individual components. The wireframe images for the app store and the main body have been provided in this section. These images depict the layout and design of the app store and the main body.

Figure 7.1 – App Store view

Figure 7.2 – App Store main body

Before we code our application, we will break down the main body into the elements that comprise it. As a little task, see whether you can figure out what these are, but 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 in two main ways, firstly to showcase a particular app using a Highlight banner, and secondly to show a list/grid of applications. The following figures show the application icon and application highlight banner:

Figure 7.3 – App icon

Figure 7.4 – Banner

Text component

The Text component is one of the simplest components offered by SwiftUI. It allows you to display a string of characters/numbers, which is very useful for headings and providing information. We will use it for the following:

• App title
• Section description

In the upcoming section, we will proceed to develop the main body of our application using the SwiftUI components that we previously discussed. This implementation will be carried out with utmost precision and attention to detail.

Implementing the main body

In this section, we will complete the third project in this book by implementing the main body of our application. Our first step will be to code the Highlight banner, followed by the app icons.

Coding the highlight banner

Firstly, we will add the code for a Highlight banner. The banner is simply going to be an image that spans the width of the body; we will give it some spacing for aesthetic purposes. It is common to add multiple banners throughout the page to highlight different applications and have carousel banners, which provide the ability to showcase multiple banners in a single section through a transition such as sliding. We will implement a single banner; however, adding more is simple. Follow these steps:

1. Let’s start by adding a banner image. My image is 728x90 pixels. Feel free to modify this to suit your needs. Select Assets from the Project Navigator:

Figure 7.5 – Assets location in...

Coding the app groups

We will now implement the code to display app groups. These will contain an image representing the application icon and a label that represents the application name. Feel free to add more components to each group and arrange them as you see fit. I have added an app icon to the assets. I followed the previous steps to add images. Feel free to refer to those steps:

1. First, add the following code before the body:

   private let adaptiveColumns =[    GridItem( .adaptive( minimum: 300 ) )]

This will be used in our grid and ensures the items have a minimum size of 300. This is extremely useful as we don’t want them to become so small the user cannot see them.

2. Add the following code beneath the banner code we added in the previous section:

   LazyVGrid( columns: adaptiveColumns, spacing: 20 ){    ForEach ( 0..<20 )    { index in        VStack( alignment...

Extra Tasks

Now that the application is complete, here is a list of extra tasks for you to complete to enhance your application:

• An app page, to which the user navigates when they click an app icon
• Multiple highlight banners
• Updating the banner to be a carousel
• Different pages for the section in the sidebar
• Pulling data from an array or external source such as a database for the app metadata

In the next section, we will summarize what we have covered in this chapter, but first, we will look over the code to help with the extra tasks for this project.

Search Functionality

To add search functionality to the app, you can use the .searchable modifier provided by SwiftUI. Here’s the modified code with search functionality added:

////  ContentView.swift
//  App Store
//
//  Created by Frahaan on 21/02/2023.
//
import SwiftUI
struct MainView: View {
    @State private var searchText = ""...

Summary

In this chapter, we successfully implemented the main body for the app store application. We started by analyzing the wireframes and breaking down each element into SwiftUI components. We then meticulously implemented the SwiftUI components to match the design from the wireframe. We implemented a scrollable stack with a highlight banner and app icons. We also looked at a few extra task implementations at the end of the chapter.

In the next chapter, we will begin working on our fourth and final application, which is the fitness companion app for Apple Watch. Our focus will be on analyzing the design and breaking it down to gain a better understanding of how we can implement this application on our next platform.