Learn To Code iOS Apps 4: Making It Beau-Tiful: Mike Jaoudi

Learn to Code iOS Apps 4: Making It Beautiful | Ray Wenderlich http://www.raywenderlich.com/27191/learn-to-code-ios-apps...
Learn to Code iOS Apps 4: Making It Beau-

tiful
Mike Jaoudi on February 1, 2013
This post is also available in: French, Spanish, Polish
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. Learn how to make an iOS app.
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 pre-
vious 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:
1 de 33 21/01/14 21:31
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 pleas-
ing 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:
2 de 33 21/01/14 21:31
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 in-
clude 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:
3 de 33 21/01/14 21:31
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:
4 de 33 21/01/14 21:31
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:
5 de 33 21/01/14 21:31
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 down-
loaded them, or move that folder somewhere else. It’s a good practice to keep everything an Xcode project needs inside its di-
6 de 33 21/01/14 21:31
rectory.
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:
7 de 33 21/01/14 21:31
Buttons can have several different states in your application. There are four different states that your button can have: De-
fault, 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 Con-
fig 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!
8 de 33 21/01/14 21:31
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! :]
9 de 33 21/01/14 21:31
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
10 de 33 21/01/14 21:31
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
11 de 33 21/01/14 21:31
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:
12 de 33 21/01/14 21:31
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! :]
Image Frenzy!
You’ve just learned how to add images as button background images — but what if you don’t need a button and just want the
image? Image Views to the rescue! As the name suggests, an Image View is a view that can display images.
Awesome! Sounds like you can use an Image View to make your app look even better! Go into the object library and drag an
image view into the storyboard, like so:
13 de 33 21/01/14 21:31
It would look nice if you had some borders at the top and bottom of the screen — a nice checkerboard pattern has been pro-
vided for you.
Drag an Image View into the main view. Place one at the top of the main view, and one along the bottom of the view. You’ll set
the width and height more precisely in just a moment, so just roughly resize them to stretch across the width of the view and
make them a little shorter, as pictured here:
Super! Now you need to set the image to be displayed in each of the two Image Views. Click on the top image view and go to
the Attributes column. Set the Image to checker_top.png.
14 de 33 21/01/14 21:31
Now you’ll need to set the Image View to be the the correct size for your screen. Go to the Size tab. Set the Width to 320 and
the Height to 22.
That looks a bit better! Now you just need to do the same thing to the bottom Image View.
Click on the bottom image view and go into the Attributes column. Then set the Image to checker_bottom.png, as shown:
15 de 33 21/01/14 21:31
Now set the bottom Image View to the proper size! Go to the Size tab, and set the Width to 320 and the Height to 22.
Time to check out how things look in the app! Hit the Run button in the upper left corner:
16 de 33 21/01/14 21:31
So far so good! Your app is starting to look better — but that awful green color in the background is a real bummer, now that
you have your shiny new graphics in place!
Time to repaint the walls of your app! :]
Backgrounds, Revisited
In Part 1, you set the background color of the main view to green. While setting a background color is easy, there isn’t a real
easy way to set a background image right on the storyboard. Time to leave the world of storyboards for a bit and return to
the code!
Open up ViewController.m and have a look at the viewDidLoad method. Remember that this method is called right after all
the views are created. It is also called before all of the views are displayed on the screen.
Hm…this sounds like the perfect place to set up your background image! :]
When you wanted to change the text displayed in a label, you had to set up outlets with the IBOutlet keyword. Now, you
want to change the background of the view. Do you need to setup another outlet for the background image?
No — fortunately, the project automatically sets up an outlet for you, so you can go ahead and change the background color.
17 de 33 21/01/14 21:31
Update your viewDidLoad method like this:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor purpleColor]; // ADD THIS!!
[self setupGame];
}
Since this is a ViewController, self refers to the View Controller; the background view is view; finally, the view’s background
color is backgroundColor.
Note: In code, you refer to color by way of the UIColor class. Colors are typically stored as separate red, green and blue
(RGB) values, since any color can be those three basic colors in various combinations. Rather than mix and match color
values, UIColor has some built-in shortcuts such as purpleColor that you’re using here, just to make your life easy!
Wasn’t that nice of them? :]
Run your app! You should now see a nice purple background as below:
18 de 33 21/01/14 21:31
Wow.
Well, the good news is you now know how to set the background color from code.
The bad news? That purple looks horrible! I didn’t think it could possibly get worse than that neon green ;]
UIColor has one more trick up its sleeve: aside from solid colors, it can take any image and convert it to a pattern that you can
use in the background! If the image is smaller than the background, it will repeat or tile the image so it covers the entire view.
Perhaps that feature can save you from this purple haze? :]
Change the code for the background color in viewDidLoad to the following:
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage im-

ageNamed:@"bg_tile.png"]];
Rather than a specific color like green or purple, you’re calling colorWithPatternImage to get a pattern from an image.
Images are stored as UIImage objects, so here you are setting up an UIImage with the “bg_tile.png” image, which will be the
background for the app.
19 de 33 21/01/14 21:31
Run your app now — does it look any better?
Aww yeah — that looks a whole lot better! If you don’t see the nice background image, make sure the file name is spelled cor-
rectly in the code you changed above.
There are two more background images available for you to use in your app: one is for the timer label, and the other is for
the score label.
Add these two lines to the viewDidLoad method, just after the line you added above which sets the view’s background:
scoreLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage im-

ageNamed:@"field_score.png"]];
timerLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage im-
ageNamed:@"field_time.png"]];
The pattern is set in exactly the same manner, except the views use different images.
That’s it! Now run your project:
20 de 33 21/01/14 21:31
Whoa! This is problematic. The text was a little hard to read before — but now it is practically impossible to read!
If the background image is smaller than the view, UIColor will try to help you out by tiling, or repeating, the image; however, if
the background image is too large, it will be cut off.
Just as you set the “Tap Me” button size right in the storyboard, you can do the same for the two labels. Open up MainStory-
board.storyboard and select the timer label. In the Size tab of the Utilities sidebar, set the Width to 133 and set the Height
to 46, as such:
21 de 33 21/01/14 21:31
Now do the same thing for the score label. Select the score label, set the Width to 146, and then set the Height to 102, like
so:
22 de 33 21/01/14 21:31
Excellent! Now run the app and have a look.
23 de 33 21/01/14 21:31
Well, it’s a little better, but the text is still really hard to read! Perhaps a lighter color would work better for the text on a dark
background?
Open up Mainstoryboard.storyboard and select the timer label. In the Attributes tab, click on the black square next to
Color to open up the color palette, as below:
24 de 33 21/01/14 21:31
In the color palette, select the Sliders tab and then select RGB Sliders from the pulldown menu. This will let you enter the
red, green, and blue values for the label separately.
Set Red to 190, Green to 255 and Blue to 255, like this:
25 de 33 21/01/14 21:31
Note: After you set the color with the RGB sliders, the text might change to light blue or the entire label might turn into
a light blue rectangle. Either result is okay! The color is being set and remember, the background image will be set from
code in the viewDidLoad method.
Do the same set of steps for the score label. Select the score label, click on its color in the attributes to open up the color pal-
ette, and set the RGB slider Red to 190, Green to 255 and Blue to 255, like so:
26 de 33 21/01/14 21:31
Now run the project! Will this be it?
27 de 33 21/01/14 21:31
That looks great! Now not only have you made your first iOS app, but you’ve made a beautiful looking app! :]
Apps just aren’t about looks though — they need to sound great as well! To put the final polish on your app, you’ll be adding
some music and sound effects in the next section.
Adding Sound
Music and sound effects are great ways to add character to your app. There are three sounds you’ll use in your app: back-
ground music, a beep every time the player taps the button, and a beep for every second that passes on the countdown clock
— just to make the player sweat a little! :]
iOS supports all kinds of features such as GPS, accelerometer, and sound playback. Each of these features is bundled into
something called a framework. You’re already using a framework called UIKit, which includes views, view controllers, but-
tons, storyboards, etc.
To play sounds, there’s a framework called AVFoundaton that you’ll need to use. To add it to the project, click on the Tap Me
project at the top of the file browser in the left sidebar, as below:
28 de 33 21/01/14 21:31
Then click Tap Me under targets, and select the Summary tab:
Scroll down until you find a section called Linked Frameworks and Libraries. This is a list of all the frameworks currently in
your app. To add more frameworks, click the + (plus sign) button.
29 de 33 21/01/14 21:31
Whoa — that’s a lot of frameworks to choose from!
Find AVFoundation.framework in the list and select it. Then click the Add button, like this:
Awesome! Now the AVFoundation framework has been added to the project. You’re ready to get grooving with some sound! :]
The sound playback will be handled from the view controller code, so the first step is to set up the header file. Open up
ViewController.h. Near the top of the file, you’ll notice this line:
#import <UIKit/UIKit.h>
30 de 33 21/01/14 21:31
Hey, look at that! There’s the import statement for the UIKit framework. Add another import statement for the AVFoundation
framework so that the code looks like this:
#import <UIKit/UIKit.h>
#import <AVFoundation/AVFoundation.h>
Just as importing UIKit lets you use things like UIButton and UILabel, importing AVFoundation lets you use the very useful
AVAudioPlayer class.
Next, you’ll need an instance variable for each of the three sounds. Add a line for each instance variable as shown below:
@interface ViewController : UIViewController<UIAlertViewDelegate> {

IBOutlet UILabel *scoreLabel;
IBOutlet UILabel *timerLabel;
NSInteger count;
NSInteger seconds;
NSTimer *timer;
// Add these AVAudioPlayer objects!

AVAudioPlayer *buttonBeep;
AVAudioPlayer *secondBeep;
AVAudioPlayer *backgroundMusic;
}
That’s it for the header file! Time to get some sound playing. Open ViewController.m, and add this new helper method
above the viewDidLoad method:
- (AVAudioPlayer *)setupAudioPlayerWithFile:(NSString *)file type:(NSString *)type

{
// 1
NSString *path = [[NSBundle mainBundle] pathForResource:file ofType:type];
NSURL *url = [NSURL fileURLWithPath:path];
// 2
NSError *error;
// 3
AVAudioPlayer *audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error];
// 4
if (!audioPlayer) {
NSLog(@"%@",[error description]);
}
// 5
return audioPlayer;
}
This method will return an AVAudioPlayer object, and takes two arguments: a file name and type. Let’s look at what it does
section by section:
1. You need to know the full path to the sound file, and [NSBundle mainBundle] will tell you where in the project to look.
AVAudioPlayer needs to know the path in the form of a URL, so the full path is converted to URL format.
2. A NSError object will store an error message if something goes wrong when setting up the AVAudioPlayer. Usually noth-
ing will go wrong — but it’s always good practice to check for errors, just in case!
3. This is the important call to set up AVAudioPlayer. You’re passing in the URL, and the error will get filled in if something
goes wrong.
4. If something goes wrong, the audioPlayer will be set to nil, which you can check for with the exclamation mark symbol.
If that happens, the error will be logged to the console.
5. If all goes well, the AVAudioPlayer object will be returned!
Now that you have a handy method that will set up AVAudioPlayer objects, it’s time to use it! Add this code to the
31 de 33 21/01/14 21:31
viewDidLoad method just after setting up the background images:
buttonBeep = [self setupAudioPlayerWithFile:@"ButtonTap" type:@"wav"];

secondBeep = [self setupAudioPlayerWithFile:@"SecondBeep" type:@"wav"];
backgroundMusic = [self setupAudioPlayerWithFile:@"HallOfTheMountainKing" type:@"mp3"];
At this point in viewDidLoad, you’ll have all three sounds ready to be called in your code! :]
The first sound, buttonBeep, should play when the button is pressed. Update the buttonPressed method to play the sound:
- (IBAction)buttonPressed {
count++;
scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];
// add this line

[buttonBeep play];
}
Run the project to test it out. You should hear a nice beep when you tap the button!
There are two other sounds to add. The secondBeep sound should be played every second when the timer ticks down. Add
the call to play that sound in subtractTime method:
- (void)subtractTime {
seconds--;
timerLabel.text = [NSString stringWithFormat:@"Time: %i",seconds];
// add this line

[secondBeep play];
// ...the rest of the method continues here...
Run the project again to test it out. You should hear a different beep as the number of seconds counts down. You’re almost
done!
The final step is to add the background music. To play the music every time a new game is started, add the play code to the
setupGame method. Add this code to the bottom of setupGame:
[backgroundMusic setVolume:0.3];
[backgroundMusic play];
You can adjust the volume of the background music so the beeps can still be heard. The setVolume method will take a num-
ber from 0 (off) to 1.0 (full volume); 0.3 is a good starting point for the background music.
Now run the project — and experience the glory of your fully featured app!
Feels good to be awesome, doesn’t it? :]
Final Thoughts
Congratulations! You have just made your first iPhone app, and taken it from having very basic functionality, to being a pol-
ished looking and sounding app.
There are lots of things that you can modify in your app, such as adding or changing some of the graphics, adding different
difficulty levels, or even modifying the sound effects – the sky is the limit!
From here, you might want to try some of the other tutorials on this site. We have a ton to choose from – whatever your in-
terests may be.
In the meantime, if you have any questions or comments, please join the forum discussion below!
32 de 33 21/01/14 21:31
Mike Jaoudi
Mike Jaoudi is a Computer Science major at New York University. For the past couple of years,
Mike also worked as an Instructor and Curriculum Developer at iD Tech Camps for iOS App
Design and iOS Game Design. While at iD Tech, Mike discovered an enjoyment for teaching, as
he’s found that “when you teach you learn twice”. He is a fan of the BBC show “Sherlock” and
NCAA fencer. Check out his multiplayer snake game, Snakez. You can find Mike on Twitter .
33 de 33 21/01/14 21:31

Learn To Code iOS Apps 4: Making It Beau-Tiful: Mike Jaoudi

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learn To Code iOS Apps 4: Making It Beau-Tiful: Mike Jaoudi

Uploaded by

Copyright:

Available Formats

Learn to Code iOS Apps 4: Making It Beautiful | Ray Wenderlich http://www.raywenderlich.com/27191/learn-to-code-ios-apps...

Learn to Code iOS Apps 4: Making It Beau-

This post is also available in: French, Spanish, Polish

In Part 1, you learned the basics of Objective-C programming and you

Why Bother?! The Game is Done!

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

Images that Tell a Story(board)

Default – The button is not pressed

Highlighted – The button is pressed

Disabled – The button has been disabled and cannot be pressed

Now take a look at your fancy new game button!

Change the Width to 228 and the Height to 240.

Now set the Background to button_tap_selected.png

Time to repaint the walls of your app! :]

Update your viewDidLoad method like this:

self.view.backgroundColor = [UIColor purpleColor]; // ADD THIS!!

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage im-

Run your app now — does it look any better?

scoreLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage im-

That’s it! Now run your project:

Excellent! Now run the app and have a look.

Now run the project! Will this be it?

Whoa — that’s a lot of frameworks to choose from!

@interface ViewController : UIViewController<UIAlertViewDelegate> {

// Add these AVAudioPlayer objects!

- (AVAudioPlayer *)setupAudioPlayerWithFile:(NSString *)file type:(NSString *)type

5. If all goes well, the AVAudioPlayer object will be returned!

viewDidLoad method just after setting up the background images:

buttonBeep = [self setupAudioPlayerWithFile:@"ButtonTap" type:@"wav"];

scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];

// add this line

// add this line

// ...the rest of the method continues here...

Feels good to be awesome, doesn’t it? :]

You might also like

- (AVAudioPlayer )setupAudioPlayerWithFile:(NSString )file type:(NSString *)type