Chapter 17: Your First iOS App

Believe it or not, you're about to build your very first iOS app! I feel all bubbly inside too. From this moment on it is all projects, app building and practical application. At Devslopes we teach by doing and you learn by doing. So do it! It is going to get tough but stick with it and never give up.


What you will learn

  • How to create a project in Xcode.
  • How to navigate through key elements and features of Xcode.
  • How to add objects such as buttons and images so the user can interact with the app.

Key Terms

  • View Controller
  • Utilities
  • File
  • Group
  • Assets
  • Assistant Editor
  • View
  • UIButton
  • UIImageView
  • @IBOutlet
  • @IBAction
  • Aspect Fill
  • Aspect Fit

Resources

Download here: https://github.com/devslopes/book-assets/wiki

Get ready, because we are about to build our very first iOS app. It will be called "Hello, World!" but it isn't the "Hello, World!" you're thinking of if you're already a programmer. Ours is going to be exciting!

Creating a new Xcode Project

First, open Xcode if you haven't already and click Create a new Xcode project. Click Single View Application. Click Next. Give your project a name like HellooooooWorld. Below the name field, there are a few drop down menus, but for the sake of this chapter, you won't need to change any of them. Click Next. Choose somewhere to save this project file and click Create to save it. You should see a screen like the one in Figure 2.1.1.

Figure 2.1.1 Screen Shot 2016-10-17 at 5.12.54 AM.png

The next screen displayed contains your main dashboard. You will see your project settings in the center panel of the Xcode window, your project files on the left-hand side, and some document-related information on the right-hand side (Figure 2.1.2). We're not actually going to mess with any of this at first, but it's good for you to know where it is for later.

Figure 2.1.2 Screen Shot 2016-10-17 at 5.17.32 AM.png


On the left-hand side of the Xcode window, you should see a list of files including:

  • AppDelegate.swift
  • ViewController.swift
  • Main.storyboard
  • Assets.xcassets
  • etc.

These are the base files made by Xcode when you create a new project. Click ViewController.swift to open it. You will see that the center panel changes to a code editor showing the ViewController.swift file (Figure 2.1.3).

Figure 2.1.3 Screen Shot 2016-10-17 at 5.21.42 AM.png

Here we will write the code for our "Hello, World!" app in this chapter.

Before we write any code, however, let's go back to the Main.storyboard. This should be your starting point:

Figure 2.1.4 Screenshot 2016-10-30 01.07.16.png

What you are seeing is called the View Controller. Inside the rectangle is a View that holds all of the objects the user is going to see and interact with. We'll go further into detail later in this chapter.

On the right you will notice a column with several icons at the top (Figure 2.1.5). This is the Utilities column, or sometimes referred to as the Inspector column. This is where you will modify your objects. The selected menu is called the Attributes Inspector.

Figure 2.1.5

Screenshot 2016-10-30 01.13.16.png

To the left of the View Controller you will see a column titled View Controller Scene (Figure 2.1.6). This is the Document Outline. Here you will see the hierarchy of all your objects. When you want to modify an object as we mentioned above, such as a View, you will select it here then choose an inspector from the Utilities column on the right (Figure 2.1.7).

Figure 2.1.6

figure-2.1.6-img.png

Figure 2.1.7 Screenshot 2016-10-30 01.22.28.png

On the lower right corner of the Inspector column, there is a circle with a square in it - called the Object Library. Make sure it's selected (it will be highlighted blue). Beneath said section you will see a small bar with the word Filter inside (Figure 2.1.8). Here you can search for objects you want to drag onto the storyboard View Controller.

Figure 2.1.8

Screenshot 2016-10-30 01.26.57.png

Go ahead and type the word button into the filter bar as shown below.

Figure 2.1.9

Screenshot 2016-10-30 01.30.24.png

To select the Button object simply click and drag it to the View Controller and let go. The Button will then populate the View (Figure 2.1.10).

Figure 2.1.10 Screenshot 2016-10-30 01.33.59.png

Notice in our View Controller Scene the Button now resides within the View.

(Figure 2.1.11) In the Utilities column on the right, click the icon that looks like an arrow pointing down (the Attributes Inspector). In this inspector find where it says Button and rename it to Welcome. Make the button space wider by dragging the white boxes surrounding the Welcome, so the entire word will display.

Figure 2.1.11 Screen Shot 2016-11-04 at 1.25.36 PM.png

Now go into the Assets.xcassets folder. Drag and drop both the Hello-Devslopes.png and the background image beneath the AppIcon as shown below.

Figure 2.1.12 Screenshot 2016-10-30 02.02.38.png

Type uiimageview where you typed button (bottom right corner). Drag the image view to the top left corner of the view (Figure 2.1.13).

Figure 2.1.13 Screenshot 2016-10-30 02.21.14.png

Then increase the size to touch all edges (Figure 2.1.14). To do this pull on the white boxes around the image view. Then put the button on top of the image view by switching their places in the Document Outline column on the left.

Figure 2.1.14 Screenshot 2016-10-30 02.07.26.png

Now we need to set the image of the ImageView (Figure 2.1.15). To do so select the ImageView and select the Attributes Inspector in the Utilities column on the right. Find the Image dropdown menu and select the the background image (MAmPaLt). Then find the Content Mode dropdown menu and change it to Aspect Fill. This setting basically tells the image to maintain it's aspect ratio and for it to fill the entire ImageView.

Figure 2.1.15 Screenshot 2016-10-30 02.29.37.png

(Figure 2.1.16) Lets repeat what we just did for the logo except we are going to change the Content Mode to Aspect Fit and we are only going to extend it to the top instead of the whole view. This setting tells the image to maintain it's aspect ratio and simultaneously fit the entire image inside the ImageView.

Figure 2.1.16 Screenshot 2016-10-30 02.38.32.png

Now we need to hide the images when the app starts so that when we click the welcome button they appear. To do so select both images by holding down the command key and click on each. Find the word Hidden in the Attributes Inspector and click the white box next to it (Figure 2.1.17). The images should not be visible when you run the app.

Figure 2.1.17 Screenshot 2016-10-30 02.44.07.png

At the top left of Xcode you will see a triangular button looking similarly to a play button. Do not click it yet. Change the phone simulator to iPhone 7.

Figure 2.1.17 Screenshot 2016-10-30 02.44.07.png

Now click the triangular "play" button. The app you built is now being built and copied over to an app called Simulator. Simulator allows you to test your app on a virtual iPhone or iPad. When the app builds and runs, you should only see the welcome button which you can click but will have no functionality yet.

Good going so far! Isn't this awesome? Now stop the running project by clicking the square "stop" button icon next to the "play" button.

Next we need to tell the welcome button to make our images visible again. To do so we need to create a couple of @IBOutlets and an @IBActions. If we want to change anything about the current state of an object, such as the images, we need to tell the view controller to do so. We connect the objects with @IBOutlets and we give it functionality with the @IBAction.

At the top right of Xcode you will notice a button with an image of two rings interlocked. This is called the Assistant Editor. With the View selected click the rings icon. You will now have a split screen with the storyboard on the left and a code editor containing ViewController.swift on the right (Figure 2.1.18).

Figure 2.1.18 Screenshot 2016-10-30 02.54.18.png

As you can tell it is a bit cramped. Lets make some room by closing the two columns on the outside by clicking the blue highlighted icons at the top right of Xcode (Figure 2.1.19).

Figure 2.1.19 Screenshot 2016-10-30 02.56.16.png

Figure 2.1.20 Screenshot 2016-10-30 02.58.01.png

Much better.

To connect the objects as we discussed hold the control button on your keyboard then click and drag from the objects , one at a time, to the ViewController file inside the class and above the viewDidLoad() function (Figure 2.1.21). Do this first with the background image.

Figure 2.1.21 Screenshot 2016-10-30 03.05.09.png

A small gray box will box up. In the Name field type in backgroundImage then press Connect. Do the same process of adding an @IBOutlet for the other ImageView by control-dragging from the ImageView to ViewController.swift. Name this one: titleImage.

Figure 2.1.22

Screenshot 2016-10-30 03.18.05.png

Then do the same for the welcome button because we need to hide it once we click it. Name it welcomeBtn. Just so you know, you can also delete the boilerplate codeblock called didReceiveMemoryWarning():

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

Figure 2.1.23 Screenshot 2016-10-30 03.15.55.png

Now let's create an @IBAction for our welcomeBtn. Control-drag from the button to right under the viewDidLoad() function. The same box will pop up but this time change Connection from an Outlet to an Action and name it "showImages". Then click Connect (Figure 2.1.24).

Figure 2.1.24 Screenshot 2016-10-30 03.20.09.png

Your file should now have an @IBAction.

Figure 2.1.25 Screenshot 2016-10-30 03.22.40.png

In this example, an @IBAction runs the code that we put in it's brackets whenever our button is pressed. Remember earlier in this chapter, I said that inside the @IBAction is where we tell the ViewController to show the images and hide the button. Lets do it!

Figure 2.1.26 Screenshot 2016-10-30 03.26.03.png

Now, a ImageView has a handy little property called isHidden which is a Boolean. We set both images to false and the button to true. What this code does is when our button is pressed, the code inside of the @IBAction we wrote is run, making the "Welcome" button hide and both ImageViews unhide.

Click the triangular "play" button at the top left to run your app and push the "Welcome" button.

Wrapping UP

Success! Wow, you just built your very first app using Storyboards and the Swift language. You found out it is not as intimidating as you thought it was going to be and if was actually fun! Lets test those new skills with the following exercise.

Exercise

  • Create a new project
  • Find an image on the INTERNET of your choosing
  • Have it visible when you first open the app.
  • Create two buttons. One that makes the image disappear and one that makes it reappear.