SwiftTutorialForMA

Note: I've now written a bigger, better (and more tested) tutorial, which you can find on Medium

This tutorial is a slimmed down and simplified version of the official Apple Start Developing iOS Apps with Swift tutorial.

You will learn:

• How to build a basic iOS app
• Coding in Swift
• Using Xcode (IDEs: The beginning of the end or the end of the beginning. Discuss)
• Interface Builder - building (adaptive) interfaces

Getting Started

1. Open up Xcode, and select Create a New Xcode Project then select 'Single View Application' under 'iOS -> Application' and click 'Next'. Make sure to set the language as Swift, set 'Devices' as 'Universal' and leave 'Use Core Data' unchecked

2. Welcome to Xcode! Let's go on a quick whistlestop tour:

Run you app on your device or in the iPhone simulator by pressing the Play button:

You can toggle which areas are visible using the navigation buttons on the top-right of the screen

3. Let's have a quick review what's been generated for us:

• AppDelegate.swift This creates the entry point to your app, and is where you define app-level actions (such as any custom actions to do on load or close of the app). We won't be making any changes to this file today.

• ViewController.swift This is the custom subclass of the UIViewController class. ViewControllers are used to manage your views, so you can handle user interaction with the objects you are displaying in your View.

• Main.storyboard Storyboards are (arguably) the most popular way to create the views for your app, and definitely the easiest to learn when you are getting started.

  "A storyboard is a visual representation of the app’s user interface, showing screens of content and the transitions between them."

  Storyboard are edited using Interface Builder, a visual interface editor that come packaged with Xcode. Right now your storyboard should have one empty scene. Which is kinda dull.

Creating our User Interface

5. From the Object Library in the Utility Area (at the bottom right of the window), find a Label. Drag the label onto your empty scene.

![object library](./screenshots/object_library.png)

6. Repeat with a Text Field and Button, laid out like this:

![UI_stage1](./screenshots/UI_stage1.png)

7. Make it a little clearer for users - add some text to the Label and the Button. And let's make the text box wider.

![UI_stage2](./screenshots/UI_stage2.png)

8. Looks pretty good! Let's run the app to see how it's looking.

![UI_stage3-noConstraints](./screenshots/UI_stage3-noConstraints.png)

Hmmmm ... that isn't really what we were aiming for. The text is going off the screen. What went wrong?


What we're doing is building an *adaptive* interface, that will work on all sizes of screens. It needs to be responsive - which means we need to set some rules for the layout.

9. For this we'll use a UIStackView. The stack view is an interface for laying out several subviews, either vertically or horizontally. It'll help us lay out our 3 elements neatly.

Hold down **Shift** and select the `Label`, `Text Field` and `Button`. When they're selected, click on the `Stack` button.

![stack](./screenshots/stack_button.png)

They should now be embedded within a `Stack View`. You can see this if you pop out the Xcode **Outline View**. Yes, another view. Sorry. But this one is pretty useful! It shows us the hierarchy of element in our view.

![stack](./screenshots/OutlineView.png)

10. I'm afraid it's time for ANOTHER view.¹ Missing Sublime Text yet? Head on over to the Attributes Inspector.To get to it, click the fourth button from the left in the inspector selector bar. It lets you edit the properties of an object in your storyboard.

![stack](./screenshots/AttrInspector.png)

Set the Spacing value of the `Stack View` to `12`. Also, set the `Alignment` to `Leading` and `Distribution` to `Fill`.

11. Now we've set how our elements appear within the Stack View. Next, let's set out where the Stack View is placed within the Scene. 1. Move it to the top of the scene. 2. In the 'Outline View', hold CTRL and click-drag from the Stack View to the View listed in the view heirachy, and selected Leading Space to Container Margin, Trailing Space to Container Margin and Vertical Spacing to Top Layout Guide. - tip: if you hold SHIFT whilst clicking, you can select more than one at a time. 3. Lastly we need to make out StackView fill the width of the screen. Select the StackView and open the 'Size Inspector' in the 'Utility Area'. (The button that looks like a ruler). Under the 'Constraints' heading we can see our 3 constraints that we just set before.

    ![stack](./screenshots/constraints.png)

    Edit all three constraints in turn, making sure the constant value is set to 0. Your `StackView` size should update when you do this to fill the width of the Scene.

  4. Do the same for the `text field` so it spans the width of the `StackView`. CTRL-drag from the `text field` to the `StackView`. Add leading and trailing constraints, and make sure they are set to 0.

12. Run the app! It should look something like this:

Also, have a go at running your app in

Connecting the UI to Code

It probably hasn't escaped your notice than we haven't yet written a single line of code. What sort of programming is this? Fear not, it's time to put fingers to keyboards.

First, it's important to understand the relationship between your storyboards and view controllers.

In a storyboard, a scene represents one screen of content and typically one view controller. View controllers implement your app’s behavior. They coordinate the flow of information between the app’s data model, which encapsulates the app’s data, and the views that display that data, manage the life cycle of their content views, handle orientation changes when the device is rotated, define the navigation within your app, and implement the behavior to respond to user input.

When we created this app Xcode kindly created a scene (which we've been adding to). It also created the ViewController.swift file, and linked in to the scene. In this file, a new subclass of UIViewController called ViewController.

Although the scene is already linked to the ViewController.swift, the elements within the scene (like the text field and button) aren't linked.

AIM: When a user enters a to-do into the text field, and taps the Save button, the to-do they have entered is added to an array.

13. Let's get started. Make sure you've got the Main.storyboard file open. Now open the Assistant Editor, which lets us view 2 files at once. If the right hand pane isn't showing the ViewController.swift file, select it from the 'Automatic' dropdown.

![assistant editor](./screenshots/assistant_editor.png)

14. Time to start hooking things up! CTRL-drag from the text field in the UI, into the code file, above the function declarations. In the dialog that appears, for 'Name', type toDoTextField and hit 'Connect'. Xcode will add the necessary code:

`@IBOutlet var toDoTextField: UITextField!`

The IBOutlet attribute tells Xcode that you have connected the nameTextField property from Interface Builder (which is why the attribute has the IB prefix). The rest of the declaration declares a variable of type UITextField named `toDoTextField`.

So, our custom ViewController class now has one property - a textField.

15. Next, let's create an array to hold our to-dos. For now we'll store them as strings.

Under your textfield outlet, declare an array called `toDoArray`

`var toDoArray : [String] = []`

Our first written bit of Swift! Hurrah! Let's break it down.
| code | meaning |
| ----- | ------ |
| var | Declares a new *mutable* variable |
| toDoArray | Name of variable |
| : [String]  | This variable will be an array [] of Strings |

16. Action time! We need to define the trigger that will take the text from toDoTextField, and put it into the newly defined toDoArray. We know that the UI trigger will be the save button. To define the action in code, we're going to CTRL-drag from the button to the ViewController.swift file.

In the dialog that appears select `Action` for Conneection, and call it `saveButtonTapped`. Then go ahead and click `Connect`.

More generate code!

``` @IBAction func saveButtonTapped(sender: AnyObject) {
}```

Let's break it down again:

@IBAction : Indicates that the method is an action that you can connect to from your storyboard in Interface Builder
func : Method defining keyword (like `def` in Ruby)
saveButtonTapped : The name of our method

17. So, Xcode has generated the method declaration for us, but it's for us to define what happens when the button is tapped. Let's start with something simple - just to check the link has working.

Lets give our new function something to do:
  `print("The button did a thing!")`

  That's right - it's a classic logging statement!.

  Let's build the project to check in what's happening on the simulator. Run your app, and tap on the `Save` button.

  On Xcode, a new view should pop up from the bottom of the screen.<sup>2</sup> This is the **Debugging Console**, which does lots of things, but most importantly right now it logs out our test statement.

18. Riding on t