Apps With Swift: Part 2 – Xcode and Storyboards

This is part of a series on learning iOS app development from scratch (I mean scratch). It’s not an expert tutorial but my journey as an absolute beginner. Part 1 is here.

In Part 1, I jumped into the $50 book from Design+Code. It has some excellent content but I feel I need to take some steps back. I don’t just want to mimic someone – I want to understand.

I read some more tutorial articles online – such as this Introduction to Swift. Suddenly I’ve jumped from design straight into learning syntax for a new language.  Along the way I also ended up shelling out for an icon set at PixelLove – this was a bit premature.

I need to pull this altogether. Just for the sake of my own headspace if nothing else.

The Elements of an iOS App

  1. Non-standard graphical elements are created with the image tool of your choice (in my case Sketch).
    I say non-standard because all the typical IOS8 graphical elements are already there in Xcode.
  2. The app itself is developed entirely in Xcode.
    This is the monstrous development tool from Apple that you download from the App Store. It’s a massive download and took ages to install.

The whole process could be something like:

  1. Idea
  2. Freehand sketching on paper of the different screens and functions in the app
  3. Prototype the design on Sketch (or Photoshop)
  4. Build the app with Xcode.

However as a beginner, I could dither for months on 2 or 3 – and remain clueless about 4. So I need to spend some time on learning building an app before coming back to my idea, plan, and design.

So… Xcode

I power it up and have to take a few deep breaths (or is that hyper-ventilating).

Xcode is an IDE (Integrated Development Environment) that brings together editing, debugging, testing, and lots of other things into one tool.

It feels like a whole other level from using say Coda or Espresso for website editing.

New Project or Playground?

Use a playground to mess about with Swift code and have the instant results show up alongside the editor. I had a brief play. Something to come back to.

New Project is what I want, choosing iOS Application. Then you choose from a template. Now to make sense of it all.

newproject

The Storyboard

On the left window is the Navigator (Command-0 slides it in and out). This lists all the files. Clicking on Main.Storyboard brings up the graphical drag and drop environment.

You can drag in various UI objects in from the Object Library (bottom right).

Advertisement

xcode

Everything is a kind of view. The whole screen on your iPhone is a view. When you tap and another screen slides over, it’s another view.

To manipulate things on the view, you need a controller. This top level view controller can be managed from code, so you typically have a file that corresponds to the view controller on the storyboard.

As we are using Swift, these code files are all suffixed .swift.

Changing Properties of UI Elements

On the storyboard you can click elements just like in a graphic program.

You can then change various properties from the Inspector Window on the top right. The inspector window has a bunch of different places for changing sizes and settings.

Of course all these can be changed from code as well.

If you are having trouble clicking on different elements (just like layers on a graphic program), you can click on them in the Document Outline (the window to the left of the storyboard).

docoutline

All these names are bewildering, but you come across them in other tutorials and books, so good to learn.

The iOS Simulator

Pressing the play icon (or Command-R) runs your project and brings up the iOS simulator.

This amazing thing replicates any kind of iDevice. You can also hook up your own device but you must enrol with the Apple Developer Program ($99 per year) before you can do this.

Graphic Assets

Remember those assets I started tinkering with in Sketch? I learned how to export them out as 1x and 2x? It’s super easy to bring them into the project.

Click on Images.xcassets in the navigator. The go to Finder, select all your cool pix, and just drag them in.

Xcode automatically figures out which is 1x and 2x etc and give them all names. From within Xcode you can refer to them by name (with the @2x or .png suffix).

At least that’s easy!

Your chosen app icon (in all its different resolutions and sizes) can also be dragged in this way.

Putting it All Together

Phew. So much to learn so little time.  I spend some time messing around with Xcode, but again – I don’t really understand what I’m doing. It’s not hard to quickly make a screen with buttons and labels etc. but I need more.

The Storyboards tutorial at Ray Wenderlich is good. I then decide to go the whole hog and buy the iOS Apprentice books. These are 4 PDFs ($54). Each book is a massive 250+ pages long.

Very quickly the first book takes me into the guts of Swift. And if you have no programming experience at this point — things will get very hard very quickly.

I think it will be a number of weeks to get through these books. I struggle to keep up my dayjob, and then do this as well. Not enough hours in the day!

What Is All This View Controller Stuff?

iOS apps are based on MVC architecture. That means Model-View-Controller.

It’s a way of abstracting out different parts of your app. Things you see are in the View. You control the view with your… Controller code. And your other data, logic, rules, processes make up the Model aspects of your code.

I know this is a hideous non-technical explanation, but this blog post is me taking notes of what I’ve learned in a way I can understand.

When starting a new project, the default is Single View Application. This gives you a storyboard with a basic ViewController. It’s essentially a single screen on your app.

However there’s a couple of other popular kinds of ViewController.

Table View Controller (UITableViewController) is one. Think of the iPhone Settings app – a lot of rows that you can interact with. The Music app is kind of like that too, rows of all your songs.

Lecture Series

I just came across these lectures from Stanford on iTunes U – so I’m spending some time watching these. Foolishly watched one late at night, then hardly slept as all the concepts kept spinning round my tired brain.

Where Next?

I need to understand View Controllers a bit more and how to interact with UI elements on a view. Even the most basic tutorials show these @IBAction and @IBOutlet things in code… so I’ll get to the bottom of those.

Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 14, 2016

4 Comments

  1. Hi James. I can also say that your experiences and feelings were very similar to mine while venturing into iOS development. It was encouraging to read about your journey and to see the product of your efforts. In fact, it was so encouraging that I’ve decided to try my hand again at taming the iOS beast. If you ever do come back to writing Swift posts I’ll be sure to give them a thorough read. Thanks for posting!

    • Thanks so much for taking the time to offer feedback. Be encouraged, with enough persistence (and patience) you will get there.

  2. Hey James, I relate to your experiences almost exactly, I’m in the same boat but have past experience in Visual Studio (C#, Visual Basic) and Ruby on Rails (MVC type full stack web platform). I’m going to fork out for the Ray Wenderlich subscription (http://www.raywenderlich.com/store/subscription). I also found Cocoa Controls (https://www.cocoacontrols.com) very helpful. A lot of code is available via MIT licence and hosted on GitHub so examining it can reveal a lot of concepts. Looking forward to your future posts, I like the way you write. Cheers!

    • Thanks so much for your comments. I kind of gave up writing the Swift posts, as no-one was reading… and they were quite a lot of time to put together. I may pick it up, now its been 2 months since having an app published on the app store. The outcome has been underwhelming for sure.

      I did purchase the iOS apprentice series. Was really helpful. Many evenings were spent working thru these.

Add a Comment