This episode is freely available thanks to the support of our subscribers

00:06 Today we're joined by Brandon from Kickstarter once again. Together we'll build an interface in a playground and then move it into a framework that can be used in an actual application. At Kickstarter, the developers only construct a basic view hierarchy in Interface Builder, whereas all of its styling is done in a playground.

00:47 We've prepared a view controller that will serve as a sign-up form. It features a header, three input fields, and a submit button, all contained in a root UIStackView :

import UIKit
import PlaygroundSupport
class MyViewController: UIViewController {
  let rootStackView = UIStackView()
  let titleLabel = UILabel()
  let emailLabel = UILabel()
  let emailTextField = UITextField()
  let emailStackView = UIStackView()
  let nameLabel = UILabel()
  let nameTextField = UITextField()
  let nameStackView = UIStackView()
  let passwordLabel = UILabel()
  let passwordTextField = UITextField()
  let passwordStackView = UIStackView()
  let submitButton = UIButton()
  override func viewDidLoad() {
    super.viewDidLoad()
    self.view.backgroundColor = UIColor(white: 0.95, alpha: 1)
    self.rootStackView.translatesAutoresizingMaskIntoConstraints = false
    self.rootStackView.axis = .vertical
    self.titleLabel.text = "Sign up"
    self.titleLabel.textAlignment = .center
    self.titleLabel.textColor = UIColor.init(white: 0.2, alpha: 1)
    self.nameLabel.text = "Name"
    self.nameStackView.axis = .vertical
    self.nameStackView.addArrangedSubview(self.nameLabel)
    self.nameStackView.addArrangedSubview(self.nameTextField)
    self.emailLabel.text = "Email"
    self.emailStackView.axis = .vertical
    self.emailStackView.addArrangedSubview(self.emailLabel)
    self.emailStackView.addArrangedSubview(self.emailTextField)
    self.passwordLabel.text = "Password"
    self.passwordStackView.axis = .vertical
    self.passwordStackView.addArrangedSubview(self.passwordLabel)
    self.passwordStackView.addArrangedSubview(self.passwordTextField)
    self.submitButton.setTitle("Submit", for: .normal)
    self.view.addSubview(self.rootStackView)
    self.rootStackView.addArrangedSubview(self.titleLabel)
    self.rootStackView.addArrangedSubview(self.nameStackView)
    self.rootStackView.addArrangedSubview(self.emailStackView)
    self.rootStackView.addArrangedSubview(self.passwordStackView)
    self.rootStackView.addArrangedSubview(self.submitButton)
    NSLayoutConstraint.activate([
      self.rootStackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
      self.rootStackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
      self.rootStackView.topAnchor.constraint(equalTo: self.view.topAnchor),
      self.rootStackView.bottomAnchor.constraint(lessThanOrEqualTo: self.view.bottomAnchor),
01:23 We import PlaygroundSupport and set the view controller's view as
the playground's live view in order to immediately see any changes we make:
let vc = MyViewController()
PlaygroundPage.current.liveView = vc
Styling the View Controller
01:36 Our first improvement of the view controller is to style the submit
button, because it's barely visible now. To do this, we'll give it a background
color and make the corners rounded. These are pretty simple changes, but it's
nice to see the live view updating. In viewDidLoad, we add the following:
self.submitButton.backgroundColor = .blue
self.submitButton.layer.cornerRadius = 6
self.submitButton.layer.masksToBounds = true
02:25 Next we'll tweak the form's text field labels to improve the UI's
hierarchy, because it'd be better if the input labels' fonts are smaller than
the title font. Before, we'd set the font size explicitly with
UIFont.systemFont(ofSize:), but it's better to use
UIFont.preferredFont(forTextStyle:) and choose a semantic text style:
self.nameLabel.font = UIFont.preferredFont(forTextStyle: .caption1)
03:33 With another overload of this method, we can request the font
that's suited to the view controller's current trait collection, so it'll adapt
to screen size, orientation, accessibility settings, etc.:
self.nameLabel.font = UIFont.preferredFont(forTextStyle: .caption1, compatibleWith: self.traitCollection)
04:23 We give the text fields a border style:
self.nameTextField.borderStyle = .roundedRect
05:15 The form elements are too tight. The rootStackView holds all the
elements, so we can simply set spacing on it:
self.rootStackView.spacing = 16
06:00 We paste in the remaining styles: a preferred font for the title
label and the submit button, and a different text color for the button's
highlighted state. Because we're working in a playground, we can actually click
the button and see it changing colors:
self.submitButton.titleLabel?.font = UIFont.preferredFont(forTextStyle: .callout, compatibleWith: self.traitCollection)
self.submitButton.setTitleColor(UIColor(white: 1, alpha: 0.5), for: .highlighted)
Testing Trait Collections
06:20 The real power of working in a playground is the ability to
dynamically swap the view controller's trait collection. This allows us to test
the view controller with the characteristics of different devices and
orientations. We wrap the view controller in a parent view controller, which can
override the trait collection. The playground's live view should now be the
parent view. We also paste in some standard layout code, making the child view
fill the parent view:
let parent = UIViewController()
let vc = MyViewController()
parent.addChildViewController(vc)
parent.view.translatesAutoresizingMaskIntoConstraints = false
parent.view.addSubview(vc.view)
NSLayoutConstraint.activate([
    vc.view.leadingAnchor.constraint(equalTo: parent.view.leadingAnchor),
    vc.view.trailingAnchor.constraint(equalTo: parent.view.trailingAnchor),
    vc.view.topAnchor.constraint(equalTo: parent.view.topAnchor),
    vc.view.bottomAnchor.constraint(equalTo: parent.view.bottomAnchor)
PlaygroundPage.current.liveView = parent
07:18 We'll let the parent view controller feed a trait collection to
the child view controller. We can initialize a UITraitCollection for a
particular trait, like contentSizeCategory, sizeClass, or
forceTouchCapability. We can also pass in an array of trait collections, which
is composed to emulate a specific device. We create a trait collection emulating
an iPhone 6:
let traits = UITraitCollection(
    traitsFrom: [
        UITraitCollection(verticalSizeClass: .regular),
        UITraitCollection(horizontalSizeClass: .compact),
        UITraitCollection(preferredContentSizeCategory: .extraExtraLarge)
parent.setOverrideTraitCollection(traits, forChildViewController: vc)
09:08 Finally, we can set the parent's preferred content size, which
will be useful later when we want to emulate an iPad with a larger size:
parent.preferredContentSize = .init(width: 320, height: 568)
10:07 The developers at Kickstarter wrote a helper method called
playgroundWrapper. This method takes a child view controller and some
parameters and returns a parent view controller configured with the correct size
and trait collection. We simply use a couple enums to describe the configuration
we want to emulate:
let anotherVc = MyViewController()
let anotherParent = playgroundWrapper(child: anotherVc, device: .phone4inch, orientation: .portrait, contentSizeCategory: .accessibilityExtraExtraExtraLarge)
PlaygroundPage.current.liveView = anotherParent
12:10 It's easy to change parameters and test a smaller
contentSizeCategory or set the device to .pad. The live view automatically
updates with the correct layout.
Using a Framework
12:58 In order to use this code in an actual app, we need to create a
framework. In the project settings in Xcode, we add a new Cocoa Touch framework
to the targets.
13:46 This adds a directory to the project outline. We've prepared a
view controller and a storyboard based on the code above, so we drag these two
files into the framework directory and make sure to "Copy items if needed."
14:12 We've prepared a version of the signup view controller class with
outlets for the UI components and everything made public. The storyboard has
the most basic setup of the view hierarchy, without styling or even names put in
the labels, which is something that's all done in the view controller.
14:43 Now we want to use the framework's view controller from within the
playground, but before we can do so, we have to build the framework.
14:58 We can now import the framework in a blank playground page. We
need access to the Storyboard, from which we'll instantiate the signup view
controller. We can initialize a UIStoryboard from both its name and a
Bundle:
import UIKit
import PlaygroundSupport
import MyFramework
let bundle = Bundle(for: StoryboardSignupViewController.self)
let storyboard = UIStoryboard(name: "StoryboardSignupViewController", bundle: bundle)
let vc = storyboard.instantiateInitialViewController()!
16:21 We use the playground helper to create a parent, which will be
shown in the playground's live view:
let parent = playgroundWrapper(child: vc, device: .phone4_7inch, orientation: .landscape, contentSizeCategory: .large)
PlaygroundPage.current.liveView = parent
17:23 As an additional UI element, the storyboard has a disclaimer
label for terms and conditions. We can use this to see how styling works in the
current setup. We go back into the framework's view controller and style the
label:
self.disclaimerLabel.font = UIFont.preferredFont(forTextStyle: .caption2, compatibleWith: self.traitCollection)
self.disclaimerLabel.textAlignment = .center
18:09 With that, we build the framework. Switching back to the
playground, we see the updated layout of the view controller. It's important to
remember to build the framework so that the playground has the newest code.
Kickstarter Example
18:44 Kickstarter does playground-driven development in its real app.
By using this technique, Kickstarter can provide some entry points to
customizing interfaces. This allows project managers or designers who haven't
worked on the interface to test and play with the view controller while tweaking
its parameters.
19:03 We look at a playground that shows off the user's dashboard of
the Kickstarter app, which features various stats of the user's projects. The
playground has some top-level variables that can be used to see how different
parameters affect the interface:
19:51 It's even possible to switch the UI language — e.g. to German,
which typically has words which are 30 percent longer than in English — in order
to quickly check how the interface behaves in different localizations.
20:49 Playground-driven development allows us to see how the interface
works in various configurations. As it's interactive, we can click our
interface's buttons in the playground and see the various button states.
20:56 We've been playing around with playground-driven development and
we're impressed with how smart and fun it is.