IOS developer based in barcelona.

Playgrounds - great for prototyping views

Some time ago I started to use playgrounds for learning purposes, they are super useful. Recently, I tried to use it in a current project with a huge codebase (and also with a huge compile time), just to create views, and the result was encouraging.

If you're working with ObjC and Swift the compilation times aren't good enough yet. So if you're sometimes hopeless with it, my advice is trying playgrounds!

The main idea of the post is creating a project with a playground. We are going to use Cocoapods to simulate all dependencies used in our real project such as Cartography. Besides, we'll add some resources, for instance a Stylesheet, with custom colors, fonts and images.

First of all, we will create an empty project with a  Podfile (after creating the project go to the root project and write the next command).

pod init

Then we are going to add all the pods that we want to use in our playground. In my case, I've only added Cartography.

The next step is opening the already created .xcworkspace and creating a new playground. Then, create a subclass of UIView, import the Cartography framework just installed with Cocoapods and finally start adding constrains for all the subviews. Super easy! See the code below to check the result (or check the Github project)

import UIKit
import Cartography
import PlaygroundSupport

class CustomView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        configure()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configure() {
        addSubviews()
        addConstraints()
    }
    
    func addSubviews() { }
    func addConstraints() { }
}

class MyAwesomeView: CustomView {
    let topView: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        return view
    }()
    
    let containerView: UIView = {
        let view = UIView()
        view.backgroundColor = .white
        return view
    }()
    
    let icon: UIImageView = {
        let imageView = UIImageView()
        imageView.tintColor = .white
        imageView.image = UIImage(named: "image")!.withRenderingMode(.alwaysTemplate)
        return imageView
    }()
    
    override func addSubviews() {
        topView.addSubview(icon)
        [topView, containerView].forEach(addSubview)
    }
    
    override func addConstraints() {
        constrain(topView, containerView, icon) { topView, containerView, icon in
            topView.top == topView.superview!.top
            topView.leading == topView.superview!.leading
            topView.trailing == topView.superview!.trailing
            topView.height == 200
            
            containerView.top == topView.bottom
            containerView.leading == containerView.superview!.leading
            containerView.trailing == containerView.superview!.trailing
            containerView.bottom == containerView.superview!.bottom
            
            icon.center == topView.center
            icon.height == 100
            icon.width == 100
        }
    }
}


let rect = CGRect(x: 0, y: 0, width: 320, height: 540)
let view = MyAwesomeView(frame: rect)

PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = view

If you don't see any result, try to display the assistant editor.

View -> Assistant Editor -> Show Assistant Editor

And you'll see the live view of your code at the right:

Now, you can create a Stylesheet to get some custom colors, fonts, images, etc. I have also added an image inside a resource's folder to use it in my UIView subclass.

One important issue to keep in mind is that the Stylesheet needs to be public in order to use it in our playground. If we don't do so, it won't be visible from our playground.

Our Stylesheet is a simple struct, and it's the one used in my last post. We can reuse it! 

The code below uses two resources from the Stylesheet and one image .

(...)
let topView: UIView = {
        let view = UIView()
        view.backgroundColor = Stylesheet.color(.mainBlue)
        return view
    }()
    
    let containerView: UIView = {
        let view = UIView()
        view.backgroundColor = Stylesheet.color(.mainLightGray)
        return view
    }()
    
    let icon: UIImageView = {
        let imageView = UIImageView()
        imageView.tintColor = Stylesheet.color(.white)
        imageView.image = Stylesheet.image(.icon).withRenderingMode(.alwaysTemplate)
        return imageView
    }()
(...)

Conclusion

The post's main idea is to create a similar environment to your current project with all your dependencies. In this post, we have only added one dependency, but you can try with another common frameworks: Alamofire, Haneke, etc. Creating prototypes in playgrounds are a nice way to learn and create good stuff very quickly. 

I'm all ears to know your feedback, thanks for reading! 😃

Get data from Instagram's private API

Stylesheet - consistency in your style guide