How to Build a Simple iOS App: A Photo Album

In this post, I’ll step through building a simple iOS app. Theoretically, we’ll end up with an app that displays photos one at a time, steps forward and backwards through the collection, and shuffles the collection. This post will grow as my progress in building the app advances.

What does this have to do with indexes and indexing? Nothing more than the fact that we live in an app world and perhaps you’d be interested in seeing what’s involved in building a simple app.

This post has the following sections:

iOS is the operating system that runs iPhones, the iPod Touch, iPads, and Apple Watches. This post will step through the process of building an app that runs on all those devices by using the SwiftUI framework for interfaces instead of the older UIKit framework. One implication of this approach is that this app requires iPhones to run iOS 13 or later. Other than that, you don’t need to understand what SwiftUI is.

To follow along with this post and build your own app, you need:

  • XCode

XCode is Apple’s free development environment for building iOS apps. You can download it from:
https://developer.apple.com/xcode/.

I see from that link that XCode 13 is available; I’m running XCode 12. I don’t know what happens when a version earlier than 12 is used, and I’m guessing that versions 13 and later will work fine. XCode is a bloody big file and I’m on satellite Internet, so someday I’ll upgrade…

I like books and a good one for learning how to build an iOS app is iOS 14 Programming Fundamentals with Swift: Swift, Xcode, and Cocoa Basics by Matt Neuburg, which covers Swift 5.3, XCode 12, and Apple’s Cocoa framework. For those of you more up-to-date than I am, iOS 15 Programming Fundamentals with Swift: Swift, Xcode, and Cocoa Basics by Matt Neuburg covers Swift 5.5 and XCode 13.

I don’t know about the Neuburg iOS 15 book, but his iOS 14 book does not discuss SwiftUI; he only works with the older UIKit. Again with the SwiftUI versus UIKit. These two handle building and displaying the app interfaces, known as views. Views are what the app looks like to the world. This is an article that discusses the benefits of the new SwiftUI versus the older UIKit framework for building and displaying views.

Launching XCode

Let’s get started: Launch XCode.

XCode 12 opening screen

I’m guessing that you’re looking at an opening screen that has Create a new XCode project as a menu item; if so, click it. Otherwise, I don’t know what you’re seeing. Do you have a File menu? If so, under the File menu, choose New then choose Project.

XCode 12 template selection screen

Now you’ve got a screen that lets you select a template for the project. Select iOS and select App, as you see above, then click Next.

XCode product name screen

Now you have a chance to name this project. Type PhotoBook in the Product Name field. Spaces are okay in the Product Name, but don’t use any other punctuation. Ignore the Team field. The Organization Identifier field is probably blank and needs something put into it. The goal is to create a unique string identifying you or your organization. The convention is to start with com. and then follow that with a name, possibly with dot components that no one else is likely to use. This then creates the Bundle Identifier that you see below the Organization Identifier field. Every app submitted to the App Store needs a unique bundle identifier. This is explained the the Neuburg book or probably with a quick Google search.

Anyway, for Interface, select SwiftUI. For Life Cycle, select SwiftUI App. And for Language, select Swift.

Don’t put any checkmarks into the boxes at the bottom.

Click Next.

XCode 12 asking where to save project

Now XCode is asking where it should save the project folder and files. Navigate to where you want it saved; you can move the project folder any time. Do not put a checkmark into the Git box unless you truly want to create a Git repository.

Click Create.

Ta da! You just created an iOS app! You can go ahead and run this. Either click on the right pointing Run triangle in the upper left area or go to the Product menu and select Run. With any luck, you got a Build Succeeded message and the Simulator icon appeared on your dock next to the XCode icon.

If you click on the Simulator icon, a device should appear with Hello, world! on its screen. You’ve just created an iOS Hello World app.

Click back into XCode. You can stop the Simulator by clicking on the square Stop icon in the upper left area or go to the Product menu and select Stop. Go ahead and click back to the Simulator. It’s now just that device on its home screen. There is probably an icon for PhotoBook on the home screen. You can click it to run your Hello, world again. Now to quit, you’ll need to go back to the home screen, maybe by clicking a button at the bottom or whatever is appropriate for the device that is showing.

Click back to XCode to see how to select which device is running in the Simulator. And that really should be plural devices, because you can have more than one device running in the Simulator at one time.

XCode 12

I’m hoping your XCode screen looks enough like mine that we can keep going here. Just to the right of the Play and Stop buttons near the top of the screen is an area that says PhotoBook then the name of a device. On my screenshot above, the device is an iPhone 8. Click on that iPhone 8 or whatever device to drop down a list of available devices. Select a device and re-run the project, if you like.

When you need to open a project via the File menu, select Open, then drill down to the .xcodeproj file, the actual XCode project file, and click Open on that file.

Adding an Photo

All right then. Next we’re going to add a photo to this project and replace the Hello, world text with that image. Find a photo you want to add; all the major image formats are supported.

The photo I will be using is called DogsInPhotoBooth.png, a little 72 pixels/inch PNG file that is 504 pixels wide and 720 pixels high. I will be adding this photo to the XCode assets. In that XCode 12 image above, you’ll notice that in the line of icons below the Play and Stop buttons there is a folder that is red because it’s selected. Click on the folder icon in your XCode, if it isn’t already selected. This shows the files in the project folder. Click on the folder called Assets.xcassets.

XCode 12 Assets

In a Finder window, find the photo you want to add. Drag that photo into the XCode window.

XCode 12 assets after DogsInPhotoBooth.png added

Okay, now click on the ContentView.swift file in the left column.

XCode 12 ContentView.swift file

We’re reaching the heart of it now.

See those lines that say

           Text(“Hello, world!”)

                       .padding()

That’s what we’re going to replace, and this is what we’re going to replace it with:

           Image(uiImage: UIImage(named: “DogsInPhotoBooth”)!)

except that you should put in the name of your photo file where I have DogsInPhotoBooth.

Click the right-pointing Run button or go to the Product menu and select Run.

With any luck you’ll see Build Succeeded and then your chosen device will show up in the Simulator. Stop this Run then try selecting different devices to Run in. Notice how your photo looks in each. Some devices have smaller screens than others. Is your photo cut off in the smaller screens? Is it lost in a sea of white on the larger screens?

Let’s fix this by adding the following line below the Image line you added:

           .resizable()

resizable() added below the Image() call

Again, try running with various devices in the Simulator. Any better? Or does the photo seem stretched on the bigger screens and scrunched on the smaller screens? Okay then, one more line to fix this aspect ratio problem. Add this below the resizable() you added:

           .aspectRatio(contentMode: .fit)

An article on resize() and aspectRatio():
How to resize a SwiftUI Image and keep its aspect ratio

Apple documentation on SwiftUI Image

aspectRatio() added below resizable()

There we go. We have a one-photo photo book. Next: Buttons!

See my website 〠 See other articles

Spread the love