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

Subscribers get exclusive access to new and all previous subscriber-only episodes, video downloads, and 30% discount for team members. Become a Subscriber

We create an abstraction around stack views using enums to specify UI elements in a declarative style.

0:06 We've used stack views a lot, especially for prototyping, as they're very convenient for quickly throwing together some views. However, since we're setting our views up in code (see the Connecting View Controllers episode for one reason why we're doing this), we still have to write quite a bit of boilerplate code to set up a stack view. As such, it would make sense to create an abstraction to simplify this process.

Creating a UIStackView in Code

1:16 We start out with a simple view controller, which sets up a stack view in the traditional way in its viewDidLoad method:

final class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .whiteColor()

        let stack = UIStackView()
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .Vertical
        stack.spacing = 10
        view.addSubview(stack)

        stack.constrainEqual(.Width, to: view)
        stack.center(in: view)

        let image = UIImageView(image: [#Image(imageLiteral: "objc-logo-white.png")#])
        stack.addArrangedSubview(image)

        let text1 = UILabel()
        text1.numberOfLines = 0
        text1.text = "To use the Swift Talk app please login as a subscriber"
        stack.addArrangedSubview(text1)

        let button = UIButton(type: .System)
        button.setTitle("Login with GitHub", forState: .Normal)
        stack.addArrangedSubview(button)

        let text2 = UILabel()
        text2.numberOfLines = 0
        text2.text = "If you're not registered yet, please visit http://objc.io for more information"
        stack.addArrangedSubview(text2)
    }
}

1:33 For the image, we use playground's image literals, which are super convenient for quickly loading an image from the playground's resources. The button is not yet hooked up to an action, but we'll take care of this later on.

1:57 We instantiate this view controller in the playground and preview its view:

let vc = ViewController()
vc.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
vc.view

Describing Views with Enums

2:12 While using a stack view like this is really convenient because it handles all the layout for you, it's still a lot of code to write. There's also a lot of duplication when creating the views, like setting the numberOfLines property on UILabel — especially since most of the labels in our app will be configured very similarly.

2:51 One approach to building an abstraction around stack views is to define an enum for the different content types we want to display:

enum ContentElement {
    case label(String)
    case button(String) // TODO: Add an action
    case image(UIImage)
}

3:29 Now we could build a description of what we want to show using ContentElements and then somehow convert them into views. Before we do that though, we have to remember that the button case still needs a way to associate an action with it. We'll look at this at the end.

4:10 To create the views for the different cases of ContentElement, we add an extension with a computed property, view, which is of type UIView. Here, we switch on self to handle each case. For the .label case, we return a UILabel; to do this, we can copy from the viewDidLoad method we wrote before. We just have to change the name from text1 to label and replace the hardcoded string with the associated value from the .label case. We build the other two cases, .button and .image, in the same way:

extension ContentElement {
    var view: UIView {
        switch self {
        case .label(let text):
            let label = UILabel()
            label.numberOfLines = 0
            label.text = text
            return label
        case .button(let title):
            let button = UIButton(type: .System)
            button.setTitle(title, forState: .Normal)
            return button
        case .image(let image):
            return UIImageView(image: image)
        }
    }
}

5:56 Let's use ContentElements to create the views we add to our stack view:

let image = ContentElement.image([#Image(imageLiteral: "objc-logo-white.png")#]).view
stack.addArrangedSubview(image)

let text1 = ContentElement.label("To use the Swift Talk app please login as a subscriber").view
stack.addArrangedSubview(text1)

let button = ContentElement.button("Login with GitHub").view
stack.addArrangedSubview(button)

let text2 = ContentElement.label("If you're not registered yet, please visit http://objc.io for more information").view
stack.addArrangedSubview(text2)

6:15 In the image case, the code hasn't improved considerably. The setup of the labels and the button is a bit nicer though. Overall, it's a modest win, but there's much more we can do with ContentElements.

Building Stack Views from Enums

7:15 As a next step, we'll add an initializer to UIStackView. This initializer takes an array of ContentElements and adds their views to the stack view in one batch. Without subclassing, we can only add a convenience initializer to existing classes:

extension UIStackView {
    convenience init(elements: [ContentElement]) {
        self.init()
        for element in elements {
            addArrangedSubview(element.view)
        }
    }
}

8:28 Now we can delete all the calls to addArrangedSubview in viewDidLoad and pass the content elements into the new initializer:

let image = ContentElement.image([#Image(imageLiteral: "objc-logo-white.png")#])
let text1 = ContentElement.label("To use the Swift Talk app please login as a subscriber")
let button = ContentElement.button("Login with GitHub")
let text2 = ContentElement.label("If you're not registered yet, please visit http://objc.io for more information")

let stack = UIStackView(elements: [image, text1, button, text2])

9:16 If we pull out the elements array and specify a type on the variable, we can also get rid of all the ContentElement. prefixes:

let elements: [ContentElement] = [
    .image([#Image(imageLiteral: "objc-logo-white.png")#]),
    .label("To use the Swift Talk app please login as a subscriber"),
    .button("Login with GitHub"),
    .label("If you're not registered yet, please visit http://objc.io for more information")
]

let stack = UIStackView(elements: elements)

10:12 This is a declarative way of describing our user interface, in that it's very readable. Additionally, we can move the configuration of the stack view into the initializer, since most stack views will be configured similarly in our project. This allows us to remove more boilerplate code from the viewDidLoad method:

extension UIStackView {
    convenience init(elements: [ContentElement]) {
        self.init()
        translatesAutoresizingMaskIntoConstraints = false
        axis = .Vertical
        spacing = 10

        for element in elements {
            addArrangedSubview(element.view)
        }
    }
}

Building a Stack View Controller

10:59 To remove even more code, we can create an entire view controller that is initialized with an array of content elements. This way, we avoid repeating the steps that are still necessary in the view controller's viewDidLoad method.

11:29 Our StackViewController class has a custom initializer that takes a parameter of type [ContentElement], just as the convenience initializer on UIStackView did. Here we call the designated super initializer and store the content elements in a property:

final class StackViewController: UIViewController {
    let elements: [ContentElement]

    init(elements: [ContentElement]) {
        self.elements = elements
        super.init(nibName: nil, bundle: nil)
    }
    // ...
}

12:09 To set up the stack view, we can start with our existing implementation of viewDidLoad. We just have to cut out the definition of the elements array; we'll paste it back in later when we instantiate our stack view controller. Lastly, we also have to add the default implementation of the required initializer to make the code compile:

final class StackViewController: UIViewController {
    let elements: [ContentElement]

    init(elements: [ContentElement]) {
        self.elements = elements
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .whiteColor()

        let stack = UIStackView(elements: elements)
        view.addSubview(stack)
        stack.constrainEqual(.Width, to: view)
        stack.center(in: view)
    }
}

12:52 To test the StackViewController class, we paste our elements array back in where we instantiate the view controller:

let elements: [ContentElement] = [
    .image([#Image(imageLiteral: "objc-logo-white.png")#]),
    .label("To use the Swift Talk app please login as a subscriber"),
    .button("Login with GitHub", {
        print("Button tapped")
    }),
    .label("If you're not registered yet, please visit http://objc.io for more information")
]

let vc = StackViewController(elements: elements)

13:03 The resulting view is still the same as what we started with, but the code to create it is short and descriptive. An abstraction like StackViewController allows us to quickly prototype a screen. This is useful for communicating with other people involved, and we can always make it look nice later.

A Button with a Callback

13:32 We still have to make the ContentElement.button case work. So far, it does nothing, and we have no way of specifying an action. The easy part is adding a callback to the enum case, which should be executed when the user taps on the button:

enum ContentElement {
    // ...
    case button(String, () -> ())
}

14:29 However, getting this callback to work with UIButton is a bit problematic. We could try to subclass UIButton and keep a reference to the callback there, but that doesn't work too well. For example, the documentation of the initializer UIButton(type:) tells us that it won't return an instance of a custom subclass, so subclassing is a bit fragile, and it gets tricky to do it right.

15:52 Another approach is to create a simple wrapper around UIButton, which receives the .TouchUpInside event of the button and calls our callback. We call this class CallbackButton, and it inherits from UIView. The initializer takes the button title and the callback. It stores the callback in a property, sets up the button instance as a subview, and adds constraints to the button:

final class CallbackButton: UIView {
    let onTap: () -> ()
    let button: UIButton

    init(title: String, onTap: () -> ()) {
        self.onTap = onTap
        self.button = UIButton(type: .System)
        super.init(frame: .zero)
        addSubview(button)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.constrainEdges(to: self)
        button.setTitle(title, forState: .Normal)
        button.addTarget(self, action: #selector(tapped), forControlEvents: .TouchUpInside)
    }
    // ...
}

18:26 Now we can add the tapped method, which finally calls the callback we handed into the initializer:

func tapped(sender: AnyObject) {
    onTap()
}

18:41 Lastly, we again have to add the default implementation for the required initializer. The complete CallbackButton class looks like this:

final class CallbackButton: UIView {
    let onTap: () -> ()
    let button: UIButton

    init(title: String, onTap: () -> ()) {
        self.onTap = onTap
        self.button = UIButton(type: .System)
        super.init(frame: .zero)
        addSubview(button)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.constrainEdges(to: self)
        button.setTitle(title, forState: .Normal)
        button.addTarget(self, action: #selector(tapped), forControlEvents: .TouchUpInside)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func tapped(sender: AnyObject) {
        onTap()
    }
}

18:49 The CallbackButton class is kind of a crutch, because we have to bridge UIKit's target/action mechanism to our button callback. But at least it works and it's safe.

19:07 Now we just have to make use of the CallbackButton in ContentElement's view property. We change the .button case like this:

extension ContentElement {
    var view: UIView {
        switch self {
        // ...
        case .button(let title, let callback):
            return CallbackButton(title: title, onTap: callback)
        }
    }
}

19:35 We ended up with a very declarative way of building our stack view, which we've found to be a helpful prototyping tool.

20:05 We can extend our implementation in a few obvious ways in the future — for example, by adding a custom case to display arbitrary instances of UIView. Adding an asynchronous case would also be interesting. This could give us a chance to load data from the network and swap the view in once the result comes back. On the other hand, adding more and more cases will make this simple abstraction increasingly more complicated. As a result, we might just end up implementing it for all of UIKit, so we should stick to the things we really need for our project.

20:52 Another interesting use case for this abstraction could be to construct the view hierarchy out of data we receive, e.g. from the server. We could easily transform a JSON dictionary into ContentElements and build a StackViewController on the fly.

21:27 There are many interesting possibilities, but even in this simple form, the abstraction helps us iterate faster and write cleaner code.