Your First iOS App: 100% Programmatically (Xcode 7.2, Swift 2.1)
Part 1
This is Part 1 of a tutorial that follows Apple’s old “Your First iOS App” tutorial, but implements all of the user interface elements programmatically using Swift. View Part 2 or check out the complete code on Github. This tutorial is ported from an Objective-C implementation by Austin Louden. If you prefer Objective-C, please see Part 1 and Part 2 of that tutorial.
To learn more about my work, visit my website.
At the end of this tutorial, you will have an app that looks like the one on the left. Upon clicking on the text field at the top, the system-provided keyboard appears and the user may type in their name. The user may then dismiss the keyboard by clicking “Done.” Finally, when the user clicks “Hello,” the label displays “Hello,” followed by the user’s name.
The first step is to open Xcode and click on “Create a new Xcode project” In this tutorial, I am using version 7.2.
We’re going to use a “Single View Application.”
Fill out the relevant fields. Depending on your preference, you may select a specific device. We will be using Swift here. Core Data is not required and not recommended for this tutorial.
Prior to saving your project to your computer, ensure that “Create Git repository on” is checked and “My Mac” is selected.
By default, “Single View Application” is not oriented for programmatic user interface development. Xcode creates some default files that we don’t want. Let’s go ahead and delete “Main.storyboard” by selecting it and clicking “delete” on the keyboard. When prompted, select “Move to Trash” instead of “Remove Reference.” Additionally, let’s go ahead and delete “ViewController.swift.”
In order to truly rid ourselves of the storyboard world, we need to modify the “info.plist.” Expand the sub-folder titled “Supporting Files” by clicking on the adjacent triangle. Select the file within the “Supporting Files” folder titled “Info.plist.” Select the row with the text “Main storyboard file base name” and delete it by hitting your “delete” key.
Now that we are free of the oppressive shackles of the storyboard, navigate to the “AppDelegate.swift” file by clicking the file browser on the left side of the screen.
The App Delegate file is your application’s way of communicating with the operating system, and includes several useful methods.
We’ll mostly be dealing with “application: UIApplication, didFinishLaunchingWithOptions launchOptions:”, which is called immediately after the application launches.
If you click on the Run button in the top left, your application should build with a blank white screen.
This is all good and well but our application doesn’t show us anything.
In order to begin building an app programmatically, we’ll need to introduce a ViewController class. Click ⌘N to create a new file.
In the “Source” under “iOS,” select Cocoa Touch Class and click “Next.”
You can choose the name of your class, but make sure to set it as a subclass of UIViewController below. I named mine “MainViewController”. The UIViewController is a fundamental class of iOS development, and is used to make and handle interaction with elements in the user interface. Ensure “Swift” is selected under “Language.” Click Next, and then Create.
You’ll notice that a new file has appeared in the Navigator on the left, “MainViewController.swift.” This file will include both your user interface and business logic code for this tutorial. You’ll also notice that “MainViewController.swift” has some boilerplate code.
We’ll come back to that in a bit — for now, go back to your “AppDelegate.swift” file.
Firstly, let’s take a look at the “application: UIApplication, didFinishLaunchingWithOptions launchOptions:” method — we’ll want to add some code matching the snippet below:
Line 4 instantiates an object of the UIWindow class set to the bounds of the iPhone’s screen.
Line 7 instantiates an object of our MainViewController class called “mainViewController.”
Line 10 sets “viewController” as the window’s root view controller.
Finally, line 13 makes the window visible.
Running the app again should give you a white screen and now you have a view to modify programmatically. In the next part of this tutorial, we’ll handle all of the on-screen elements.
