iPad Project – Photo Gallery Enhanced View

In this chapter, we will work on implementing enhanced view and page navigation functionalities in our photo gallery project. In the previous chapter, we looked at the design of the photo gallery and how it works uniquely due to it being developed for a large device. Then, we broke it down into two views and a fullscreen mode. Afterward, we implemented the first view, which was the highlight view. To do this, we figured out the components required. We then implemented all the components using SwiftUI. At the end of the previous chapter, we only had a fancy wireframe for the highlight view and no connection to another view. Now, we will create the enhanced view and implement all the functionality to provide navigation between the views and send image metadata between the highlight and enhanced views.

This chapter will be split into the following sections:

• EnhancedView Design Overview
• Updating HighlightView
• Testing...

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, then 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 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/tree/main/Code/Chapter%205%20-%20iPad%20Project%20-%20Photo%20Gallery%20Enhanced%20View

In the next section, we will look at...

EnhancedView design overview

In this section, we will implement the EnhancedView. If you recall, in the previous chapter, we discussed the design of the EnhancedView. The following figures show the portrait and landscape modes of the EnhancedView as a reminder:

Figure 5.1 – EnhancedView wireframe preview in portrait mode

Figure 5.2 – EnhancedView wireframe preview in landscape mode

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

Important note

The components are the same for portrait and landscape orientation.

The Text component

The Text component is one of the simplest components offered by SwiftUI. It allows you to display a string of characters/numbers...

Updating HighlightView

The first thing I will do is update the code to align with my coding standards; feel free to do the same. Now, we will add five state variables. One will be used to track whether an image has been clicked, and the other four will be used to pass data from the HighlightView to the EnhancedView. Add the code after the adaptive columns like so:

private let adaptiveColumns =[
    GridItem( .adaptive( minimum: 300 ) )
]
@State private var isClicked: Bool = false
@State private var imageFile: String = ""
@State private var imageName: String = ""
@State private var imageDate: String = ""
@State private var imageDescription: String = ""

Now, update the body to match the following code:

var body: some View{
    NavigationView
    {
        ScrollView
        {
    ...

Testing EnhancedView

In this section, we will finally get to test our application. Launching it up will take us to the HighlightView; click on any image and it will take you to the EnhancedView. The portrait mode will look as follows:

Figure 5.10 – Portrait mode

Rotating the application will result in the following output:

Figure 5.11 – Landscape mode

Now, our application is complete and features a navigational menu for going back to the HighlightView.

Note

If you require help with rotating the simulator, please refer to the previous chapter.

Extra tasks

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

• Use different source data:
  • Different images
  • Different title
  • Different description
  • Different date
• Load images from the internet
• Load metadata from the internet
• Extend the scope of supported devices to iPhone as well, thus providing you with the opportunity to consider cross-platform design
• Make the image fullscreen without any extra information
• Fullscreen tap for more info: A single tap while in fullscreen will show the photo’s title
• Collections: Different sets of images
• A side panel, which displays all the collection names, hidden in portrait mode, activated using a button; always visible in landscape mode
• Delete and rename: Allows the user to delete images from the gallery and rename them
• Sharing: The ability to share an image
• Different display modes: List and grid view

We will summarize what we have...

Summary

In this chapter, we covered the design of our EnhancedView using wireframes. These wireframes helped us break down the views into their components. We then implemented the SwiftUI components to match the design from the wireframe. Though the components were the same for the portrait and landscape orientation, we configured their positions and sizes accordingly. It is very important to make sure each orientation that is supported is best utilized in line with industry standards. We also updated the HighlightView to pass in data to the EnhancedView. This data was used to display content in components added in EnhancedView. Then, we covered extra tasks for you to undertake; feel free to look over this chapter again before proceeding. We have now completed our second application, which is ready for you to modify and use as you see fit.

In our next chapter, we will start our next application, the App Store for Mac. We will naturally look at the design and break it down to help...