Apps With Swift: Part 2 – Xcode and Storyboards
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
- 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.
- 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:
- Freehand sketching on paper of the different screens and functions in the app
- Prototype the design on Sketch (or Photoshop)
- 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.
I power it up and have to take a few deep breaths (or is that hyper-ventilating).
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.
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).
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).
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.
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.
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.
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.
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.