Simple Coding In Xcode

As little code as possible

After you learned Xcode as a designer and how to Animate in Xcode using Canvas, you’re ready to do some simple coding. Why coding you may ask? Well, code solves everything. It’s a journey. That’s why we’ll approach it in a way designers can understand.

Follow the GitHub Project

https://github.com/MengTo/Ripple — I decided to put the Ripple Prototype project to GitHub so that you can follow every code commit. I will try to package them in the simplest and most self-explanatory way possible in order for you to learn slowly but surely as the project evolves. It will be UI-focused. For a collection of UI Codes and how they’re applied to the project, please scroll to the end.

Separate Styling From Code

The reason why we use Storyboard wasn’t only about ease of use. The goal was also to make your code simpler. By having the styling happen in Storyboard, the code becomes more concise, focusing more on the data and the actions. Furthermore, it will allow you to easily adapt your UI to the iPad, which we’ll learn later.

Create The Code

The code exists in a ViewController. That’s where all the magic happens. Your Xcode project came with one.

In the last tutorial, I briefly explained how to use the View Controller that came with the project. That’s where we connected the button that would trigger an animation.

This is the demo App we have so far. Ripple 1.1 — And here we want to create a View Controller for the Chat screen.

Hit Command + N. That will ask you create a new file. Let’s create a Class.

Remember we had a ViewController? Well, let’s create a Class specifically for a View Controller. It’s like choosing between a JS or CSS file. Different functions.

Voila! You have 2 files now.

The .h file is mainly for referencing elements from your Storyboard.

The .m file is for implementing your references. Notice that we’re deleting two methods that we don’t usually need. Keep it simple. :)

Include The Code

Just like in HTML you include your CSS file, in Xcode you include your View Controller.

As you select the Controller, go to Runtime Attributes and set the Class to the name of your file.

Make The Connection

This is how you connect a Storyboard element to a Class.

Referencing Storyboard to a Class requires split screen. That’s where the Coding Assistant comes in. Note: If you turn on Automatic, Storyboard will bring the appropriate view for you.

Let’s create an IBOutlet for the View, and an IBAction for the Button. Notice that the Type has to specify UIView.

Hide and Show Things

Let’s hide our list of People by default.

Some coding fun. Here we’re simply including the Canvas class and showing AND animating listView when the button is pressed.

That’s it! Simple code can create magic.

Code Snippets

Objective-C is a bulky language. But it makes up with its auto-completion and declarative language. Additionally, features like Code Snippets will help you preset those long codes.

Insanely Good Documentation

The UIKit framework is extremely deep, but well-documented and available directly in Xcode. You can find all the properties you want to play with by holding the Command key and clicking the property you want to look at.

Let’s say we want to change the text property of a UILabel. This is how we find that UILabel has a text property:

Naming Convention

In Xcode, it’s pretty hard to deviate from its suggested naming convention — it’s everywhere! A quick look at Apple’s documentation will give you a rough idea. But it doesn’t tell you everything, especially when it comes to Storyboard objects. Here are some examples that you can focus on:

IBOutlet

listButton — list is what it represents.

IBAction

listButtonDidPress — DidPress means what it does.

View Controller

CSChatViewController — CS represents the two letters representing your project. CanvaS, RippleApp, etc. View Controller is the name of the Class. Yep, I kinda wanted Canvas’s two letters to be similar to “CSS”.

Collection of UI Codes

I’m sharing a list of codes that will help you solve common layout problems that are not available on Storyboard. These are the same issues that I faced as I learned Xcode.

Light Status Bar — Sometimes, you don’t have the NavigationController, so you’d have to manually set the status bar to light.

NavigationBar Custom Font — AppDelegate.m is where the main styling happens.

Open Links in Safari — Create IBActions from buttons in Storyboard and link them up!

iOS7 Motion Effect — with one line of code and a Pod, you can move elements as the phone gets tilted.

Follow the GitHub project for more