Display the UI in Swift’s Playgrounds

IT WORKS!

Image for post
Image for post
Photo by Sharon McCutcheon on Unsplash

Look: I’ve always struggled with Playgrounds due to the idea that “you just type in it and everything is done”. Give me a clue, daddy!

Here is that clue, son.

Difficulty: Beginner | Easy | Normal | Challenging

Prerequisites:

Terminology

Playgrounds: A development environment that can be used to create Swift code

The idea

This is going to be a simple App with two view controllers. The first will be displayed, and have a button that takes the user to the second view controller (present the view controller).

The second view controller has a button that enables the user to dismiss the current view controller.

All within Playgrounds.

Image for post
Image for post

The Setup

Playgrounds allows us to create a Live View to display rather wonderful information.

Before typing anything in at all, it is possible to enable live view by pressing the assistant editor button (two intersecting circles), and live view appears on the right of the screen

Image for post
Image for post

You’ll see something like the following:

Image for post
Image for post

Not too impressive!

At the top of the Playground, as well as UIKit we are going to need Playground Support

import UIKit
import PlaygroundSupport

towards the bottom of the Playground we will force the code to run indefinitely (that is, not be killed by the system at any point) and set the liveView to the View Controller (which, granted, has not yet been created — meaning if you put this in the Playground initially you will get an error).

// set the view and indefinite-execution
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = MyViewController()

The Code

The intention of this particular article isn’t to explain Auto Layout, View Controllers or UIButtons.

In this spirit, here is the code — suffice to say that each view has a simple button that calls an action and runs the relevant code. Yes, the UIViewController uses loadView to load the view, but what did you expect?

The interesting part — if it can be called that, is that we can interact with the code in the Live View.

That’s an Awesome feature

The simplified version:

The end result:

Image for post
Image for post

If you don’t get such a vivid green, or no display at all please do contact me through Twitter.

The production version:

It is only right and proper to actually put the view code in, you know, a view. Putting everything in the ViewController is immoral (or something). The guide about how to do this is in an existing tutorial, or you can skip to the Gist. It’s not included here just to keep things simple.

Conclusion

Using Playgrounds avoids the heavyweight simulator that comes with using a Single View Application and all the deployment and certificate headaches that can result.

This article serves as a guide as to how to use Playgrounds to give a speed-boost to your work in Swift and iOS, and I hope it does just that.

Extend your knowledge

  • Apple have created documentation for segues HERE

The Twitter contact:

Any questions? You can get in touch with me HERE

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