How To Make A Dice Roll iPhone App

Now that you’ve gone through the beginner lessons, How to Make an App With No Programming Experience, this app should be 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:

Let’s get started!

2. Xcode Project

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.

In the following project configuration screen, enter whatever you like, hit Next and save the project wherever you’d like.

Now that you have your brand new Xcode project, select Main.Storyboard in the left hand File Navigator. We’re going to start with the user interface first.

3. User Interface

The Label

In the lower right hand corner of the Xcode interface, select the Object tab in the Library pane. In the filter text box below the object list, type label and it should filter the list to the element we want.

Click and drag that label element onto the view of your storyboard. Don’t worry too much about placement yet because we’ll use Auto Layout rules to specify how these elements should be arranged on the view.

Select the label, then in the Inspector pane, change the text property of the label to show The sum is:.

The ImageViews

Next, add some Image Views onto our view. Go to the Object library again and type imageview into the filter text box.

Drag one Image View onto your view and resize it so that it’s a square on the left side of the view. Then drag and drop a second Image View onto your view and resize it to a square, just like the first one.

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 button. Click and drag the Button element below the two image views.

Make sure the button is highlighted. In the Inspector pane, look for the Title property and change the default button text to Roll.

4. Auto Layout

Even though the elements look like they’re positioned correctly on our view, they’re actually not. Xcode uses Auto Layout to determine the size and position of elements and so far, we haven’t specified any Auto Layout rules.

Image Views into a Stack View

First, put the two image views into a horizontal stack view. It’s easiest to select both image views from the Document Outline. Hold down Cmd, click the first image view, then click the second.

With both highlighted, click the Stack button to put both UIImageViews into a Stack View. Xcode should detect that you want to stack these horizontally. If it stacks them vertically, change the Axis property of the stack view to Horizontal.

Highlight the stack view in the Document Outline and change the Spacing property to 40 so there’s a gap between the two image views.

Everything into a Stack View

Now put everything into a vertical stack view. This includes the label, the horizontal stack view containing the two image views, and the button itself. Select all three elements in the Document Outline and click the Stack button again. If needed, change the Axis property to Vertical.

Stack View Auto Layout Constraints

Now anchor this top level stack view to the edges of the screen with four Auto Layout constraints. Select the stack view, click the Add New Constraints button, uncheck Constrain to margins, set all four text boxes to 0 and click Add 4 Constraints.

You should end up with four blue Auto Layout constraints in the Document Outline. If you make a mistake, delete the four constraints and try again.

Finally, click the vertical stack view in the Document Outline and change the Spacing property to 50.

Connecting The Elements to Code

In order to write code that can access the elements we’ve added to the view, we need to expose these elements as IBOutlet properties.

Click the Assistant Editor button in the upper right hand corner to open the two-pane view. On your left should be the storyboard with the Document Outline. On the right, you should see ViewController.swift.

Hold down Ctrl, click the label element in the Document Outline and drag it into ViewController.swift above override func viewDidLoad. Release and name the new IBOutlet property label.

Do the same thing for each image view. You can name these properties leftImageView and rightImageView.

IBActions

IBActions are similar to IBOutlets but an IBAction is a function that lets you write code to respond to an event caused by an element. In this case, we’re going to connect the Roll button’s Touch Up Inside event to an IBAction function.

Hold down Ctrl, click and drag the button into the right hand code pane. Change the Connection dropdown to Action, fill in a name for the function, change the Type dropdown to UIButton, and click Connect. I named mine buttonTapped.

5. Graphic Assets

Now it’s time to add the graphic assets. You’ll be amazed at how much it can transform the app.

Download the zip file of graphic assets from the original tutorial page, then unzip it. You should end up with a folder called Images.

If you open the folder, you’ll notice sets of assets such as Dice1.png, Dice1@2x.png and Dice1@3x.png. These are three different sizes of the same image because iOS screens come in different resolutions.

Back in Xcode, select Assets.xcassets. This is the asset library where we’ll drag the image files into.

Select and highlight all of the image assets, but don’t select the icon folder. Drag and drop those image assets into the left column of the Asset Library.

Displaying The Images

Go back to Main.Storyboard and select the left image view. In the Inspector pane, choose any of the Dice images, such as Dice1, from the Image dropdown. Select the right image view and do the same with a different image, such as Dice5.

Adding The Background

Add a brand new Image View that sits behind everything. This will be the background. Drag it into the Document Outline between the root View and the vertical stack view so it sits behind the stack view that contains all the elements.

With the background image view selected, add four edge constraints to anchor it to all four edges of the View, then set its image property to the table image.

Customizing The Label and Button

The black label is hard to read against the green background, so select the label and change its color to White.

Now select the button and change its Image property to use the Roll image.

6. Writing Code

We’re almost there. Now we need to write the logic for the Roll button when it’s tapped.

Select ViewController.swift from the File Navigator. Scroll down to the buttonTapped IBAction function. In between the two curly brackets is where we want to write our code.

Changing The Label And Images

First we’re going to try changing the label and the images inside the image views. Put this code inside the function:

label.text = "Hello Dice"

leftImageView.image = UIImage(named: "Dice6")

rightImageView.image = UIImage(named: "Dice6")

All together inside the curly brackets of your function, it should look like this:

@IBAction func buttonTapped(_ sender: UIButton) {
    label.text = "Hello Dice"

    leftImageView.image = UIImage(named: "Dice6")
    rightImageView.image = UIImage(named: "Dice6")
}

In the first line, we’re referencing the label property connected to the label element on our storyboard. We assign the string Hello Dice to the text property of the label.

Then we assign a different image to the image property of each image view. We create a new UIImage object initialized to the image asset named Dice6, then assign it to each image view.

Run the project and click the Roll button. You should see the label change to Hello Dice and the two image views change to Dice #6.

Unfortunately, nothing happens when you click on the Roll button subsequent times because the same code is always running. We need to add a random aspect.

Adding Randomness

Modify the IBAction function and add some random numbers:

@IBAction func buttonTapped(_ sender: UIButton) {
    let numberOne = arc4random_uniform(6) + 1
    let numberTwo = arc4random_uniform(6) + 1

    label.text = "The sum is: \(numberOne + numberTwo)"

    leftImageView.image = UIImage(named: "Dice\(numberOne)")
    rightImageView.image = UIImage(named: "Dice\(numberTwo)")
}

In the first two lines, we’re using the built-in function arc4random_uniform to generate random numbers. The upper limit is 6, but the function generates numbers from 0 to 5. That’s why we add 1, turning the range into 1 through 6.

Then we set the label text using string interpolation: \(numberOne + numberTwo) inserts the sum of the two random numbers into the string.

Finally, we use the same interpolation technique to dynamically choose image asset names like Dice1 through Dice6.

Conclusion

If you did everything correctly, each time you click the Roll button, you should see the dice images change as well as the Sum label.

If you got this far, congratulations. I hope that you learned a lot from this tutorial. I made an effort to use lots of images, annotations and to point out potential pitfalls to give beginners a great experience building one of their first apps.

This specific project was one of the very first tutorials I published on my site and updating it made me think about how far the site has come. It’s all thanks to every one of you who is learning with me. Thank you!

7. Wall of Fame

By completing this tutorial, you’ve done more than 99% of the people who dream of building their own app but never take any action.

Source Code

Click here to download the source code for this project.

P.S. Leave me a comment below to let me know what you think about this tutorial, and comment below if you have any questions or other feedback. Thanks!