Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

Third Edition · iOS 18 · Swift 5.9 · Xcode 16.2

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Your First App: HIITFit

Section 1: 12 chapters
Show chapters Hide chapters

Section II: Your Second App: Cards

Section 2: 9 chapters
Show chapters Hide chapters

Section III: Your Third App: TheMet

Section 3: 5 chapters
Show chapters Hide chapters

13. Outlining a Photo Collage App
Written by Caroline Begbie

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Congratulations, you’ve written your first app! HIITFit uses standard iOS user interaction with lists and swipeable page views. Now you’ll get your teeth into something a bit more complex with custom gestures and custom views.

Photo collage apps are very popular, and in this section, you’ll build your own collaging app in which you’ll create cards to share. You’ll be able to add images — from your photos or from the internet — and add text and stickers too. This app will be real-world with real-world problems to match.

In this chapter, you’ll take a look at a sketch outline of the app idea and create a view hierarchy that will be the skeleton of your app.

At the end of Section 2, your finished app will look like this:

Final app
Final app

Initial App Idea

The first step to creating a new app is having the idea. Before writing any code, you should do research as to whether your app is going to be a hit or a miss. Work out who your target audience is and talk to some people who might use your app. Find out what your competition is in the App Store and explore how your app can offer something new and different.

Once you’ve decided that you have a hit on your hands, sketch your app out and work out feasibility and where technical difficulties may lie.

Your photo collaging app will have a primary view — where you list all the cards — and a detail view for the selected card — where you can add photos and text. This might be the back-of-the-napkin sketch:

Standing Tall
Back of the napkin sketch

In future chapters, you’ll set up the data model and data storage, but for now, examine the design and think about possible implementation difficulties that you’ll need to overcome. Always take a modular approach and test each aspect of the app as separately from the main app as possible.

SwiftUI is great for this, because you can construct views and controls independently using SwiftUI’s Live Preview. When you’re happy with how a view works, add it to your app.

Creating the Project

In the previous section, you began with a starter app containing all the assets you needed to create HIITFit. In this section, you’ll start with a new app, and you’ll find out how to add assets as you move through the next few chapters.

Creating the First View for Your Project

Skills you’ll learn in this section: ScrollView

Creating a List of Cards

Instead of cards, for the moment, you’ll show a placeholder list of rounded rectangles.

Refactoring the View

Skills you’ll learn in this section: refactoring views

Setting Up the Single Card View

A card will have a colored background to which you’ll add photos, stickers and text.

Transitioning From List to Card

Skills you’ll learn in this section: full screen modal

Creating a Full Screen Modal View

➤ In CardsListView, create a new property to track the modal presentation:

The Navigation Toolbar

Skills you’ll learn in this section: toolbars; NavigationStack; tuples

NavigationStack

Notice that the button doesn’t show up. This is because ToolbarItem(placement:) is using topBarTrailing, so any item will only show up if the view is inside a NavigationStack.

The Bottom Toolbar

The single card view will have four buttons at the bottom, allowing you to add elements to your card:

Adding the Bottom Toolbar

➤ Open SingleCardView.swift and add a new property to SingleCardView:

Adding the Other Buttons

➤ Open BottomToolbar.swift and add a new property to ToolbarButton:

Tuples

A tuple is a group of values. For example, you could initialize a tuple with three elements like this:

Adding Modal Views

Skills you’ll learn in this section: multiple modal sheets; Identifiable enumerations; Hashable

Making an Enumeration Identifiable

➤ Open ToolbarSelection.swift and conform ToolbarSelection to Identifiable:

Making an Object Hashable

You need a value that uniquely identifies an object. That describes a hash value. Hashing algorithms calculate values from any data to provide a digital fingerprint that identifies an object.

Cleaning Up

➤ Open BottomToolbar.swift, and in BottomToolbar, remove , id: \.self from the ForEach loop.

Challenge

Make it a habit to regularly tidy up the code and files in your app.

Challenge 1: Tidy up Files

Look down the list of files and see which ones you can group together. Command-click each file that you want to group together, then Control-click the selected files and choose New Folder from Selection. Name the folder. If you miss any files, just drag them into the folder later.

Challenge 2: Refactor Code

You don’t always have to create new structures for views. Sometimes, if it’s a simple view and you’re only using it once, it’s easier to keep track of views as properties or methods.

Key Points

12. Apple App Development Ecosystem
14. Gestures
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now