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 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!

Imageviews into a Stackview

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:

Highlighting two image views

Now that you have them both highlighted, we’re going to click on the Stack button (See screenshot below to find the button) to put both of the UIImageViews into a Stack View.

Putting two UIImageViews into a Stack View

Xcode should be smart enough to detect that you want to stack these two imageviews horizontally. If instead Xcode put them vertically on top of each other, then simply change the Axis property of the stackview to “Horizontal” (You can see how to get to the configurable properties of the stackview below).

If you did it wrong, you can also press CMD+Z on your keyboard to “Undo”.

Now in the Document Outline you should see the stack view containing your two imageviews (you may have to expand the stackview node in the document outline to see the imageviews).

We’re going to change the spacing of the elements inside the stackview. Highlight the stackview by clicking on it in the Document Outline. This will cause the Inspector Pane on the right hand side to show you the properties of the stackview.

Change the Spacing property to 40 and you’ll see now there’s a gap between your two imageviews inside the stackview.

Changing the Stack View spacing

Everything into a Stackview

Now we’re going to put everything into a vertical stackview. This includes the label, the horizontal stackview (which contains your two imageviews) and the button itself.

Go to the Document Outline and just select all three elements by holding down CMD and clicking each one.

Highlight all three elements

Then click the Stack button just click you did before.

This time, Xcode should be smart enough to put all three elements in a vertical stackview. If not, change the Axis property of the stackview to “Vertical”.

Vertical Stackview

Stackview Auto Layout Constraints

Now we have to anchor this top level stackview to the edges of the screen. We’ll do this by specifying four Auto Layout constraints; one for each side.

First, select the stackview so that it’s highlighted.

Then in the lower right corner, you’ll see an Add New Constraints button. It looks like a square with a line on either side (See screenshot below).

Add New Constraints Button

Clicking that icon will open a menu that lets you easily add four edge constraints.

If the options are greyed out and there are no values in the textboxes in that pop up menu, that means you haven’t selected the stackview so select it first.

Adding 4 edge constraints

First uncheck Constrain to margins. This will ensure that the stackview can get to the edges.

Next, set all four textboxes to 0. What we’re saying here is that we want the stackview to be 0 pts away from each edge. Notice how the red lines connecting the textboxes to the center all get enabled as soon as you enter a value into the textbox.

Finally, click the “Add 4 Constraints” button.

Viewing Constraints in the Document Outline

You should end up with four blue Auto Layout constraints that you can see in the Document Outline.

If you made a mistake, simply highlight the four blue constraints in the Document Outline, delete them and try again.

Now, lets add some space in-between the vertical elements.

Click the vertical stackview in the document outline so that the configurable properties show up in the Inspector Pane on the right hand pane.

Then change the Spacing property to 50.

Now we should have something that looks like this:

Adding spacing for the Vertical Stackview

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.

There are multiple ways to connect the elements as IBOutlet properties and this part is by far the most common area for mistakes by beginners.

To keep things simple, I’ll show you one technique and I’ll also show you how to make a correction if you make a mistake.

Connecting IBOutlet Properties

Click on the Assistant Editor button in the upper right hand corner to open up the two pane view.

Opening the Assistant Editor

On your left should be the storyboard with the Document Outline and on the right, you should see ViewController.swift.

If you don’t see ViewController.swift on the right, make sure it says “Automatic” in the breadcrumb navigation (see screenshot above).

Now that you have both panes open, hold down CTRL on your keyboard and while continuing to hold CTRL, click the label element in the Document Outline and start dragging it into the ViewController.swift pane on the right.

Hover your mouse right above the line of code “override func viewDidLoad” and you should see a little message by your mouse that says “Insert Outlet or Outlet Collection”.

Connecting an IBOutlet Property

While still holding CTRL, release your mouse button and you should get a dialog box that will prompt you for the name of the new IBOutlet property.

I named mine “label”.

Configuring an IBOutlet Property

Click Connect and you should end up with an IBOutlet property like this:

Completed IBOutlet Property

Lets double check out work because a common rookie mistake is connecting the wrong element.

In the Document Outline, right click the label element to pop open a dialog (If you have a one button mouse, hold CTRL on your keyboard and click on the label element).

Double Checking Your IBOutlet Property

You should see a connection from the IBOutlet property name to the view controller like the above.

If you don’t then you might have accidentally connected another element (not the label) as an IBOutlet property. If this is the case, you’ll have to open up this dialog menu for each element, one at a time, and see which element you might have connected.

When you find the culprit, just click the “x” to break the connection, delete the IBOutlet line of code from ViewController.swift and try connecting the label again.

Breaking IBOutlet Connections

Common Mistakes With Connecting IBOutlets

Mistake #1: Making a typo with the IBOutlet property name

Sometimes when you’re naming the IBOutlet property, you might make a typo.

Many beginners will simply delete the IBOutlet property line of code and then try to reconnect the label element.

What they don’t realize is that the label is still connected to the typo version of the property.

You need to open up that connections dialog by right clicking the element in the Document Outline and then clicking the little “x” to break the connection of that element to the typo property that doesn’t exist anymore.

Mistake #2: Connecting the wrong element

Sometimes you might accidentally click and drag that blue line from the wrong element, resulting in creating an IBOutlet connection that is connecting the wrong thing.

If this is the case, you’ll have to delete the IBOutlet property line of code and then in your Document Outline, open up the connections dialog box for each element, one by one, and find out which element you accidentally connected.

When you find it, just click “x” beside that connection to break it. Now try to connect the label again.

Connecting The ImageViews

Now that you’ve connected the label, lets do the same thing for each of the image views.

I find it helpful to create some open space below the label IBOutlet so that I have some empty space I can drag elements to when connecting elements.

Click your mouse cursor to underneath the line of code for the label IBOutlet property and press “Enter” on your keyboard a few times to create some extra new lines.

First connect the left ImageView to an IBOutlet property. You can name this property to whatever you’d like.

Create some extra new lines underneath that outlet.

Then connect the right ImageView to an IBOutlet property.

You’ll end up with something like this:

All IBOutlet Properties

IBActions

IBActions are similar to IBOutlets but the difference is that an IBAction is a function that lets you write some code to respond to an event caused by the element connected to the IBAction.

So in this case, we’re going to connect the “Touch Up Inside” event (this is the event that occurs when the user taps on the button) of our Roll button to an IBAction function.

This way, we can write some code in the IBAction function to run anytime the Roll button is tapped on.

Connecting an IBAction is very similar to connecting IBOutlets which you’ve done already.

Hold down CTRL on your keyboard and while holding it down, click and drag the button over to the right hand side.

However, this time, we’ll want to drag the line lower.

Move your mouse to just above the line “override func didReceiveMemoryWarning()”.

Connecting an IBAction Function

While still holding CTRL, release your mouse button and you should get a pop up box to create a connection.

Configuring an IBAction Function

Be careful here, there are a few things to watch out for:

1. Change the Connection dropdown to Action
2. Fill in a name for the function. I named mine “buttonTapped”
3. Change the Type dropdown to UIButton
4. Click Connect

You should end up with something like this (I’ve highlighted the line in blue):

IBAction Function Complete


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 here.

Save the file somewhere accessible because we’ll need to add the images into the Xcode project.

Once you’ve downloaded the zip file, double click it to unzip it and you’ll end up with a folder called “Images”.

If you open the folder, you’ll notice that there are sets of assets such as Dice1.png, Dice1@2x.png and Dice1@3x.png.

This is simply three different sizes of the same image because iOS screens comes in different resolutions. Luckily, we simply have to supply the different sizes and the correct one is used depending on what type of screen the user has.

You’ll also notice another folder inside called icon. We’re going to ignore this folder for now.

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

The Asset Library is a place to organize our image files for the project.

Notice that the Asset Library has two panes. The left pane lists your image asset groups and the right side (empty right now) shows you the actual images inside that group.

The left column is where you’ll drag the images into.

Asset Library

Adding The Images

Go back to the folder with the image assets. I want you to select and highlight all of the other image assets (don’t select the “icon” folder).

Selecting the images

Now drag and drop all of those image assets into that left column of the Asset Library

Dragging and dropping the images

You should end up with something like this:

Asset Library with Assets

Displaying The Images

Now that you’ve added the images, we can go back to the storyboard and start displaying them!

Select Main.Storyboard from the File Navigator to go to your storyboard.

If your view is pretty small, there are zoom buttons near the bottom center of the screen on your storyboard.

Select the left imageview and check the right hand side Inspector Pane.

You should see a property called “Image”. Pull down the dropdown and you’ll see the image assets you added.

Choose any of the Dice images (such as “Dice1”).

You should see the image in your imageview now. Don’t worry if it looks stretched.

Select the right imageview and do the same. You can select a different image (such as “Dice5”)

Setting imageviews

Adding The Background

Next, we’re going to add a brand new imageview that sits behind everything. This is going to be our background.

In the Object Library in the lower right corner, filter for “imageview”.

Before you drag and drop this new imageview element onto your storyboard, I would suggest that you instead, drag it to your Document Outline because it’ll let you more precisely place it where you want it to go.

Specifically, we want this imageview to sit behind the stackview that contains all the elements since it’s going to be a background.

We need to insert it in-between the root View and the vertical stackview like in this image:

Adding the background imageview

Be careful that you don’t accidentally replace the root View itself. If you do this accidentally, just press CMD+Z to undo and then try again.

While this imageview is selected, lets go ahead and add some constraints to it so that we can anchor it to all four edges.

Click the Add New Constraints button and uncheck “Constrain to Margins”.

Constraints for the background imageview 1

Furthermore, I want you to pull the down the dropdown beside all four sides and make sure the neighbor is set to “View”. This will ensure that you’re specifying the constraint to be relative to the very edge of the view and not the margin or layout guides.

Constraints for the background imageview 2

After you do that for all four edges, set all four to zero.

Constraints for the background imageview 3

Then click “Add 4 Constraints”.

You’ll see your imageview stick to all four edges (if not, try deleting the four constraints and re-adding them).

While your background imageview is selected, go to the Inspector Pane and change the image property to the “table” image.

Background Image

Customizing The Label

The black label is hard to read against the green background so we’re going to change the text to a white color.

Select the label and in the Inspector Pane, change the color to White.

Changing color of UILabel

Customizing The Button

Now lets customize the way the button looks.

Select the button and go over to the Inspector Pane.

Change the Image property to use the “Roll” image.

Changing image of UIButton

6. Writing Code

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

Select ViewController.swift from the File Navigator.

Scroll down to the buttonTapped IBAction function (you may have named yours something else).

In between the two curly brackets is where we want to write our code so put some line breaks between them if you need to in order to create some space.

First we’re going to try changing the label and the images inside the imageviews.

Changing The Label And Images

Here’s the code I want you to put in between the curly brackets of that 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")
}

If you’ve gone through the Learn Swift beginner series, you’ll probably understand some or all of this code.

Let me explain what we’re doing here.

In line 3, we’re referencing the label property which is connected to the label element on our storyboard.

Just like how you set its “text” property in the storyboard to “The sum is:”, we can programmatically set it here through code as well.

So that’s exactly what we’re doing. We’re assigning a String, “Hello Dice”, to the text property of the label and thus changing the label to display that text.

In line 5, we’re doing something similar. We’re assigning a different image to the “image” property of the leftImageView. However, we need to assign a UIImage object into it so we create a new UIImage object and initialize it to the image asset, “Dice6”. Then we assign it to the image property of leftImageView.

Then in line 7, we’re doing the same thing as line 5 except we’re doing it to rightImageView instead.

Lets run the project and see the code in action!

Click the little “play” icon in the upper left corner of Xcode.

Running the Xcode project

Now Xcode will compile your code and run your app in the iOS Simulator. This may take a while for the first time.

When your simulator is launched, you’ll see your handiwork.

Click on the Roll button to execute the code you wrote in the IBAction function.

When you click it, you should see the label change to “Hello Dice” and the two imageviews change to Dice #6.

The iOS Simulator

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

Let’s modify our IBAction function a little bit 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)")
}

Ok, wow we changed a lot here! Let’s go through it line by line again.

In line 3, we’re using the built-in function arc4random_uniform to generate a random number.

Inside of the rounded brackets, you can specify an upper limit which we’ve set to 6. The only problem is that it generates a number from 0 to 5 and our dice numbers go from 1 to 6. That’s why I’ve added 1 to the generated number. Effectively this turns the random range from 1 to 6.

Then we’re taking that randomized number and assigning it to the constant “numberOne” so that we can reference it later on in the code.

In line 5, we’re generating another random number and storing it as “numberTwo”.

In line 7, we’re still setting the text of the label, except this time we’re using a technique to place dynamic data into the text.

This is done using the “\()” notation inside of the String where you place the dynamic data in-between the rounded brackets.

We’ve placed “numberOne + numberTwo” inside which is just the sum of the two random numbers.

In line 9, we’re using the same technique to dynamically specify the image asset name. By using this replacement technique, we’ll be able to specify the image assets “Dice1” all the way to “Dice6” because the random number is inserted into the asset name.

This is for the leftImageView.

In line 11, we’re doing the same thing except for rightImageView and instead using the other random number stored in the “numberTwo” constant.

It’s time again to run the project!

Conclusion

If you did everything correctly, each time you click on 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 hopefully 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 be think about how far the site has come.

It’s all thanks to every one of you who is learning with me. Thank you!

If you’d like to inspire others to learn app development and also to declare your victory, check out the Wall of Fame section below!


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.

Give yourself a pat on the back and then click the card below to send out a tweet to inspire others!

I’ll see your tweet and I’ll add your name below and a link to your Twitter profile.

I just finished building a Dice Roll app! Learn how to build your own: https://codewithchris.com/dice-roll-iphone-app @CodeWithChrisClick To Tweet

After you complete the tutorial, Click to Tweet above and pronounce your victory! I’ll add your name below:


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!
Also comment below if you have any questions or other feedback. Thanks!

86 Comments

  1. Chris,
    I have combed over dozens of tutorials and I say with no hesitation that yours are simply the best. Thank you for making it easy and fun at the same time.

    Reply
  2. Hello Chris and Team,
    I believe there is an error in the text… under the “Adding Randomness” section.
    The line that says “Inside of the rounded brackets, you can specify an upper limit which weโ€™ve set to 5.”, however the screen shot shows the argument/upper-limit is set to 6.
    I believe it should be 6. Then, as you explained, since an argument of 6 only returns numbers 0-5, you need to add 1 to the expression.
    Your YouTube channel and website is incredible. I cannot stop devouring the lessons on Swift and Xcode, and have now stumbled upon your Firebase videos!
    Do you have any videos on setting up an Apple Developer Account and then successfully getting an app on the Apple Store? I have found other people’s videos… but they are bad. I bet yours would be best! So far, I have not found it.

    Reply
  3. Hey Chris,
    This lesson is great! I learned a lot, and managed to follow along just fine.
    However, there is one issue. When I tried to run the app, it sometimes comes up with only 1 image .
    Any help???

    Reply
  4. also, in my code, it states that i am rolling numbers and getting them randomly generated, however, nothing appears in the boxes on my screen. Just confused is all because i have followed step by step and everything is functioning except for this.
    thanks, Colin

    Reply
    • Hey Colin, you should be able to use your own PNGs. Just add them to the asset library and take note of what name you gave the asset in the library because you’ll be referring to the asset with this name as opposed to the filename.

      If the images aren’t showing up, try hardcoding the images so instead of trying to construct the image name and assigning it to the image view, try something like

      [your image view].image = [UIImage imageNamed:@”die1″];

      Substitue “die1” for whatever your image asset name is and [your image view] should be the property or variable that is pointing to your image view element.

      Reply
  5. if i use my own dice pictures (png) will that change anything or should everything work the same? I’m only saying this because I’ve completed the tutorial to the part where you run it in the simulator, and when i click the button to roll, no dice images appear at all.
    Thanks, Colin

    Reply
  6. Hey Chris,
    This lesson is great! I learned a lot, and managed to follow along just fine.
    However, there is one issue. When I tried to run the app, it came up with several issues.
    How can I fix these? I’m sure it’s just some typo.

    Thanks heaps!
    Joel.

    Reply
    • Never mind that, I managed to fix it. But, it now shows a different issue. The app builds successfully, yet when I click the ‘Roll Button’, it shows the following. Something to do with Thread 1 and breakpoints. It seems to have an issue with the NSString line, the method code that tells dieImageView what image to pull up. Very frustrating because it seems like it would be a simple thing to fix. The image below is what pops up when I click the ‘Roll Button’, the debug window shows a tonne of information that I don’t understand.
      Appreciate your help!

      Thanks,

      Joel.

      Reply
      • Wait, I read Skyler’s issue and realised that the breakpoints are the problem. removed them, and the app works fine. Thanks Chris!!

        Reply
  7. Feedback: awesome!
    The Dice Roll App tutorial is absolutely essential to your beginner series. I found that it culminated almost all of the abstract concepts I have learned so far. Initially, after completing your beginner series, I was left with many abstract ideas loosely floating around in my “understanding”. This can be an unnerving feeling for learners and leave them feeling perplexed and questioning the purpose of their learning. The Dice Roll tutorial made many links to those “floating” ideas and grounded them into a more solid foundational understanding. It was interesting finding myself being able to predict roughly what code you were going to type next and where; I was even able to track, troubleshoot and solve a couple of my own errors!!
    I am a trained primary teacher in Australia and must say that I am very impressed with the pedagogy of your approach so far. I am now strongly considering trialing your paid tutorials.
    Thanks, Chris!

    Reply
  8. Hi! I’m in the middle of Part 4 and I tried running the app but it doesn’t work. The debugging window shows but I’m not quite sure whats wrong. If you could help that would be great!

    Reply
  9. Hey, Chris! I have made it to 2:45 in 4th EP of this tutorial! When I try to launch the iPhone sim, it opens and when i click the “Roll” button it just goes to xCode and shows this green code. This keeps happening with other apps too. Please help!

    Reply
  10. Hey Chris!
    Great stuff! Thanks a lot for these tutorials. I’m having no problems understanding the app flow and MVC concepts. All the steps we take during these video practices are clear and logical.
    But what I do have problems with is the Objective C syntax and the knowledge of the built in methods and properties. Is there going to be tutorials on this further on or should I read/practice some other material on the Objective C per-se?

    Reply
    • Hey Alex, thanks for reading!

      Unfortunately there are so many classes and methods and properties that you only really remember the stuff you use most often.

      The rest of the stuff can be looked up via apple documentation or Google.
      The stuff you’re struggling with will come with time! Just keep practicing with different tutorials and you’ll start to recognize the syntax!

      Reply
    • Hey Johnny, In the above screenshot, it looks like you’re missing a “}” right BELOW the second “return self;”.

      Each method looks like this:
      – methodName
      {
      }

      So it starts and ends with a curly bracket.

      Inside your initWithCode method, you see that “if (self) {” line?
      That must end with a curly brace too. So it would look like:
      if (something)
      {
      }

      Did you follow the BASICS series before trying this Dice Roll series?
      You’ll need the skills learned in the BASICS series so you know what you’re typing in here!

      In the course, about 75% of people don’t have any programming experience! It starts from the beginning and teaches you the skills you need.

      Let me know if you get stuck again on the dice roll tutorial! And check out the basics series first if you haven’t!

      Reply
      • ok thanks, yeah i think i must have jumped ahead on the dice roll without noticing?!
        while i am here though id like to finish this hence i am still getting errors, see picture.
        thanks again.

        Reply
        • Hey Jonny, unfortunately there are a lot of typos in the code. The code is case-sensitive so it matters if it’s lower case or upper case.

          I would suggest starting over and paying closer attention to the position of brackets and whether each letter is uppercase or lowercase.

          This time when you are following along, run the app after every change you make so you’ll know immediately if you have typed something wrong.

          Reply
  11. hi, great course but i do not know why i am doing what i am doing, i have zero programming experience and wonder if i will grasp it? it seems very complicated, hence i have some errors even though the code is exactly how you stated in the video.
    hoping your paid course will help me grasp it if i persevere?
    cheers mate

    Reply
    • Guest,
      If you have not already, I recommend completing Chris’ beginner course first and then working through his Dice Roll App tutorial. I felt the same as you initially, but the various opportunities provided to practise help to tie it all together. Yes, as with all learning, I have found that perseverance is paying off. Good luck!

      Reply
    • Hey Skyler, I’m glad you reached out! From the screenshot, i can see that your DieView.m has two errors.
      1. Can you remove the “@” in front of “self” in error line?
      2. Can you correct “addSubbiew” to “addSubview”?

      That should take care of those two errors. Please run it again and let me know what other errors you get if any!

      Thanks

      Reply
        • Hey Skyler, thanks for getting back to me!

          It’s really sensitive to upper case or lower case. It matters!
          Here are the new things to fix:
          -In DieView.m, the code “initwithFrame” should be “initWithFrame”.
          -In DieView.m, the code “self.DieImageView” should be “self.dieImageView”

          Next, I suspect that you’ve got some errors in your .h files. Can you also show me ViewController.h and DieView.h?

          Reply
          • No worries Skyler, I’m glad you have the patience to solve it together! I’m sure you’ll learn from this!

            I think we’re really close! Change these:
            -In ViewController.h, change “UIView SecondDieView” to “DieView SecondDieView”
            -In your storyboard, please check that the 2nd die view’s custom class dropdown in the attributes inspector is set to DieView class. I think you did it correctly for the 1st die view but you may have missed the 2nd die view.
            -In DieView.h, change “DieImageView” to “dieImageView”

            Let me know how that goes!

          • Hey Chris so I got all of the code to work and I pulled up the simulator and the app just shows a black screen but when I press the home button it shows the app and the icon but when I click it there is no app it is just black. So does that mean I did something wrong with my code?

          • Hey Skyler, in your screenshot, do you see that little blue marker beside your line of code? That’s called a “breakpoint” and it pauses the app execution so that’s why you see a black screen.

            All you have to do is click and drag that blue marker OFF of the sidebar and i’ll disappear. Then re-run your app!

            If you see other blue markers, just click and drag them off of the sidebar.

            Breakpoints are used for debugging your code and you can learn more about that in my course!

          • Correct me if I’m wrong, but isn’t it just because the property was made as ‘SecondDieView’, but in ‘ViewController.m’, he typed it as ‘secondDieView. I think he missed the upper case ‘s’.

  12. Hi Chris! I’m having trouble getting your app icon to drag into the iPhone App iOS7 60pt box like you did at 1:08 in your fifth video, the error message I get says “multiple errors occurred while removing files.” and when I click the yellow triangle to view the problem it says “The file ‘untitled-1.png’ for the image set ‘Untitled-1-1’ does not exist” any insight? Thanks in advance!

    Also, I’m loving your tutorials, keep up the amazing work! ๐Ÿ™‚

    Reply
    • Hey Will, hmm i’ve never experienced it myself. Have you tried removing all the assets from the asset catalog and re-adding? Can you contact me from the link at the top of the site? I’ll get in touch and then you can send me your xcode project for me to have a look. Thanks

      Reply
  13. Hi Chris! Really getting some good use out of the tutorials (code academy starts off with a crazy amount of theory right off the bat). I am having trouble with the dice images not appearing. The sum label appears to be working just fine. I even attempted to hard code one of the file names in and it still did not appear. I’m using xcode 4.6 and dragged the images in like you said, am I missing something?

    Reply
    • Update: I output the file names to the console and they are correct as is the random number generator. Something must be going wrong with either locating the PNG files or painting them into the dieView.

      Reply
      • Hey Zane! Thanks for following my tutorial! Have you tried to specify the image with the “.png” in them?

        Like:
        [NSString stringWithFormat:@”Dice%i.png”, firstRandomNumber];

        Or test the hardcoded version
        self.dieOneImageView.image = [UIImage imageNamed:@”Dice1.png”];

        Reply
        • Chris. Yes I’ve tried both of those methods and also tried using the setImage method instead of directly assigning the .image property. Both are getting the same results.

          I’ve also deleted the DieViews from the storyboard and set them up from scratch.

          Reply
          • Hey Zane, how about the image views? Are they added to the view of the die view? There should be a line in DieView.m that looks like [self addSubview: yourImageView]. Also what about the position of the image view? Set the frame to something that’s in the visible area. If you paste the bit of code where you create the uiimageview, i can take a look! Thanks

          • Sure! This is what I have:

            self = [super initWithCoder:aDecoder];

            if (self){

            //initialize the imageview

            self.dieImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];

            //add the imageview to the view

            [self addSubview:self.dieImageView];

            }

            return self;

          • Hmm that seems right too. Would you mind getting in touch with the contact link at the top? I’ll email you back for the project and then I can get to the bottom of what’s happening!
            Thanks

  14. Hi Chris,

    Would you know why my simulator screen is smaller than the image? I have to scroll up down and side to side to see all.

    Reply
  15. Hello Chris! Just finished the video tutorial. Thank you very much! It gave me an experience to develop even just a simple iPhone app. The image with this post is a screenshot of my work, following your tutorial. Cheers!

    Reply
  16. hi chris on lesson 4 ( running xcode 4.6 ) it says import dice data controller i tried that but it says it isnt there can you advise how to add it to import it. thanks

    Reply
  17. Chris,

    In the beginner series, the videos have a nice text version of the content below them. I do not see those here, even though you keep referring to them. I am only seeing the videos with no text outlines. Are there text outlines for this series of videos? That makes it much easier to follow along in Xcode.

    Reply
  18. Fantastic set of tutorials, thanks, Chris! With the dice rolling app (using Xcode 4.6.3), I found that I had to hard code the size of the rectangle used to initialize the dieImageView in order for it to display the png’s properly, as follows (in DieView.m):

    self.dieImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];

    In my code, self.frame.size.width and self.frame.size.height are both 0.0. Any ideas about this discrepancy? I wasn’t able to open your Storyboard in Xcode 4 to see if I had missed something. Also, a minor thing, but I notice in your source code, you use dieImage, but in the videos you use dieImageView (also true of diceDataController vs. diceController in ViewController.m).

    Thanks again, and really looking forward to your Soundboard App tutorials!

    Reply
  19. Hi Chris,
    I can’t understand the explanation on “self.dieImage.image = [UIImage imageNamed:fileName];”(i mean here we are assigning the image right?) why do we need to override the initwithcode. can you please explain further for a dummy like me (maybe with a little analogy I can better understand). ๐Ÿ™‚
    Thanks

    Reply
    • Hey Rlim, no worries! The self.dieImage property contains nothing because we simply declared it right? So if you’re saying “self.dieImage.image” you’re actually trying to access the “image” property of the object that “self.dieImage” refers to. But “self.dieImage” is empty or nil because we have never assigned anything to it!

      So before we can assign a UIImage to the “image” property of the object, we need to create an object and assign it to the “self.dieImage” property so that when we type “self.dieImage.image” it’ll be valid.

      Does that make sense so far?

      The next thing is, where should we create that object and assign it to the “self.dieImage” property? The best place is probably when the DieView object gets created. Because we created the DieView element by adding it to the Storyboard, we can override the initWithCoder method because we know that will be called when the object is created from the Storyboard. So now, when the DieView object is created and initWithCoder is called, we can create a new UIImageView object and assign it to the “self.dieImage” property.

      Now when we call “self.dieImage.image = [UIImage imageNamed:fileName];”, we will know for sure that “self.dieImage” contains an object.

      Hope that helps!
      Chris

      Reply
      • Hi Chris,

        The dice images are not appearing in the two image views. Do you have any clue why? I think it has something to do with the shoeDieNumber Method in the DieView Class where self.dieImageView.image is set. Everything else is working.

        Thanks

        Reply
  20. Chris, great stuff. I followed along and am building with no issues, but when user interaction with the “roll” button, I get a (llbd) message with no error message.

    I can’t troubleshoot cause there is no other debug hints. Advice?

    Thanks for all your work!

    Reply
    • Hey Clark, I may be a issue with the IBAction connection. Here’s what I would suggest. Delete the UIButton element from the storyboard and delete the IBAction button handler method in the .m file.
      Then re-add the UIButton to the Storyboard and control-drag to create a new IBAction button handler method in the .m file.
      Now run your app and click the button to see if it crashes. If it doesn’t then proceed with the tutorial. If it does, then contact me with your project and i’ll take a look! ๐Ÿ™‚

      Reply
  21. Hey Chris, hav u tried OS Mavs ?? If yes, Seems i got problem with this. Im running my Xcode with Mavs, and when i run the simulator, it’s very slow unlike while i run it with the older OS version.. i just don’t get it why..
    Need explanation bro..

    Thanks a bunch,
    Rizki

    Reply
    • Hello Rizki, I haven’t updated to Mavericks yet so I’m unaware if there are any compatibility problems with the iOS Simulator and Mavericks. Have you tried posting on StackOverflow or iPhoneDevSDK forum? If there is an issue, you can’t be the only one with it!

      Reply
  22. Hi, great video series! Looking forward to the next one! I’m pretty new to Xcode and iOS programming. Am comfortable with all you have demonstrated in these videos so far. Was just wondering if you could recommend a good book or ebook which might assist my progress, alongside your videos?

    Reply
    • Hey Gavincent, thanks for reading and your feedback ๐Ÿ™‚
      Have you checked out Ray’s tutorials? He’s got stuff ranging from beginner to advanced. I always recommend it!
      He’s also got a nice range of paid ebooks.

      Reply
    • Hello! Right above the videos, there’s a link to sign up for an account on the site. After you sign up, come back to this page and you’ll see the link to get the assets.

      Thanks!

      Reply
  23. Hi, please make tutorial of Xcode MYSQL connect, read data. Also tutorial of Sign in, using xcode, php, mysql. One other guy has tutorial but they are for old versions.

    Reply

Leave a Reply to shahab_a_k Cancel reply

433 Shares
Share
Tweet
Pin
Share
Buffer