Welcome to part 3 of this series of posts on beginning iOS Application Development. In part one, we got Xcode all set up and looked at how to use the documentation.

In Part 2 we created our first groundbreaking and impressive application that was neither groundbreaking nor impressive but it did work, so that’s something we can build on.

This week we’re going to do a couple of things to make our app a little more interesting. The first is that we’re going to set a custom background on our one and only view.

The second is that we’re going to make our button spit out a bunch of random quotes. These quotes are going to be hard-coded initially.

In a real world app, you’d want to look at getting Core Data involved and sticking them in a Database with relationships (e.g. Who said the quote originally) but that’s a little advanced for this.

Setting the background: Built In Options

Open up your HelloWorld.xcodeproj and head to the Storyboard editor.

In Xcode, there is no backgroundImage property. There is, however, a backgroundColor property and this can now take images as well as colours.

Make sure that the View is selected (not the View Controlleróthere should not be a blue outline around your view). You can check this by opening up the Document Outline (the little triangle at the bottom) and making sure that View is highlighted like so:

Make sure that the Utilities window is showing by clicking on the right-most button in the group of 3 View buttons, then click the Attributes button.

Finally, click the dropdown next to Background. Under Recently Used Colours there is a list of preset backgrounds. Some of these are textures, such as Group Table View Background Colour and Scroll View Textured Background Colour.

Setting the background: Custom Image

For this you’re going to need a background image that you’d like to use. I’m whipped up this shiny noise texture which you are welcome to download and use. Since I’m developing for a retina device, it’s a 640 x 960 PNG (although thinking about it now I probably could have just made it a 20 x 960 PNG and have it repeat. Learning as I go!)

Open the Project navigator window on the left, then drag your image into the root folder (in this case, HelloWorld).

You`ll be presented with these options:

Make sure that Copy items into destination group's folder is checked`, then hit finish.

Finally, open up HelloWorldViewController.m and then find the code snippet

1
2
3
4
5
6

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

}

And replace it with:

1
2
3
4
5
6

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [[self view] setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"your_background_image.png"]]];
}

Replace your_background_image.png with whatever the name of your background image (if you used mine, it’s background-noise.png).

What this code does

1. Runs the parent class’s viewDidLoad method.
2. Gets the view instance and runs the setBackgroundColor: method
3. Passes in a new UIColor object that is created on the fly and passes our image, itself a UIImage object (again created on the fly).

Randomising our Text String

Last week we created our Action for our button which updates the label text string. This week we’re going to update this code and make it return some random quotes.

Find the code from last week that looks like this:

1
2
3

- (IBAction)button:(id)sender {
    self.label.text = @"My New Text";
}

And replace it with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

- (IBAction)button:(id)sender {
    int r = arc4random() % 5;
NSString *text;
switch (r) {
    case 1:
        text = [NSString stringWithFormat:@"Hello, random number: %i", r];
        break;
    case 2:
        text = [NSString stringWithFormat:@"Case 2, random number: %i", r];
        break;
    case 3:
        text = [NSString stringWithFormat:@"Case 3, random number: %i", r];
        break;
    case 4:
        text = [NSString stringWithFormat:@"Case 4, random number: %i", r];
        break;
    default:
        text = [NSString stringWithFormat:@"Default, random number: %i", r];
        break;
}
self.label.text = text;
}

What This Code Does

1. We generate a random number using the built in C function arc4random(). Because we’re only going to have 5 options, we use the modulus operator (%) to make the number wrap around when it reaches 5, then we assign it to a an int variable r.</li>
2. We set up a new NSString object (don’t forget the * which indicates that this is a pointer)
3. We run a Switch on the variable r and provide cases for each of the values.
4. Within each case, we assign the NSString *text object a value.
5. If the number is 0, then we let the default case handle it. It’s always a good idea with a Switch statement to have a default: case to handle any unexpected incidents.

Things to Note

1. We use the %i placeholder within the strings to indicate that we are going to replace it with an integer, which is then declared after a comma following the string (in this case, it’s our integer variable r)
2. We then declare a break; after each case to stop the program executing the rest of the switch statement (if we didn’t, the default state would also be run and we would get unexpected output). Sometimes you’ll want the default to run as well as whichever case matched the parameter but here we don’t.

Boom. Random text generator.

This concludes this 3 part series on iOS Application Development. Feel free to replace the text with some better quotes, build out your archive and submit it to the App Store for $2.99 a pop.

Continuing with your iOS Application Development

• Ray Wenderlick has some great tutorials on iOS application development.
• There’s the famous Stanford iOS course, available free of charge on iTunes U.
• Finally, Apple has a great introductory course on iOS application development (you may need to be logged in to your developer account to access this one).