iPad Project – Photo Gallery Overview

In the previous two chapters, we created a Tax Calculator app for the iPhone. We implemented it from scratch, and we looked at the technical requirements, design specifications, wireframes, and code implementation. We will use these newly acquired skills in this and the next chapter, but worry not, we will go over all necessary aspects in case you have jumped straight to this chapter.

In this chapter, we will work on the design of our second project, a photo gallery application for the iPad that will showcase its big screen. We will assess the requirements for designing such an application and discuss the design specifications, allowing us to get a better understanding of what is required and how it will all fit together. Then we will start coding our application to build out the UI, which will be connected to the gallery’s enhanced view in the next chapter. This project will cover the foundations of SwiftUI components. We will...

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 download the latest version. Open Xcode and follow the 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 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 what the app will look...

Understanding the Design Specifications

In this section, we will look at the design specifications of our gallery application. This section describes the features we are going to implement in our gallery app. The best method for figuring out the features required is to put yourself in the user’s shoes to determine how they will use the app and break it into individual steps.

The features of our app we would like to present are as follows:

• Highlight view: This is the main view that the user will see, which showcases all the images.
• Enhanced view: This shows a larger version of the image along with information such as a description and a date.
• Fullscreen mode: View the image in fullscreen mode without any extra information.
• Fullscreen tap for more info: A single tap while in fullscreen mode will show the photo’s title.
• Collections: Different image collections, or albums:
  • Side panel: This shows all the collection names in horizontal mode.
• Delete...

Building the Gallery UI

We will now build the UI for the gallery app. There are three main parts of the gallery, the first being the highlight page, which is loaded on launch and shows all the images. Once the user clicks on an image, the user is taken to the enhanced page, which is the second part. On this page, a bigger version of the image is shown along with more information. Finally, the last part is fullscreen mode, which simply shows a selected image in fullscreen. Naturally, we will start with the first part, the highlight page, but before that, we will create our project. Follow these steps:

1. Open Xcode and select Create a new Xcode project:

Figure 4.5 – Create a new Xcode project

2. Now, we will choose the template for our application. As we are creating an iPad application, we will select iOS from the top, then select App, and click Next:

Figure 4.6 – Xcode project template selection

...

Summary

In this chapter, we covered the design of our photo gallery application for the iPad. We looked at wireframes and broke down each element into SwiftUI components. We then implemented the SwiftUI components to match the design from the highlight view wireframe. We also took a look at the requirements for building this application, and the design specifications a photo gallery application can have. Then we simplified it to the core features our app will provide. We expanded our design specifications with acceptance criteria to show what we would like our app to do.

In our next chapter, we’ll take a look at implementing the enhanced view based on the wireframe discussed in this chapter and connect it to the highlight view.