61

I've created a simple playground with XCode 7.1 and I've typed this simple code:

import UIKit 
import XCPlayground 

var str = "Hello, playground" 

let color = UIColor (red: 1 , green: 1 , blue: 0 , alpha: 0 ) 

let view = UIView() 
view.backgroundColor = UIColo (colorLiteralRed: 1 , green: 0 , blue: 0 , alpha: 0 ) 

view.frame = CGRect (x: 0 ,y: 0 ,width: 100 ,height: 100 ) 

let label = UILabel (frame: CGRect (x: 5 , y: 5 , width: 50 , height: 20 )) 

label.text = str 

view.addSubview(label) 

When the playground runs, it doesn't show UIKit object preview, but only debug information:

playground

What am I doing wrong?

mfaani
  • 33,269
  • 19
  • 164
  • 293
Lubbo
  • 1,030
  • 1
  • 10
  • 18

9 Answers9

169

Open the preview panel: View > Assistant Editor > Show Assistant Editor

Then in your code:

import PlaygroundSupport
PlaygroundPage.current.liveView = view

Don't forget to give your view a visible frame.


Ps: after Xcode 9, you can create a playground with default view

playground

duan
  • 8,515
  • 3
  • 48
  • 70
  • 1
    XCode7 changed the UIKit rendering behaviour introducing XCPlayground? See this: http://stackoverflow.com/questions/24009598/does-swift-playground-support-uikit – Lubbo Nov 05 '15 at 12:46
  • As shown [in the following Q&A](http://stackoverflow.com/questions/40449795/how-do-you-create-an-ios-liveview-in-xcode-8-swift-3), for Xcode 8 the above will need to be slightly modified (`import PlaygroundSupport` and `PlaygroundPage.current.liveView = view`). – dfrib Nov 06 '16 at 14:07
  • Awesome examples can be found here: https://github.com/uraimo/Awesome-Swift-Playgrounds – shallowThought Nov 06 '16 at 14:18
  • 3
    The ```PlaygroundPage.current.liveView = view``` make a black square appears in the assistant editor pane. But, there's no "hello playground" appearing inside it .. :-/ – yves Baumes Apr 25 '17 at 10:06
  • Too bad there's no apparent documentation for this. Searching all kinds of 'iPad Playground Swift' combination brings nothing from Apple aside from the 'learn to code' and previews pages. If not here, I could have never get to an 'XCPlaygroundPage' from any Apple page. Would be nice to actually have the iPad Playground appeal just a little to actual developers. Was really expecting it in the actual iPad App. – bauerMusic May 04 '17 at 06:28
  • This worked for me. Thank you. in my case I had to call ViewController class like this... after I defined it. `PlaygroundPage.current.liveView = ViewController()` – Rakshitha Muranga Rodrigo Jul 22 '22 at 20:26
36

The accepted answer is a screen-shot, not in-line code, and it shows how to do this pre Xcode 8, so I don't think it's a good answer.

Here is an updated answer For Xcode 8:

There are several steps:

You need to import PlaygroundSupport

import PlaygroundSupport

You need to set PlaygroundPage.current.needsIndefiniteExecution to true:

PlaygroundPage.current.needsIndefiniteExecution = true

You need to add the view hierarchy you want to display to the liveView:

PlaygroundPage.current.liveView = container

The whole playground might look like this:

import UIKit
import PlaygroundSupport

let container = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
view.backgroundColor = UIColor.red
container.addSubview(view)

PlaygroundPage.current.liveView = container
PlaygroundPage.current.needsIndefiniteExecution = true

Finally, you need to see the live view you just created. On my copy of Xcode 8 (release version) If I try to select view menu>assistant editor>Show Assistant Editor Xcode crashes, every time.

I have to hover my mouse on the right side of the screen in the box to the right of the code, on the line where I create the container view. I see a little eye icon, and if I click on that, it shows the live view without crashing.

Community
  • 1
  • 1
Duncan C
  • 128,072
  • 22
  • 173
  • 272
  • 1
    Duncan C did you get to display anything UIView related besides the small previews? I have the same problem, XCode 8.2 doesn't crash but it just doesn't show anything neither in Assistant Editor pane nor in the results below, only the eye icon and the small rect button (show inline) work. – konrad Feb 20 '17 at 16:07
  • Parenthetically, I've found that, on more occasions than not, I've had to quit and restart Xcode to get the liveView "simulator" to take, even as the code builds fine, and the little previews found by clicking the eyeball or square icons in the gutter show what I would expect. – bleeckerj Apr 02 '17 at 16:36
  • 2
    The `needsIndefiniteExecution` property is true by default – code4latte Apr 27 '17 at 17:36
  • Interaction(e.g. clicking on buttons) requires setting `needsIndefiniteExecution = true` explicitly. – Desmond DAI May 02 '17 at 16:18
  • @code4latte, needsIndefiniteExecution is not true by default. See Desmond's comment. – Duncan C May 02 '17 at 17:30
  • As long as you're setting `liveView`, you don't need to set `needsIndefiniteExecution` to `true`. I can interact with the live view just fine without changing the `needsIndefiniteExecution` property. – Tim Vermeulen Oct 07 '18 at 21:27
  • This has likely changed in the ≈2 years since I posted this. – Duncan C Oct 07 '18 at 22:38
13

For those of you who experience the problem that the assistant editor doesn't do anything (for me it was simply blank), here is how I solved the problem.

  1. Use that code to test: https://stackoverflow.com/a/33543820/4572536 (accepted answer from above)

  2. View -> Assistent Editor -> Assistent Editors on Bottom (or any other option)

The latter will trigger Xcode to redraw the view.

Note: I'm sharing this as a possible workaround, because for me my Xcode didn't draw the view even after full system restarts. I have no idea how to reproduce that issue, but if you happen to bump into it you can try this workaround.

Community
  • 1
  • 1
DevAndArtist
  • 4,971
  • 1
  • 23
  • 48
8

Besides syntax, I found an other trick to bring live view back to display in my case(Xcode 8.2.1 Swift 3.0). Also this might a minor bug in Xcode. Just click the + button at the top of assistant editor. Because sometime your assistant editor is showing the interface file of your file and refuse to automatically show live page.

enter image description here

code4latte
  • 560
  • 9
  • 9
4

After creating Xcode playground for a single view and running it for the first time, don't forget to activate Assistant Editor in the right upper corner to enable Live View. enter image description here

Viktor Malyi
  • 2,298
  • 2
  • 23
  • 40
3

Just check Show Timeline under Playground Settings.

Nathan Tuggy
  • 2,237
  • 27
  • 30
  • 38
Fiko
  • 39
  • 1
2

I don't see why you need the container view the previous answer requires. This works just as well:

import UIKit
import XCPlayground
import PlaygroundSupport
var str = "Hello, playground"
let color = UIColor (red: 1 , green: 1 , blue: 0 , alpha: 0 )
let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = UIColor.red
view.frame = CGRect (x: 0 ,y: 0 ,width: 200 ,height: 200 )
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = view
let label = UILabel (frame: CGRect (x: 5 , y: 5 , width: 200 , height: 20 ))
label.text = str
view.addSubview(label)
jglasse
  • 1,188
  • 12
  • 23
2

You can go to Editor > Select Live View. Checked it in XCode 11.5

There is no need of setting needsIndefiniteExecution to true, playground pages with live views will automatically set this to true.

enter image description here

Shashank Mishra
  • 1,051
  • 7
  • 18
1

In Xcode 8.3 I'm still having issues. The only thing that works is shutting down Xcode and relaunching it. I tried quitting the simulator since I notice it is running the simulator, but this didn't fix the issue. Will file a radar.

import UIKit

import PlaygroundSupport



let frame = CGRect(x: 0, y: 0, width: 300, height: 700)
let container = UIView(frame: frame)
container.backgroundColor = .red

let inner = UIView(frame: CGRect(x: 100, y: 100, width: 20, height: 40))

inner.backgroundColor = .blue
container.addSubview(inner)

PlaygroundPage.current.liveView = container
PlaygroundPage.current.needsIndefiniteExecution = true
SmileBot
  • 19,393
  • 7
  • 65
  • 62