Building my first iOS with Swift: Session II

Let’s dive into what’s next. First, we’ll work on creating the segues and connect all the scenes!

Add a “+” button that will open the new/create scene.

Buttons like “+” buttons are ‘Bar Button Items’ that need to be added in the location you want them to go. Make sure to change the ‘System Item’ field to what you want — in this case ‘Add’.

Then connect the AddView to this button — more drag and drop magic. Hold the control key and drag from the “+” button to the view you want (in this case the AddView. I also created a segue from the “customcell” to the DetailVew.

Holding the control key + dragging the mouse to the View you want creates the segues.

Oh, so pretty, but it also shows how good Ionic framework is if you look at the prototyped app that has these transitions.

Look ma, I can move between scenes thanks to segues.

Next, I wanted to add a little arrow “>” to each cell in the table. So I Google’ed and one of the first results told me exactly what to do — Add an accessory called ‘Disclosure Indicator’ to the Prototype cell using the Interface Builder.

Look Ma! Tiny arrows.

Next up, adding an icon

Seems like an unnecessary next step, but the tutorial I am following seems to suggest this, so let’s go with the flow.

If you don’t want to spent time in Sketch or Photoshop, there is an answer in http://makeappicon.com/. Creating an app icon in Sketch is a project for another time. For now, this idea bulb will do.

Jony Ive is going to be very disappointed in me.

Let’s add some buttons and input fields

Using the Interface Builder, adding and adjusting Text Fields, Text Views and Buttons was pretty straight-forward.

And while we are at it, add some “empty” controllers for these other views. To do that, we create a new file of type ‘Cocoa Touch Class’ and have the AddViewController and DetailViewController be subclasses of UIViewController.

Xcode is a really rich IDE. It tells me which classes are available when associating with the ViewController. The classes that are already associated don’t show up here.

Then I associated the view controllers with the classes I just created.

Next, we need to associate the UI elements to something in the code. The ‘Assistant Editor’ is really useful in this case.

That code view on the right is the ‘Assistant Editor’. I will be dragging and dropping things from the Storyboard into the code editor to do the linking — seriously, I can’t get used to that yet.

Hmm, with what seemed like a whole lot of time in the storyboard editor, we have a skeleton now where we can go between screens/scenes and I am getting a better handle on how to connect the UI to the code. Still feels like a long way to go, but we are making progress. All the progress pushed to GitHub. See you in the next session.