Roll the Dice
And what greater might do we possess as human beings than our capacity to question and to learn? -Ann Druyan
Overview
In this lab, you are going to make an app called DiceRoll that looks like this:
Instructions
This application may look complicated, but it's actually pretty simple. Here's what your app should do:
- Users should be able to press the button at the bottom of the screen that looks like a die.
- Pressing that button generates a random number. (Hint:
ViewController
contains arandomDiceRoll()
method that has already been provided to you.) - The black squares on the top half of the screen re-arrange themselves to show how that roll would appear on a die.
- The results of the last 6 die rolls are shown in the colored boxes in the middle of the screen.
- Neither black squares in the top half of the screen nor the colored boxes should be shown to the user until they have a value to display.
Sounds tricky! But believe it or not, you already know enough to complete this lab. Here are a few hints to get you started:
-
An Xcode project, complete with tests, has already been created for you. Open up
FunWithViews.xcworkspace
to get started. -
Views can be hidden. You can set a view as hidden in its Attributes Inspector, or you can use this code snippet in any method to hide and then show any view:
view1.hidden = true // hides the view view2.hidden = false // shows the view
The above code could be called from any method. (For example, you may want to hide the views in the
ViewController
'sviewDidLoad()
method.) -
The button's text is just this lovely emoji:
🎲
How It Looks
Before you get started, here are a couple examples of how your app should look in various states.
First, it should look like this at startup:
It should look like this after one roll of the die:
And it should look like this after the sixth roll of the dice:
What you do after 6 rolls is up to you. You can clear the screen and start fresh, you can just start filling in the score boxes from the left again, or you can even forbid the user from rolling the dice more than 6 times—it's up to you!
Now get started!
Getting Started
Well, okay. This is a pretty hard assignment, so we'll give you some hints on the path that you should take to get make this app. But we want you to find this lab to be challenging (and rewarding!), so you're only going to get the bare minimum of instructions for this one.
- Open up the Xcode project:
FunWithViews.xcworkspace
. The project already contains a basic storyboard and view controller. - Open up
Main.storyboard
to start designing your interface. - Open up
ViewController.swift
in an Assistant Editor pane. - You should first add the seven views representing the dice to the top half of the interface. You can drag these views from the object library onto the Interface Builder canvas, and arrange them as shown in the screenshots above.
- You should then add the six colored score labels along the middle of the screen. Remember: You can set their background color using the Attributes Inspector.
- Since you will be interacting with all thirteen of these views, you should configure IB outlets in
ViewController
so that the view controller can interact with them. Control-drag a connection from each of these thirteen views toViewController.swift
to create them. - These views should initially be hidden from the user, so you should do some setup in
ViewController
'sviewDidLoad()
method to hide them initially. - The main view already has a button configured at the bottom, but it is not hooked up to anything yet. Control-drag from the button to
ViewController.swift
to create a new IB action for the button. - The dice button's IB action needs to do several things:
- It needs to generate a random number from 1 to 6.
ViewController
already has a method,randomDiceRoll()
, that will generate this random number for you. - It needs to show and hide the appropriate black square views in order to display how that random roll would look on a real die.
- It needs to update the score labels with the result of the random roll. You can update score labels with code like this:
- It needs to generate a random number from 1 to 6.
func updateLabelWithRoll(roll: Int) {
let diceScore = String(roll)
if labelOne.hidden {
labelOne.text = diceScore
labelOne.hidden = false
} else if labelTwo.hidden {
labelTwo.text = diceScore
labelTwo.hidden = false
} else if labelThree.hidden {
labelThree.text = diceScore
labelThree.hidden = false
}
// .. and so on
}
This is a method called updateLabelWithRoll(_:)
that takes in an Int
as an argument called roll
. In our implementation, we look to see if the various labels (our UILabel
's are named labelOne
, labelTwo
, etc. in this example) are hidden which will let us know which one we should update with the new score.
The above work should be done in separate methods. For example, you may create a method called rearrangeDie()
that will show or hide the black squares, and updateScore()
that will update one of the score labels. Those methods should be called from the die button's IB action method, rather than having all the work done in one place. This is not necessary, but it will make your code a bit more organized, and it's a good habit to get into.
That is essentially all you need to do to make this die-rolling app work. Not so bad, huh? You're a bit on your own as far as figuring out exactly how to do all that work goes, but if you get stuck, refer back to previous lessons—they can help you finish up this lab in no time at all.
Good luck!
View View LifeCycle Lab on Learn.co and start learning to code for free.