iOS Interfaces with Xcode Playgrounds

We all love great interfaces, right? Nice designs, great colors, some crazy effects and so on. Well, on iOS we have several ways to build those marvellous artboards sketched by our fellow designers. We can use the Interface Builder and/or we can basically code it.

Interface Builder (IB)

With Interface Builder we can easily add views, move them around, change their properties, preview directly what we are doing and most importantly… it is possible and very intuitive to define the right layout for different screens with AutoLayout. It seems to be the perfect GUI tool, right? Well, not really. The Interface Builder is great if you use a lot of standard UIKit views but if you need, e.g., a custom border or a nice shadow effect, then you need to create a custom view and implement those changes by hand.

Inside of the Interface Builder we can use Storyboards and/or XIB files. Storyboards allow us to build a complete interface and flow really fast. We can define the view layout, view relations and view transitions directly in one file. It also gives us a really nice app overview. XIB files are basically the face of a view. One Storyboard file can hold multiple view controllers but one XIB file can only hold one view controller.

Storyboards have some flaws. They are difficult to reuse and they are not collaborative friendly (merge conflicts may be difficult to solve). They are great for single developers and small projects but not recommended for complex applications. On the other hand, XIB files are more reusable and less likely to have conflicts, but even so, if the app has been designed to use a unique look and feel, then writing your interface with code is the right option.

The Interface Builder is great to use as a shortcut, as a temporary simplification of the interface because it lets you move faster from the idea to product, helping you focus more on shipping and less on diversions.

Benefits of Code

With code we have a future-proof process - we can reuse each view more easily, we are aware of UIKit upgrades, have more flexibility to write good tests, it’s easier to fix merge conflicts, and we can use any compatible IDE like AppCode. On the downside, it can also be a bit frustrating: there is no preview, constraining views and layout their position on the screen isn’t as intuitive as a GUI.

What about seeing your changes directly on your simulator?

Interface with Playgrounds

Playgrounds were included in Xcode version 6.0 and with them it is possible to explore Swift syntax and functionalities, create learning environments for others and most importantly for this post: *Prototype parts of your app*.

A playground is an interactive Swift coding environment that evaluates each statement and displays results as updates are made, without the need to create a project.

Let’s see what we can do with Playgrounds - we can get started with a new Playground file, but it will be more interesting if we use a project.

So, let’s create a new Single View Application project.

Don’t forget to select the Swift language option.

Go to the left bottom and select the option New playground. You can also do this with the shortcut ⌘ + N and select iOS > Source > Playground.

Give it a nice name.

We now have our Playground file.

Go to the Utilities > File Inspector and check if the Playground is using the iOS platform.

Now we want to focus our environment just for our Playground. Hide the Navigator panel (⌘ + 0) and the Utilities panel (⌘ + ⌥ + 0) and write down some code. E.g.: Create a view and see the results:

var square = UIView()
square.backgroundColor = .greenColor()
square.frame = CGRectMake(0, 0, 50, 50)

Maybe you were expecting to see something more visual. You can achieve that by calling the Assistant Editor (⌘ + ⌥ + ↩︎). Then, you need to select the Timeline item from the Group Files.

You also need to import XCPlayground on your Playground and assign the current view to show on the Timeline. Now, it is possible to view your code changes in real time.

This is a basic example but everyone knows that our apps need much more than that and most of the times we want to use some wonderful third-party library. You can use CocoaPods to include third-party code in your project.

Open your terminal, go to your project path, create the Podfile (pod init), add the pod Eureka (pod 'Eureka') and at last… install it (pod install). After that, open your .xcworkspace file and build the project (⌘ + B).

Eureka will help to create a simple table with static rows for our next example. Now you can import Eureka to you Playground and play! 😎

Gist: Eureka example

I have something more… something especial: the Xcode 7.3 beta 3 has interactive Playgrounds 🎈🎈🎈 that allow us to click, drag, type the interface that you just coded.

Gist: Interactive example (Xcode 7.3 beta 3)

Isn’t it awesome to code your interface and see the final result? And most of all, you can interact with it and verify if what you’re coding is what you really want to. Imagine the time that you spend animating a view. That’s it… this is also a really nice tool to animate your views because it provides you with several great tools to achieve the perfect timing for your animations. I have no doubt that I will use Playgrounds more than ever and pass it along to my dev colleagues.