Learn to Code iOS Apps 4: Making It Beautiful

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:

It would look nice if you had some borders at the top and bottom of the screen — a nice checkerboard pattern has been provided 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.

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:

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:

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. 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:

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 imageNamed:@"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.

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 correctly 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 imageNamed:@"field_score.png"]];
  timerLabel.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"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:

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 MainStoryboard.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:

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:

Excellent! Now run the app and have a look.

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:

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:

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 palette, and set the RGB slider Red to 190, Green to 255 and Blue to 255, like so:

Now run the project! Will this be it?

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.