Learn to Code iOS Apps 4: Making It Beautiful

Learn how to make an iOS app.

Welcome to Part 4 of the Learn to Code iOS Apps series! This series introduces you to the basics of programming with the goal of creating an iOS app; no prior programming experience is required.

In the first three tutorials in the series, you learned the basics of programming in Objective-C, and making a simple iOS app. Specifically:

• In Part 1, you learned the basics of Objective-C programming and you created a simple command line number guessing game.
• In Part 2, you learned about objects and classes in Objective-C and you created a simple app to track people’s names and ages.
• In Part 3, the real fun begins! Here you took everything that you learned about Objective-C programming and created a simple iPhone game of your own.
• In Part 4 (You are Here!), you will take this app and make it beautiful, learning more about customizing the look and feel of iPhone apps.

In the previous tutorial in the series, you created a simple but fun game where you furiously tried to tap a button as fast as possible.

However, the app didn’t look all that good! In this tutorial, you’ll take that app and add some awesome-sauce to it :]

Specifically, you are going to learn how to add custom images and sounds to the game to give the player the sharp gaming experience they are used to from other iOS apps.

This tutorial will pick up where the last tutorial left off. If you don’t have it already, here’s the project you developed in the previous tutorial.!

Why Bother?! The Game is Done!

You may be thinking “Meh, why bother working on this anymore?! No new features are going to be added to the game. Why does the game need custom images and custom sound?! I have better things to do… like Xbox!”

Well, take a look at this next picture, and see if you still have the same impression:

Which app do you think someone would be more likely to buy? :]

The picture on the left is the end result of Part 1 — the image on the right is the result of adding custom graphics and sound. As you can see, the extra effort you’ll expend in this tutorial to extend your app will definitely be worth it – plus you’ll learn a lot along the way!

Adding custom images to your app will always give it a more polished and professional appearance. Remember, your app is competing with a million others; an app that is intuitive and pleasing to look at is almost as important as intuitive and pleasing code! :]

Double Density

To get started, download the resources for this project. Many thanks to Vicki Wenderlich for making these images!

After you download the file, unzip it and take a look at the images stored inside:

Notice how there are two copies of each image. The smaller image is used for devices with regular displays (older iPhones and iPads) and the other is scaled to double the height and width for Retina displays (the crisp display on newer iPhones and iPads).

The Retina display density is twice that of a non-Retina display, so a 20×20 image (with 400 pixels) needs a 40×40 image (1600 pixels) to take advantage of the high-quality Retina display. Newer iOS devices have Retina displays so it’s important to include these higher-resolution images.

What happens if you only include the normal resolution files, you ask? In that case, images in your app will look slightly blurry or blocky, as in the example below:

Handling multiple versions of graphics files must require extra coding, right? Nope! (Chuck Testa!) :]

Apple uses a special file naming convention where you just add “@2x” to the end of your file name before the extension. For example, if you have a file named image.png, the retina version would be named image@2x.png, as below:

Then when you’re writing code or using storyboards, just refer to the image name without the @2x added onto it. The app will figure out what kind of device it’s running on and automatically pick the retina version if it’s available! Pretty slick! :]

Getting Started

Start Xcode and open up the project from Part 1. Again if you don’t have it already, you can snag it here.

First, you’ll add all of the images and sounds to the project. To do this, select all of the items from the folder to where you downloaded them previously, and drag them into the area where all your files are in Xcode. It makes the most sense to put your graphical and sound resources in onto the Supporting Files group, as below:

Make sure that you check the box at the top that says Copy Items into Destination Group’s Folder, then click Finish.

By selecting the “Copy items” checkbox, Xcode will make a copy of all the images and store it in your project directory. This is important because it will make your project still work even if you delete the files from their original location where you downloaded them, or move that folder somewhere else. It’s a good practice to keep everything an Xcode project needs inside its directory.

Excellent! Now all of the sounds and images are in the project and ready to be used. Since you’re manipulating the new graphical elements of your project, it will make sense to work with them in your Storyboard layout! :]

Images that Tell a Story(board)

Below is your storyboard, just as you left it from Part 1 of this tutorial. The “Tap Me” button will be the first thing to get a makeover. Select the button and have a look at its Attributes in the right sidebar. Remember, the Attributes tab is the fourth from the left and looks like a little slider:

Find the State Config attribute for the button near the top of the list:

Buttons can have several different states in your application. There are four different states that your button can have: Default, Highlighted, Selected and Disabled.

• Default – The button is not pressed
• Highlighted – The button is pressed
• Selected – The button has been switched on, but does not have to be pressed. Used for “toggle” switches for example.
• Disabled – The button has been disabled and cannot be pressed

The ones you’ll use most often are Default and Highlighted – since they mean pressed and unpressed.

And indeed, the “Tap Me” button will have a different look for the Default and Highlighted states. Make sure the State Config is set to Default, and then set the Background attribute to button_tap_deselected.png. Remember, you are using the filename without the @2x added onto it!

Now take a look at your fancy new game button!

Uh…that looks terrible! The button has two overlapping titles! What’s going on here?!

Ah — the image AND the button both have text indicating the action. You need to turn off the button title. In the attributes for your image, delete the “Tap Me” text from the Title.

The button looks better -but the sizing is a little off. What should be a nice circular button is a little squished! :]

You could resize the button directly in the storyboard just by looking at it, but your design sense should be tingling at this point. Remember, you’re dealing with an image that has an exact size: 228 by 240 pixels, in this case. It makes sense to enter the exact size of the button right into the storyboard.

Make sure the button is still selected, and switch to the Size tab in the right sidebar. It is the second button from the right and it has a ruler icon:

Change the Width to 228 and the Height to 240.

Hey — the button image now looks great! Make sure to position the button on the storyboard to the center of the screen, and make sure it isn’t overlapping the other two labels on the screen.

Okay! Now that the size and positioning of the button is set, you still need to change what the button looks like when it’s pressed. To do that, you will use a different image to represent the depressed state.

Go back to the Attributes tab and set the State Config to Highlighted, as below:

Now set the Background to button_tap_selected.png

Great — it looks like your fancy new button is ready to go! :] Click the Run button in the upper left corner and see it in action:

Wonderful! Your app is starting to look a lot better with that one set of images added!

The rest of your app is looking a little dated in comparison, isn’t it? Time to give the rest of it a makeover! :]