Overview
When you open Xcode, you'll find your Play export under "Package Dependencies" in the left panel.
To see how to implement specific items of your project, you can either:
See the implementation of a specific component or page from the Play SDK section of the SwiftUI Code panel.
See a list of all implementation (including styles, assets, and variables) on the implementation slide of the Play to Xcode module.
We've included the implementation examples in the sections below.
Notes on resizing:
Objects that have Fill width or height in Play will render as screenWidth or screenHeight in Xcode, respectively.
Once in Xcode, components cannot be resized. Frame modifier or constraint size modifiers will not work.
We plan to add these functionalities in the next release!
SwiftUI Implementation
Pages
Load Page
import SwiftUI
import Play
struct ContentView: View {
var body: some View {
SectionPage()
}
}
Update Page Images and Text
Select the image or text element, and give it a new value.
Page()
.setImage(.image, value: UIImage?)
.setText(.text, value: String?)
Set .image and/or .text to the node name:
Page()
.setImage(element: elementName, value: UIImage)
Use Page Variables
Set a page's variables by setting them in the view's initializer.
SectionPage(pageTint: Color)
Use On Variable Change to listen for a page variable to change and complete an action when it does.
SectionPage()
.onVariableChange(variable: \\.pageTint) { val in
// Do something here
}
}
Components
Load Component
import SwiftUI
import Play
struct ContentView: View {
var body: some View {
CardMedium()
}
}
Update Component Images and Text
Select the image or text element, and give it a new value.
CardMedium()
.setImage(.image, value: UIImage?)
.setText(.text, value: String?)
Set .image and/or .text to the node name:
CardMedium()
.setImage(element: elementName, value: UIImage)
Change States
@State var state: Name.State? = .defaultState
struct ContentView: View {
var body: some View {
Name()
.state($state)
}
}
Name()
.onStateChange { state, animation in
// Do something here
}
Use Component Variables
Set a component's variables by setting them in the view's initializer.
CardMedium(isFavorited: Boolean)
Use On Variable Change to listen for a components variable to change and complete an action when it does.
CardMedium()
.onVariableChange(variable: \\.isFavorited) { val in
// Do something here
}
}
CardMedium(accent: Color)
Variables
To access page or component variables, see the sections above on page and component implementation.
Use Global Variables
Set global variables by setting them in the view's initializer.
onAppear() {
Global.apiURL = "Hello, World!"
}Listen for a global variable to change and complete an action when it does.
VStack { ... }
.onReceive(Global.$apiURL, perform: { _ in
// Do something here
}
Use Global Variables
Get the global variable.
.onAppear() {
Globals.getVariable(variable: \.renamedVariable)
// Do something here
}Set the global variable.
.onAppear() {
Globals.setVariable(\.renamedVariable, value: 1984)
}Listen for a global variable to change and complete an action when it does.
.onAppear() {
Globals.onVariableChange(variable: \.renamedVariable)
{ value in
// Do something here
})
}
Styles
Color
.foregroundStyle(Colors.accentRed)
Type
.font(Typography.header.text)
Typography.header.fontSize
Typography.header.kerning
Typography.header.lineHeight
Typography.header.name
Typography.header.textTransform
Spacing
.padding(Spacing._8)
Radius
RoundedRectangle(cornerRadius: Radius._12)
Gradient
Not available yet, but coming soon!
Assets
Image
Image(uiImage: Images.MyImage.uiImage)
Video
AVPlayer(url: Videos.MyVideo.url)
Font
Not available yet, but coming soon!
UIKit Implementation
Pages
Load Page
import SwiftUI
import Play
struct ContentView: View {
var body: some View {
SectionPage()
}
}
Update Page Images and Text
Select the image or text element, and give it a new value.
Page()
.setImage(.image, value: UIImage?)
.setText(.text, value: String?)
Set .image and/or .text to the node name:
Page()
.setImage(element: elementName, value: UIImage)
Use Page Variables
Set a page's variables by setting them in the view's initializer.
SectionPage(pageTint: Color)
Use On Variable Change to listen for a page variable to change and complete an action when it does.
SectionPage()
.onVariableChange(variable: \\.pageTint) { val in
// Do something here
}
}
Components
Load Component
import UIKit
import Play
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(CardMedium())
}
}
Update Component Images and Text
Select the image or text element, and give it a new value.
CardMedium()
.setImage(.image, value: UIImage?)
.setText(.text, value: String?)
Set .image and/or .text to the node name:
CardMedium()
.setImage(element: elementName, value: UIImage)
Change States
CardMedium()
.state(.default)
Use Component Variables
Set a component's variables by setting them in the view's initializer.
CardMedium(isFavorited: Boolean)
Use On Variable Change to listen for a components variable to change and complete an action when it does.
CardMedium()
.onVariableChange(variable: \\.isFavorited) { val in
// Do something here
}
}
CardMedium(accent: Color)
Variables
To access page or component variables, see the sections above on page and component implementation.
Use Global Variables
Get the global variable.
Globals.getVariable(variable: \.variableName)
Set the global variable.
Globals.setVariable(\.variableName, value: newValue)
Listen for a global variable to change and complete an action when it does.
Globals.onVariableChange(variable: \.variableName)
{ value in
// Do something here…
}
Styles
Color
view.backgroundColor = Colors.accentRed
Type
let label: UILabel = .init()
label.attributedText = Typography.header.nsAttributedString("Hello, World!")
Typography.header.fontSize
Typography.header.kerning
Typography.header.lineHeight
Typography.header.name
Typography.header.textTransform
Spacing
let stackView: UIStackView = .init() stackView.spacing = Spacing._8
Radius
view.layer.cornerRadius = Radius._12
Gradient
Not available yet, but coming soon!
Assets
Image
let imageView: UIImageView = .init() imageView.image = Images.MyImage.uiImage
Video
let avPlayer: AVPlayer = .init(url: Videos.MyVideo.url)
Font
Not available yet, but coming soon!