Building a Photo Gallery app in SwiftUI

Introduction

Hi! Welcome to a new articles series in CodeWithChris! In this series, I will share my personal experience building a simple photo gallery app in SwiftUI.

Before we proceed, I want to let you know that I’m not, by any means, a SwiftUI expert. I started my SwiftUI learning journey a couple of months ago, but I have pretty good experience in UIKit. You can see me throw in some UIKit references here and there, but all of the code for the photo gallery app as well as the contents of this series are written in 100% SwiftUI.

This series is broken down into multiple posts where we’ll get to cover different topics and techniques for building the photo gallery app. I would recommend reading this series in sequential order so you can get a clearer grasp on the progress as you follow through the series.

In this series, we’ll use PhotoKit to gain access to the user’s photo library and fetch photos that are going to be shown in the app. PhotoKit is Apple’s framework that allows developers to work with image and video assets managed by the Photos app, including those from iCloud Photos and Live photos.

We will also discuss important topics such as memory management. Photos tend to consume memory quickly, especially if shown in a grid UI with a large user library. We’ll discuss how a photo consumes memory, the problems of having poor memory management, and how to use PhotoKit to handle these memory management issues for us.

There’s a specific SwiftUI view that we’re going to use to show the user’s photo library in a grid interface – the LazyVGrid. It has a built-in memory management mechanism that will load its subviews only when necessary, so loading a large library won’t cause an extreme amount of memory use. However, using this memory management mechanism alone is not sufficient to support the memory requirements of a photo gallery app. We’ll get to cover why as we go along the series.

The photo gallery app will be built in 100% SwiftUI. There won’t be any UIKit views that will be included as we develop this app. However, we will discuss some important memory management mechanisms of UICollectionViewController and UICollectionViewCells which are the UIKit equivalent of LazyVGrid.

We’ll discover the key differences between both, and use this learning to improve upon our LazyVGrid view to be more memory performant. It may sound quite complicated but the solution is surprisingly easy and simple.

After we build a memory performant photo grid UI, we’ll cover details on how to build the photo detail view. The detailed view will show a photo centred on the view with a black background. We’ll also add support for gestures such as the DragGesture, MagnificationGesture, and TapGesture to add finer controls to allow our users to inspect the photo in better detail. We’ll also discuss the challenges of adding the gesture such as panning a zoomed photo within the bounds of the view.

I’m thrilled to show you everything I learned about building this app, and I hope that you’ll enjoy learning about it as well!

Prerequisites

You don’t need to be a master of SwiftUI to read through this series but a fundamental knowledge of SwiftUI is required.

You also won’t need to have any UIKit experience. We won’t be using any UIKit in code, but there is a topic later on in this series about memory management mechanisms of UIKit views. Those are included only to explain concepts that will be crucial as we develop the app. I will try my best to explain the UIKit concepts as simply as I can.

If you had a hard time following this series, I recommend going through our 14-Day Beginner Challenge first to get you started with SwiftUI.

Up next

Part 1 of this series will show you how to create a service layer for PhotoKit that will do two things for us. The first is to ask the user’s permission to access the photo library, and the second is to fetch and cache photos from the library. We’ll also explore what could go wrong if we don’t have proper memory management in place. Hopefully that this got you excited to learn as well. I’ll see you at the next one!