Guides and Sample Code


Playground Book Format Reference

On This Page

PlaygroundLiveViewSafeAreaContainer Protocol

A type that provides access to a UILayoutGuide for the area of the live view that is not covered by any Swift Playgrounds user interface elements.


This protocol provides liveViewSafeAreaGuide, a UILayoutGuide property set to the safe area. This is the part of the live view that is not covered by any Swift Playgrounds user interface elements, such as the Run button. The bounds of the frame for the safe area depend on the setting of the LiveViewEdgeToEdge key for the current page. When this key is set to false, the safe area is the live view area. When it is set to true, the safe area can be smaller than the live view area shown in the following screenshot. For more information on LiveViewEdgeToEdge, see LiveViewEdgeToEdge Key.

image: ../Art/SP_PlaygroundSupport_SafeArea_compare_2x.png

You can use this property to constrain the bounds of your content view inside the bounds of the safe area. To access the property, conform your UIViewController or UIView class to the protocol.

Instance Properties


The area of the live view that is not covered by other Swift Playgrounds user interface elements.


  1. var liveViewSafeAreaGuide: UILayoutGuide { get }

Return value

A UILayoutGuide that can be used to constrain the size of a view to the live view safe area.


The following source code creates a dark gray, edge-to-edge live view and adds a subview for the content. The inner view is set to fill the live view safe area.

Line 4 defines the MyLiveView class that conforms to the PlaygroundLiveViewSafeAreaContainer protocol. Lines 6 and 7 create liveView, an instance of MyLiveView, and set the background color to dark gray. Line 9 creates innerView, an instance of a custom view class. Line 13 adds innerView as a subview of liveView. Lines 15-20 constrain the the edges of innerView to the bounds of the safe area.

  1. import UIKit
  2. import PlaygroundSupport
  3. class MyLiveView: UIView
  4.                   PlaygroundLiveViewSafeAreaContainer {}
  5. let liveView = MyLiveView()
  6. liveView.backgroundColor = UIColor.darkGray
  7. let innerView = CustomView()
  8. innerView.clipsToBounds = true
  9. innerView.translatesAutoresizingMaskIntoConstraints = false
  10. liveView.addSubview(innerView)
  11. NSLayoutConstraint.activate([
  12.    innerView.leadingAnchor.constraint(equalTo: liveView.liveViewSafeAreaGuide.leadingAnchor),
  13.    innerView.trailingAnchor.constraint(equalTo: liveView.liveViewSafeAreaGuide.trailingAnchor),
  14.    innerView.topAnchor.constraint(equalTo: liveView.liveViewSafeAreaGuide.topAnchor),
  15.    innerView.bottomAnchor.constraint(equalTo: liveView.liveViewSafeAreaGuide.bottomAnchor)
  16. ])
  17. PlaygroundPage.current.liveView = liveView

The screenshot below shows the result of running the code in a playground page with LiveViewEdgeToEdge set to true. liveView fills the entire live view area, and innerView fills the safe area.

image: ../Art/SP_PlaygroundSupport_SafeArea_2x.png

Changing the size of the live view, by making it full screen or by rotating the device, changes the size of the safe area as shown in the following screenshot.

image: ../Art/SP_PlaygroundSupport_SafeArea_changed_2x.png