Adding Playgrounds to Xcode Projects

Playgrounds are a great way to try out ideas but I have tended to use them standalone. They also make great companions when added to your Xcode projects. I especially like being able to use the playground live view to preview view and layout code without the need for Interface Builder.

Unfortunately a playground does not automatically get access to the code and resources of a project. Getting it all setup the first time is a pain so for future reference here is my step-by-step guide.

Creating a Custom View

To show the idea I have a minimal Xcode project, named GridView, based on the single view application template. Suppose I am using this project to develop a custom view that should draw a grid view with a configurable number of rows and columns. The details are not interesting but here is the interface to the class:

class GridView : UIView {
  var rowCount: Int { get set }
  var columnCount: Int { get set }
  var lineColor: UIColor { get set }
  var lineWidth: CGFloat { get set }
  override func draw(_ rect: CGRect) -> <<error type>>
}

I can make this view designable and inspectable so that I can preview and configure it directly in Interface Builder. But what if I am not using Interface Builder? A playground live view can help fill that gap. Let’s look at how to do it.

Creating a Workspace

The first step is to create an Xcode workspace to contain both the Xcode project and the playground. Starting from my basic Xcode project use “Save As Workspace…” from the File menu.

I named the workspace GridView after the project name and saved the xworkspace file in the same location as the xcodeproj file:

Create Workspace

Remember in future to open the workspace file not the project or playground.

Adding a Playground

Add a new playground to the workspace with “File > New > File…” (⌘N). Choose the Playground template, name the Playground and save it in the same location as the xcodeproj and xcworkspace files.

Before you click “Create” make sure to add the new playground to the workspace and not the project. In the “Group” menu change to the top level workspace:

Playground creation

At this point you should have project, workspace and playground files in the root folder of the project:

Project Files

The project navigator should have both the playground and project at the top level:

Project Navigator

Unfortunately we can’t just start using our project code and resources in the playground. The playground is its own module and cannot see the application target module. To get around that we can create a framework that we import into the playground.

Creating a Framework

To create a framework for our custom view, use “File > New > Target…” and choose the “Cocoa Touch Framework” template:

Cocoa Touch Framework

Name the framework (I used GridViewUI) and change “Embed In Application” to “None”:

Create Framework

We can now add those files we want to use in the playground to the framework target. In this case I just have the GridView class to add. Click on GridView.swift in the project navigator and then use the file inspector to add it to the framework. If I had other resources to share I would also add them to the framework at this point.

Target Membership

Note that I am leaving the GridView class as a member of the application target. In this simple case I am only creating the framework for use by the playground and not using it in the application. If you choose to embed the framework in the application remove the class from the application target.

We also need to make any interface we want to access from the playground public. The default internal access level restricts access to the module. So for example, make any type, property or method that you want to access in the playground public:

public class GridView : UIView {
  public var rowCount: Int ...
  ...
}

Build the Framework

Any time you add, remove or change files in the framework remember to rebuild it. With the framework target selected, choose one of the iOS simulators and then build the product (⌘B):

Build Framework

Import and Use

We should now be able to import the framework and use our GridView class in the playground:

import UIKit
import GridViewUI
import PlaygroundSupport

let grid = GridView()
grid.backgroundColor = .lightGray
grid.rowCount = 3
grid.columnCount = 3
grid.lineColor = .blue
grid.lineWidth = 5

grid.frame = CGRect(x: 0, y: 0, width: 200, height: 300)
PlaygroundPage.current.liveView = grid

Use the assistant editor to show the live view:

Live view

That’s all there is to it.

Create a Playground Tab

I like to use Xcode Behaviors to automatically configure a tab to show the playground with the assistant editor. I have the shortcut ⌃⌥⌘P assigned to switch to it:

Xcode behavior

Getting the Code

You can find the full GridView Xcode project in my GitHub CodeExamples repository here:

Never miss a post!

iOS Size Classes Cheat Sheet

Subscribe and get my free iOS Size Classes Cheat Sheet

Success! Now check your email to confirm your subscription and download your free guide to iOS Size Classes.

There was an error submitting your subscription. Please try again.

Unsubscribe at any time.
No time to watch WWDC videos?

Sign up to get my iOS posts direct to your inbox and I will send you a free PDF of my iOS Size Classes Cheat Sheet.

OK! Check your inbox (or spam folder) for an email to confirm your details and download your free guide to iOS Size Classes.

There was an error submitting your subscription. Please try again.

Unsubscribe at any time.
Archives Categories