iOS Tutorial: Example project "Dice app"
Goal
Build an iPhone app to roll a dice:

Objectives
This tutorial will show you how to:
- Install Xcode and create a new iOS project
- Import images into the Xcode project
- Edit the storyboard and add UI elements to the view controller
- Create layout constraints
- Handle button taps with actions and outlets
- Writing code to roll the dice
- Running the app in the Simulator
Requirements
For this tutorial no previous knowledge of Swift / Xcode is required. To develop iOS apps for the iPhone/iPad using Xcode 11, you’ll need a Mac running at least macOS 10.14 Mojave.
Install Xcode and create a new iOS project
-
Open the App Store app and install the latest Xcode:
-
Start Xcode and check your Xcode version on the welcome screen:
-
If you already know how to create Xcode projects and import image assets, take a shortcut and download the starter project Dice-starter.zip with the images already set up and skip to adding the UI views.
-
Run Xcode and create a new project with File » New » Project ⌘⇧N. Select iOS » Application » Single View Application:
-
Configure the project settings:
- Name the app “Dice”.
- Use com.example as Company Identifier. This should be a domain name you own to prevent naming conflicts; feel free to use your own domain name.
- Choose Swift as Language.
- Choose Storyboard as User Interface technology.
- Uncheck Use Core Data and Include Tests (which are not needed for this tutorial):
-
Confirm with Next and choose a folder in which Xcode should create a "Dice" folder for the project.
Import images into the Xcode project
-
Download assets.zip which contains images for the project and uncompress the archive. Open Assets.xcassets in the Xcode project and drag the images for the dice into the project:
-
Add icon_60pt@2x.png and ...@3x.png as iPhone app icon:
Edit the storyboard and add UI elements to the view controller
-
Open Main.storyboard. You'll see the Initial View Controller of the app with an empty View:
-
Use the Library to add a Image View and a Button to the view (hint: you can search in the library by name). Double click or drag it from the library to the storyboard:
-
Place them like this:
-
Select the image view and choose one of the dice images from the Attributes Inspector. Use Editor » Size to Fit content ⌘= to resize the view to the size of the image:
-
Create layout constraints
To center the views on all device sizes, use a Stack View and Auto Layout constraints:
-
Select both views and use Embed in » Stack View to create a Stack View that stacks both views vertically:
-
Use Add Alignment constraints to create constraints that center the view horizontally and vertically in the container:
-
Use View as to switch to another device size and check if the layout still looks good:
Handle button taps with actions and outlets
-
Select the View Controller object and open the Identity Inspector. The class specified here contains the code responsible for managing the views of the controller:
-
Open the assistant editor to show the code next to the storyboard editor:
-
Drag with Ctrl pressed down / with the right mouse key from the Image View into the code of the class to create a new Outlet property that can be used to refer to the view in the code:
Name the outlet diceImageView:
-
Drag with Ctrl pressed down / with the right mouse key from the Button into the body of the class to create a new Action method that is called when the Button is tapped:
Name the action method rollDice:
Writing code to roll the dice
-
The view controller class should look like this now:
class ViewController: UIViewController { @IBOutlet weak var diceImageView: UIImageView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } @IBAction func rollDice(_ sender: Any) { } }
-
Inside the rollDice method, use the range feature of Swift to generate a random number. Keep the generated number as a constant declared with let:
@IBAction func rollDice(_ sender: Any) { let number = (1...6).randomElement() }
-
Check the returned type by ⌥-clicking the number constant:
The type is an Optional type Int?. In this case, the method always returns a value, but randomElement() could return nothing (nil) if it is called on an empty list.
-
Use the force unwrap operator ! to unwrap the optional - this can be used here because we can be 100% sure that there will always be a value and the method will never return nil:
@IBAction func rollDice(_ sender: Any) { let number = (1...6).randomElement() ! }
-
Load the image using UIImage(named: ...). You can use \(...) to insert a value into a string and load an image by name (the images are named dice-1, dice-2, ...):
@IBAction func rollDice(_ sender: Any) { let number = (1...6).randomElement()! self.diceImageView.image = UIImage(named: "dice-\(number)") }
Running the app in the Simulator
-
Select an iPhone Simulator for the Scheme and hit Run ⌘R:
-
The app starts up in the Simulator - test to roll the dice:
