June 14, 2020

Design a simple dice roll app in ios swift

By Mohit Agrawal

A simple dice roll app tutorial designed for beginners

Dice Roll app in ios

Overview

If you are a beginner in iOS app development then you can learn many things just by designing a simple app only. Slowly you can move ahead with some advance design. In this tutorial, you be learning many new basic concepts like how to use image view, button, and simple animation in ios swift. Just by using these few UI elements, you can create a dice roll app in iOS. It is fun, right 😎?

Introduction

Let me show you first what we are going to design. So that you know what you are about to learn.

dice_demo
This is what you are going to design

As you can see in UI, it has only 3 UI elements. They are label, image view, and button. Also, you can see a simple animation while changing the dice faces. Let’s start the implementation part 🧑‍💻.

Implementation

Creation of the project

Create a new single view Xcode project in Swift and name it ‘dice roll app’. We will design the UI part after that we will move to the controller. So open the Main.storyboard.

UI design for dice roll app

dice roll app UI
Simple UI for dice roll app

Have you noticed that I am using a stack view? I am using two stack views. The first vertical stack view is acting as a parent container which is holding all the UI elements. The second horizontal stack view is holding both the image views together. The reason of using stack views is to reduce the number of constraints. You can design the same UI without using the stack views but I will recommend to use it.

Importing the assets

We need to import the image assets for the dice face. You can download the assets from here. Set all the image assets as shown in the below image.

dice roll app image assets

Connecting UI elements to ViewController

dice roll app view controller

Open the ViewController.swift and create the IBOutlets for the label and two image views. For button, create IBAction as shown in the screenshot above.

class ViewController: UIViewController {

    @IBOutlet weak var labelTotalSum: UILabel!
    @IBOutlet weak var imageViewOne: UIImageView!
    @IBOutlet weak var imageViewTwo: UIImageView!
    
    var sum = 2 {
        didSet {
            labelTotalSum.text = "The sum is: " + String(sum)
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        labelTotalSum.text = "The sum is: " + String(sum)
    }

    @IBAction func didTapRollDice(_ sender: Any) {
        rollTheDice()
    }
}

Now create a variable sum to store the total dice value as shown in the above code snippet. In didTapRollDice() I am calling a function rollTheDice(). Let’s see what is there in this function.

func rollTheDice() {
            let numberOne = Int.random(in: 1 ... 6)
            let numberTwo = Int.random(in: 1 ... 6)
            
            self.imageViewOne.alpha = 0
            self.imageViewTwo.alpha = 0
            
            UIView.animate(withDuration: 1) {
                self.imageViewOne.image = self.imageForDice(at: numberOne)
                self.imageViewOne.alpha = 1.0
            }
            UIView.animate(withDuration: 1) {
                self.imageViewTwo.image = self.imageForDice(at: numberTwo)
                self.imageViewTwo.alpha = 1.0
            }
            sum = numberOne + numberTwo
    }

In rollTheDice() function I am generating two random numbers and their values come between 1 to 6. Based on the value of this random number only I am setting the dice face. Here is the function which returns a dice image based on random number value.

func imageForDice(at number: Int) -> UIImage {
        switch number {
        case 1:
            return UIImage(named: "one")!
        case 2:
            return UIImage(named: "two")!
        case 3:
            return UIImage(named: "three")!
        case 4:
            return UIImage(named: "four")!
        case 5:
            return UIImage(named: "five")!
        default:
            return UIImage(named: "six")!
        }
    }

The function imageForDice() return the image for the dice image view. If you are facing any problem then please let me know in the comment section. Now we are done with the coding part also. Check the complete code for ViewController.swift.

//
//  ViewController.swift
//  Dice Roll
//
//  Created by Mohit Agrawal on 13/06/20.
//  Copyright © 2020 Mohit Agrawal. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var labelTotalSum: UILabel!
    @IBOutlet weak var imageViewOne: UIImageView!
    @IBOutlet weak var imageViewTwo: UIImageView!
    
    var sum = 2 {
        didSet {
            labelTotalSum.text = "The sum is: " + String(sum)
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        labelTotalSum.text = "The sum is: " + String(sum)
    }

    @IBAction func didTapRollDice(_ sender: Any) {
        rollTheDice()
    }
    
    func imageForDice(at number: Int) -> UIImage {
        switch number {
        case 1:
            return UIImage(named: "one")!
        case 2:
            return UIImage(named: "two")!
        case 3:
            return UIImage(named: "three")!
        case 4:
            return UIImage(named: "four")!
        case 5:
            return UIImage(named: "five")!
        default:
            return UIImage(named: "six")!
        }
    }
    
    func rollTheDice() {
            let numberOne = Int.random(in: 1 ... 6)
            let numberTwo = Int.random(in: 1 ... 6)
            
            self.imageViewOne.alpha = 0
            self.imageViewTwo.alpha = 0
            
            UIView.animate(withDuration: 1) {
                self.imageViewOne.image = self.imageForDice(at: numberOne)
                self.imageViewOne.alpha = 1.0
            }
            UIView.animate(withDuration: 1) {
                self.imageViewTwo.image = self.imageForDice(at: numberTwo)
                self.imageViewTwo.alpha = 1.0
            }
            sum = numberOne + numberTwo
    }
    
}


If you have done everything correct till here then you should be good to run your app. Now run run the app and see how it is working.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

Check out How to design a custom switch iOS?

android android beginners tutorial android tutorial Animation API call API call in iOS async asynchronous cardview custom switch custom ui dark web dark web links deep web deep web links Dynamic gradient view facebook messenger firebase hosting firebase hosting tutorial firebase remote config firebase tutorials flutter flutter for beginner flutter tutorial flutter UI tutorial hacking hacking tutorial hashcat iOS ios tutorial ios ui tutorial kotlin listview in flutter Lottie animation Messenger for kids review onion links Roll the Dice app swift tech news tor tor browser tor links UISwitch wifi wifi hacking