Building my first iOS with Swift: Session II

Rutul Davè
Sep 30, 2015 · 3 min read

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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.

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.

Image for post
Image for post
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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store