How to make an iOS app for beginners in 5 simple steps | Part-2

What You Will Create

We’re going to make a Magic 8 Ball app. You can ask the app to make all your difficult decisions. Should I order a Beef burrito or a Pepperoni Pizza with extra cheese? Should I watch Stranger Things or Game of Thrones? With this app in your pocket, you’ll always have an answer to life’s many conundrums!

Step 1: Design the User Interface

First, take a look around the project. Familiarise yourself with what’s been included in the starting project. We’ve already added the required image assets and the app icons. Everything else has been left for you to complete.

• Open the Main.storyboard in the File Navigator.
• Change the background colour of the app.

Hint: Try messing with properties in the Attribute inspector with the View selected in the Document Outline.

See the screenshot below if you’re confused about where these things are.

Next, let’s add all the UI elements on to our canvas.

• Add a Label that says “Ask Me Anything” or something you think will work well with the Magic 8 Ball theme.
• Add a new Image View from the Object Library on to the canvas and place it at the centre.
• Add a new Button that says “Ask” or something similar and place it at the bottom of the screen.

Feel free to tweak the Font Style and Font Sizes to your liking. You should end up with something like this:

You can ignore any yellow warnings at this stage.

Step 2: Link Up the Design with Code

Open up the Assistant Editor so that the screen is split in two showing the design file and the code file side-by-side.

• Link up the Image View with an IBOutlet. You should name the IBOutlet imageView when prompted.

Hint: Remember to hold down the control key

• Link up the Ask Button with an IBAction. Name the IBAction askButtonPressed.

GOAL

Step 3: Use Code to Change the 8 Ball Image

• Open ViewController.swift from the File Inspector.
• Without touching the Main.storyboard file, figure out a way to change the Image View using code to display the ball3 image when the Ask Button is pressed.

Hint: 1. There are a total of 5 ball images. You can find them in the Assets.xcassets folder.

Step 4: Make the Ball Image Random

• Use the Swift random generator to make the Image View show a different, random ball image each time you press the Ask button.

Hint 1: You can generate a random integer (whole number) between x and y with the code:

Step 5: Show off your work!

Feel free to customise the app to your liking, change the images, change the title. Make it your own then show it off in the comments section below this lesson!

Also you can clone it directly from github: https://github.com/vineetgeek/askmeanything_iOS