How To Make A Dice Roll iPhone App

by Chris Ching

Now that you’ve gone through the beginner lessons, How to Make an App With No Programming Experience, this app should be simply extra practice.

1. Introduction

This Dice Roll app tutorial was actually the first CodeWithChris tutorial before even the War app that you already did.

That’s why there’s a special place in my heart for this app!

Here’s a short video clip of the completed app:

The Completed App

Let’s get started!


2. Xcode Project

Alright! Let’s launch a new project in Xcode and in the new project dialog box, make sure that you’re looking at the iOS tab.

Choose Single View Application.

Choose Single View Application for the Xcode Project Template

In the following project configuration screen, enter whatever you like.

Here’s what mine looks like:

Xcode Project Configuration

Hit the Next button and save the project where ever you’d like.

Now that you have your brand new Xcode project, in the left hand side File Navigator, select the Main.Storyboard.

We’re going to be starting with the user interface first.

Here’s what you should see on your screen:

Xcode Document Outline


3. User Interface

Next, in the lower right hand corner of the Xcode interface, there’s a pane called the Library Pane.

The Library Pane consists of several tabs. We’ll want to select the “Object” tab.

The Label

Once you select it, in the filter text box below the object list, type in the word “label” and it should filter the list of elements to the one we want:

Object Library Filter Box for UILabel

Click and drag that label element onto the view of your storyboard.

If you’ve done this properly, it’ll look like this:

Xcode Storyboard with UILabel

Don’t worry too much about the placement of it because we’ll be using something called “Auto Layout” rules to specify how these elements should be arranged on the view.

Let’s customize this label a little bit by changing the default text.

On the pane on the right hand side is called the Inspector Pane and it shows you information and configurable properties of whatever element or file you have selected.

Go ahead and select the label in your view.

Then in the Inspector Pane, change the text property of the label to show “The sum is:”.

Configuring the UILabel

The ImageViews

Next, let’s add some ImageViews onto our view.

Go to the Object library once again and type in “imageview” into the filter text box.

Object Library Filter Box for UIImageView

It should show us the “Image View” element. Click and drag this element onto your view.

When you drop it onto your view, it’ll have a few handles surrounding the element which you can use to resize it.

If you don’t see these handles, simply click on the UIImageView element on your view and the handles should appear:

Resizing the UIImageView

We need to make some room so that we can add a second imageview so click on the lower right handle of the image view and resize it so that it’s a square on the left side of the view.

Note: Resizing the imageview like this won’t result in it actually looking like a square. The actual size and placement is governed by rules called Auto Layout Constraints which we’ll be adding to these elements soon. We’re resizing it like this simply so that we have some space to drag and drop a second imageview onto the view.

Now drag and drop a second image view onto your view and resize it to a square using the handles, just like the first one.

Now your user interface should more or less like this (don’t stress over the positions and sizes at this point):

Storyboard with label and two image views

The Button

There’s one last element we need to add: the button to roll the dice!

Go back to the filter text box of the Object Library and type in “button”.

It should filter the list and show you the button element.

Object Library Filter Box for UIButton

Click and drag this element below the two imageviews.

Let’s configure this button by changing it’s button text.

Make sure the button is highlighted by clicking on it. This should change the Inspector Pane on the right to display the configurable properties of the button.

Look for a property called “Title”. It’ll say “Plain” next to it, which is fine.

However, below that dropdown, there’s a textbox with the default text of “Button”.

Change that text to “Roll”.

Configuring the UIButton

4. Auto Layout

Even though the elements look like they’re positioned correctly on our view, they’re actually not!

Xcode uses a system called Auto Layout to determine the size and position of elements and so far, we haven’t specified any Auto Layout rules!

First, we’re going to put the two image views into a horizontal stack view. If you’re not sure what a stack view is, just check out my lesson on Stack Views.

We’ll need to have both of the image views selected. It’s easiest to do this in the Document Outline where all of the elements are listed.

Simply hold down the cmd key on your keyboard and then click on the first imageview and then click on the second.

Now both of them should be highlighted like this:

[Photo]

Now that you have them both highlighted, we’re going to click on the Stack button to

5. Roll Button


6. Graphic Assets

Share
Tweet
+1
Share
Pin