Learn to Code iOS Apps 3: Your First App

Coloring Inside the Lines

To change the background color, click anywhere inside the white view to select it. The Utilities sidebar on the right will show the details of whatever is currently selected. You’re interested in the Attributes tab in the sidebar; it’s the fourth one from the left and looks like a little slider:

The sidebar now shows all of the attributes that can be changed for the view. Find the drop down menu labeled Background:

Click the small white rectangle to bring up the color palette, or click the words “White Color” and select “Other…” Choose a nice green color for your app.

Now click the Run button in the upper left corner of the Xcode toolbar to check out your app!

Amazing! Now your app is starting to look a little more interesting. However, you won’t entertain your user for long by staring at a green screen. Time to add some user interface elements! :]

Tap Me!

Think for a minute about the user interface elements you will need for your button-tapping game:

• Something to indicate how much time is left
• The player’s current score
• A button to tap

For the first two elements, you’ll use Labels which display text.

Return to the MainStoryboard.storyboard file in Xcode to add these two Labels to the view.

At the bottom of the Utilities sidebar, there is a Library of different objects. Scroll down until you find one called Label.

The first label you’ll create will be your timer. It will start by saying “Time: 30” and then count down when the game starts.

Click and drag a label from the library and place it near the top of the view. The blue lines that show up on the view are guides to help you line up objects, but you don’t have to worry about that yet.

Now that your label is in the view and is selected, you’ll notice the Utilities sidebar now shows the attributes you can change for a label. Find the Text attribute and change it from “Label” to “Time: 30“. Also, change the alignment to be center-aligned, as seen in the screenshot below:

Whoops — it looks like the text doesn’t quite fit inside the default size of the Label. You’ll need to resize the label to make it wider.

You don’t have to make the Label exactly the width of your text; instead, give it a little extra width just to be sure that you’ll always have enough room for your countdown.

Once the label is wide enough, move it so it’s centered in the view. When it’s close to being in the center, Xcode will show a dotted blue line as a guide to help you position your objects.

At this point, your storyboard should look something like this:

So far so good! Now, repeat the steps above to place one more label near the bottom of the view to show the current score; change the text to say “Score”, and make it center-aligned.

You want the score to stand out on the screen, so make the font size of this Label bigger by clicking the small up-arrow next to the font size. Since you’ll display the player’s score on two lines, change the number of lines to 2 by clicking the small up-arrow for Lines.

As before, the label is way too small to fit the two lines of large text you’ll need! Resize the label so it’s wide enough to fit the word “Score”, and tall enough to fit two lines of text. At this point, your storyboard should look something like this:

Now what was that last user interface element that you needed? Oh yeah — a button for the user to click! :]

Scroll through the object library and find a Round Rect Button, as below:

Click and drag a Round Rect button from the library onto your view in between the two labels. Make sure the button is selected in your view, and have a look at its attributes in the sidebar.

Buttons should usually indicate the action the user should take, so change the title from boring Button to a more exciting Tap Me!. Since your Button is really the main event of your app, resize the button to make it bigger, and while you’re at it, make the font size larger too!

Here’s a final look at what your storyboard should look like:

The basic layout of your simple button-tap game is now in place! It’s starting to look like a real app, isn’t it? :] Up until now, you haven’t really written any code, which is pretty cool!

However, as you’ve correctly surmised, Xcode is doing a lot of work behind the scenes. Take a minute and have a look through the next section which explains the magic of the Views and View Controllers at use in your app!

Behind the Curtain — Views and View Controllers

Look at the Document Outline sidebar to the left of the storyboard. The top-level view (with the simple name “View”) is the background layer and is where you set the background color earlier. Inside of it are the two labels and the “Tap Me” button that you added to the app.

In an iOS app, just about anything that you can see on the screen is a kind of View. That means your label and button are also types of views.

If you want to interact with views – such as change their attributes from code or check if the user tapped on them – you use something called a Controller. Look back at the left column, and you’ll see that the the view, label and button are all inside something called View Controller.

The job of this View controller is to manage all of the views that are stored inside it. View controllers handle the behind-the-scenes jobs of your app, and are in charge of all of the actions that happen inside the views. For example, when the button is tapped, the view controller will take care of what to do.

Time to dive just a little deeper and check out what this View Controller does! :]