How To Make iPhone Apps – Creating The Demo App With XCode 4 And Interface Builder

Welcome to the final part of my series on How To Make iPhone Apps with no programming experience – where we’ll turn even the non-programmer into an iOS developer! Here’s the article index for the entire series in case you missed it.

In this part, we’ll put all of the things we learned in the previous parts into practice and build a dice roll app.

Editor’s note: This article is for XCode 4. If you’re looking for the XCode 5 version, click here

You Deserve A Pat On The Back

Seriously. If you’ve made it through all four of the previous parts in the series then the hard part is over. In this part, we’re going to have some fun and put together all the things we’ve learned into a dice rolling app. Let’s get to it!

1. Creating The XCode Project

Fire up XCode and let’s create our project! Go to File->New->Project… and you’ll be greeted with a menu where you can select a few different types of projects.

Select “Single View Application”.

Demo Dice New Project Settings

The product name is what you’re going to name your project. Don’t worry, you can still set the app name which appears underneath your app icon later.

The organization name should represent you or your company.

And you’ll notice that when you type those two fields in, it’ll form a Bundle Identifier for you.

This is a unique identifier for your application and it is usually in the format of com.organization_name.product_name.

The idea is that if you release another product, it’ll have an identifier com.organization_name.next_product_name.

Select iPhone for the device drop-down because our demo app will only be for the iPhone.

Leave “Use Storyboards” unchecked because our demo app is going to be a single view. Storyboards are useful when you have multiple views to navigate between but even then, using them brings disadvantages along with their advantages (I wrote a post about storyboard pros and cons). It is situational and will require further discussion in a future tutorial. For now, leave it unchecked.

You’ll definitely want to use automatic reference counting, so leave that checked.

And finally leave “include unit test” unchecked as we’ll visit iOS unit testing in a future tutorial.

And with that, click Next and choose a location to save your project!

2. Your New XCode Project Files

Now you’ll be presented with the XCode interface that we learned about in our XCode tutorial.

Let’s take a look at what files are created for us:

Demo Dice XCode Project Files

We see an AppDelegate.m and AppDelegate.h. Remember what you learned about Header and Implementation files? Together they form a class!

Ok, so we’ve got a class called AppDelegate however, it’s not like a normal class that we define and create instances of it. The AppDelegate class is the entry point to your application.

All we really do in the AppDelegate is to make sure that the first viewcontroller is set to what we want and we can also add some custom code to certain events like when the app starts, terminates, gets sent to the background or returns to the foreground.

The next class we’ve got is ViewController. If you remember from our MVC tutorial, a viewcontroller is what XCode calls the controller role in MVC.

We also have the corresponding view for our viewcontroller which is aptly named ViewController.xib. This is an interface builder file so when you click it, the editor area will reveal the visual designer.

Here’s how the AppDelegate, View and ViewController interact together:
XCode Project Files and MVC

If you remember the model-view-controller pattern, the viewcontroller handles the communication back and forth between the view and model, however there’s no model class in our XCode project currently!

3. Creating The Model Class

Let’s create our model class now.

Right click in the project navigation and choose “New File…”

This will bring up the template selector. Select “Objective-C” class.

Let’s name our data model “DiceDataController” and make it subclass NSObject.

XCode Create NSObject Dice Model

XCode will create a DiceDataController.h and DiceDataController.m file for us to represent our class. Open up the header file and let’s add a method that other classes can call in order to generate a dice roll.

If you remember from Part 1, this is a instance method called “getDiceRoll” that we expect to return an integer when we call it.

Now let’s flip over to the implementation file, DiceDataController.m, where we’ll write the code for the getDiceRoll method:

In this method, we’re declaring an int variable named “roll” and assigning it a number from the equation:
(arc4random() % 6) + 1

arc4random() is a math function that will give you a random integer and by modding it by 6, we’ll get an int from 0 to 5. Then we add 1 to get our desired die roll range of 1 to 6. Finally, we return the roll variable as the output of the method.

4. Instantiating DiceDataController in ViewController

Now we let our controller know about our model. Remember, in MVC the controller acts as the communication layer between the model and the view.

So go to ViewController.h (header file) and we’re going to add an import statement for our model so that ViewController.m knows about what methods are available for it to call in the model.

Next, we’ll create a property in the controller to hold an instance of the model.

Now that the property is created, we need to assign it an instance of our model before we can use it, so open up ViewController.m.

And in the ViewDidLoad method, we’ll allocate a new instance of our DiceDataController class and assign it to the property that we just created.

Now our model property is ready to use when we need it.

5. Creating UIViews To Display The Dice

Let’s create a UIView to show our die images.

Remember that a UIView is an Apple class that we can use to display things to the user. Go to your project navigator, right click and select New File. Make sure it’s a subclass of UIView and name it DieView.

XCode Create UIView DieView

Each DieView is going to show one die. Later when we construct our user interface (UI), we’ll add two instances of DieView on it to represent the pair of dice.

Go into the header file of DieView first (DieView.h). We’re going to declare a method that will allow another class to tell our UIView to display a die graphic of a number that we pass into the method.

In the code above, we’ve declared a instance method called showDie that accepts one integer parameter and returns nothing.

Our DieView is going to display an image so we’ll need a UIImageView property to represent that image. Let’s create a new property in our header file.

In the code above, we’ve called our property, dieImage.

Notice that there are two lines that start with “#pragma mark”. These are for the programmer to organize his/her code into sections for readability and navigation.

Adding the die images
Before we can display any die images, we need to add the images to our XCode project!

Note: The images can be found in the source code.

You can simply place the images in your project folder and drag them into the Project Navigator area of your XCode project.

Implementing DieView
Now, let’s jump into the implementation file and code our method (DieView.m).

In our showDie method, we’re going to check if our dieImage property is nil. If it is, that means that we haven’t assigned any UIImageView object to this property yet, so we have to create a new UIImageView object and assign it to the property.

Just to remind you, we’re going to use this UIImageView to display an image of the die representing a number.

As part of creating a new UIImageView object and assigning it to the property, we also have to place that UIImageView object into the UIView so that it is visible to the user. We do that using the “addSubview” method of the UIView as you can see below:

Remember that “self” refers to that instance of the DieView so “self.dieImage” is referring to it’s own dieImage property and “[self addSubview:self.dieImage]” is calling it’s own “addSubview” method and adding the UIImageView to it’s own view.

The next thing we do in that method is to construct the filename of the die image we should show. If you added the dice images to the project, you’ll notice that they were named “dice” followed by a number representing the numeric value of the die. Also, in this method, we accept a parameter of int type that specifies which die image we should show.

So in order to get the filename of the die image we want, we can simply concatenate the string “dice” with the int value that is passed in.

The string method “stringWithFormat” returns an NSString but allows you to specify a format that has some wildcard placeholders in it, and also specify some variables to put into those placeholders. In the line above, “[NSString stringWithFormat:@”dice%d.png”, num]”, the placeholder is “%d” and the variable we’re putting into that placeholder is “num”.

The resulting string that is assigned to our fileName variable will be dice[num].png where [num] is whatever number is passed into the method.

We’re almost done with our DieView class!

The last line assigns an image to our UIImageView element. The UIImageView object has a property called image that accepts a UIImage. So we can create a UIImage using the “imageNamed” class method and passing in our desired filename.

At this point, your project will look something like below. (Don’t worry if your images aren’t in their own folder like in my screenshot).
Demo App With XCode And Interface Builder Project Navigator

6. Creating The User Interface In Interface Builder

When we created the project, XCode added a XIB file for our ViewController class. If you click on this XIB file, XCode will change the Editor Area to the Interface Builder designer.

Within this designer, we’ll drag and drop our user interface elements onto the screen and then expose those elements to the code so that we can access and manipulate these elements from ViewController.m.

First of all, let’s make sure we’re all on the same page. You should see something like this when you highlight ViewController.xib in the XCode Project Navigator:

XCode Interface Builder Designer View

Don’t worry if you see two panes instead of one. You can toggle it with the Assistant Editor view button in the upper right hand corner of XCode.

Adding the background

Let’s change the background of this view. If you haven’t done so already, add the image “felt.png” to your XCode project. You can find this image from the accompanying source code files.

Once you’ve added felt.png to your project, you can type in “UIImageView” into the library search bar in the lower right hand corner (see screenshot below). This will filter the library for the UIImageView element and you can drag that element and drop it into your view. The UIElement will adjust to encompass the entire area and you should end up with a UIImageView like in the screenshot below:

XCode Interface Builder Designer View

In the upper right hand pane (the Inspector pane), there’s a field called “Image” with a dropdown that you can open up to find felt.png. Once you select felt.png, it will assign that image to the UIImageView that we just added to our view.

Did you notice?
Did you notice that what we’re doing here in Interface Builder seems similar to what we did in DieView earlier?

In both cases, we’re assigning an image from a file to a UIImageView for displaying to the user. In one case, we’re doing it purely through code, and in the other case, we’re doing it through Interface Builder with no code at all.

When we’re building our iOS applications, there are often times multiple ways to accomplish the same thing. In terms of building our user interfaces, we could have decided to do it purely through code without the user of Interface Builder at all.

On the flip side, we could rely heavily on Interface Builder and minimize using code to layout UI elements however, for very complex user interfaces, Interface Builder is not a good fit because it’s limited in what it can do.

Adding the text labels

Next, we’ll want to add a UILabel to show text in our user interface. Like before, search for “UILabel” in the library search bar in the lower right corner and then drag and drop a UILabel element into our view.

Once you place the UILabel into the view, adjust the size/position of the UILabel by clicking and dragging one of the little handles (the white squares surrounding the label). Then change the text and font color in the Inspector Pane like below:

XCode Interface Builder Designer Add UILabel

Next, we’re going to add another label to display the sum of the roll. Position this second label right under the first.

Adding the Roll button

Now let’s add a button. Search for “UIButton” and drag and drop a “Round Rect Button” element into the view. Change the button title to “Roll” and position it in the center, closer to the bottom of the view like so:

XCode Interface Builder Designer Add UIButton

Adding the DieViews

The last thing we have to add to our view are the DieViews that we created earlier. Remember that DieView is a UIView so what we’re going to do is add two UIView elements to our interface and then tell Interface Builder that those two UIView elements are actually instances of our DieView class.

Let’s start by adding two UIView elements. Search for “UIView” in the lower right corner of XCode and drag a UIView onto the interface. You’ll probably need to resize it via the Size Inspector (see screenshot). I resized it to 90px height and 90px width.

You’ll have to add another UIView to the interface and resize it and reposition it beside the first UIView.

Now the next step is to tell Interface Builder that these two UIViews are actually DieViews and we do this through the Identity Inspector.

Click on one of the UIViews you added and over to the right, click the Identity Inspector tab (see screenshot below) and click the Class dropdown to select “DieView” as your Custom Class.

XCode Interface Builder Designer Change UIView To Custom Class

Do this for both of the UIViews you added and just like that, you have two instances of DieView in your interface.

We’re pretty much done with the user interface now. Check that your Objects list looks similar to this (I’ve renamed some of them so it’s easier to tell which item represents which UI element. You can rename yours too by clicking on an item in the Objects list and pressing enter):

XCode Interface Builder Designer Objects List

7. Hooking Up The User Interface To Code

Now all we have to do is to hook up the user interface elements to our code so we can change what is displayed via code. This is a two step process:

-First we have to expose these elements to ViewController.m as properties and give them names so that we can refer to these elements from ViewController.m.

-Secondly, we have to handle the action of the user clicking the button and changing the images in the DieViews.

Ok, so let’s do the first:

IBOutlets: exposing interface elements as properties in ViewController

We can expose the UI elements we’ve created through Interface Builder by simply dragging and dropping. In the Navigator Pane, make sure that you’ve got ViewController.XIB selected so you should be seeing your user interface in the Editor Area. Next, make sure you have the Assistant Editor turned on so that your Editor Area is split into two panes.

The left pane is the user interface and the right pane is ViewController.h.

You’ll end up with something like this on your screen:
XCode Adding IBOutlet in Assistant Editor View

If you don’t have ViewController.h in the right pane, you can use the jump bar or the button in the corner of the right pane to select it.

Once you see that on your screen, it’s time to hold the “control” key, click on the sum UILabel item in the Objects list of Interface Builder and drag it over to the right pane, letting go right underneath the “@interface” heading.

You should see something like this:
XCode Adding IBOutlet in Assistant Editor View

When you let go, a little dialog will popup where you can name the IBOutlet that you just created. I’ve named it “sumLabel”.

XCode Adding IBOutlet in Assistant Editor View

Repeat the steps above to create an IBOutlet for both DieViews.

XCode Adding IBOutlet in Assistant Editor View

Remember to import “DieView.h” so that the class is recognized! (see below)
Your ViewController.h file should end up looking something like this:

XCode Adding IBOutlet in Assistant Editor View

You just created some IBOutlets to expose the Interface Builder elements to code. Essentially, you’re creating some properties that has an IBOutlet designation to indicate that they’re to be assigned from Interface Builder.

The drag and drop technique that you used to create them is just one of a few ways in which you can hook up Interface Builder elements to IBOutlet properties. An alternative is that you can manually type out the IBOutlet properties in ViewController.h and then just assign the UI Elements to these outlets through Interface Builder.

The next step is to handle the scenario when the user taps the “Roll” button.

IBActions: Handling user interaction in ViewController

In order to add an event handler to our code to handle the button click, we can use the drag and drop technique again except this time, make sure that ViewController.m is opened on the right pane because remember, implementation code goes in the implementation file.

XCode Adding IBAction in Assistant Editor View

Once you have ViewController.xib opened on the left pane and ViewController.m opened on the right pane, you can once again hold down the ‘control’ key, click the button in the Objects list and drag to the right pane. Let go in a free area and you’ll get a popup to give your IBAction a name. I named mine “rollButtonClicked”.

XCode Adding IBAction in Assistant Editor View

Just like IBOutlets are just properties specifically labeled to work with Interface Builder, IBActions are methods that are specially labeled to work with Interface Builder.

So now we’ve created a method to handle the scenario of a user clicking the button. Let’s write the code for our method!

8. Writing The Roll Method

In Part 4, we instantiated the diceDataController property so now we can use it in our roll method.

First of all, let’s create two variables and assign them some random dice numbers:

In the two lines above, we declare two int variables and call the getDiceRoll method of our data model to return two random dice numbers.

Next, we use the two DieView IBOutlet properties we created (the two DieViews we created in Interface Builder are assigned to these properties), and we call their respective “showDie” methods and pass in the random dice numbers:

This will take care of displaying the dice numbers on the screen.

Next we have to assign some text to the sumLabel UILabel.

Let’s construct an NSString representing the message we want to show:

Above, we’re constructing a string with the sum of the two dice numbers we rolled.

Finally, let’s assign this string to the text property of the sumLabel IBOutlet property we created:

Your “rollButtonClicked” method should look like this:

9. Roll Some Dice!

Click the Run button in the upper left hand corner of XCode and the iOS Simulator will launch if you don’t have any errors.

If you have some errors, don’t worry! Read what the error says, look at the line of code it’s specifying and see if you can figure out what’s wrong.

It could be as simple as a typo. Re-read this article and follow the steps carefully and if you still fail to find the source of the error, download the source code below and compare your code with my code!

XCode Build Error

If you see the iOS Simulator come up and dice showing up when you click the Roll button…

XCode iOS Simulator Dice Roll

Congratulations! You’ve just created a simple dice rolling application.

If that was your first iPhone application, then you’ve come a long way since Part 1!

Source Code
If your application doesn’t run or you’d just like to peek at the source code, you can go to my source code area and download the code under the “How To Make iPhone Apps With No Programming Experience” section.
Go To The Source Code Area

Let’s Summarize

In this part of the series, you’ve built an iPhone application from scratch!

Now you understand:
-Creating a data model
-Implementing a ViewController
-Creating a custom UIView
-Creating a user interface with Interface Builder
-Adding custom UIViews through Interface Builder
-Creating IBOutlets and IBActions
-Handling button clicks
-Implementing the MVC design pattern!

What’s Next?

This concludes the end of my beginner series, How To Make iPhone Apps With No Programming Experience.

I hope that you’ve enjoyed it and that it’s inspired you to continue learning iOS development and building iOS apps.

If you’d like to take the next step in learning iOS development with me as your mentor and alongside over 260 other like-minded individuals, please consider joining my video course. You can find out more details about it here.

And lastly, if you know someone who wants to learn iPhone and iPad development, please share this article with them and help me reach more people!

Let’s improve this article together!

I want to make this series and this article in particular the best and easiest to understand resource for beginners to learn how to develop iPhone apps. If you’ve got any feedback, good or bad, please let me know via the comments below so I can update parts which are confusing, add more examples and to continue updating this resource.

And if you’ve enjoyed this article or you know someone who might be interested in learning how to build iOS apps, please share this series with them. It’s targeted at the non-programmer (sort of like an iPhone application development for dummies book) so anyone you know will be able to pick this up and progress towards developing iPhone apps!