Use SnapKit, Swift framework, easily

In this short article, I’ll introduce SnapKit.

SnapKit is a lightweight Swift framework abstraction of Apple Auto Layout constraint-based layout engine with more readable and understandable syntax.

It will be hard to understand programmatic contraints with NSLayoutConstraint class who provide hard syntax and operators.

This time is over since SnapKit was out and I'll show you how it's easy to use it.

Setup

You can install it with Cocoapods, Carthage or embed framework. SnapKit is available for OS X and iOS and support iOS7+ or OS X 10.9+ (Swift 2+ and Xcode 7+)

Please refer to SnapKit Github page for more precision about the installation.

Beginning

I started with single view application, and opened the ViewController class

First thing to do: Import SnapKit to the controller

#import SnapKit

I create a simple label and add it to the controller’s view, with “HELLO” text

let label = UILabel(frame: CGRect.zero)
label.text = "Hello"self.view.addSubview(label)

For now, my label is inside the view, if I build the project, I will see …. nothing but a white page !

It’s totally normal because of CGRect.zero on label. Just add sizeToFit() method will show you the label on left top of the view but it’s not the result we expected.

Btw, what do we want ?

It’s simple, we just want our label centered and 25pt below the top of the superview.

This is time to do some SnapKit magic.

SnapKit in use

We will call the snp_makeContraint() method which will allow us to add wanted contraints.

label.snp_makeConstraints { (make) -> Void in    //the place to make our constraints}

It’s a block which give use one variable we named make. This is THE only thing you can care of. Thank’s to that, we will add our contraints easily.

So, let's add 25pt to the top of parent element of our label .

label.snp_makeConstraints { (make) -> Void in    make.top.equalTo(25)}

On make object, we have access a lot of thing, included the top object. Top represent the top of our element. After that, equalTo(25) who represent value of the contraint we made.

This means that top of our element will be 25pt below its parent element, pretty cool isn’t ?

At this point we have the result expected, we can center our element now

Just below our first contraint, we add another line.

label.snp_makeConstraints { (make) -> Void in    make.top.equalTo(25)    make.centerX.equalTo(self.view)}

This means that our element will be centered on X axis of the parent element.

Again, we have expected result, a 25pt top centered label !

There is mutiple possibilities to make this contraints and I'll show you some:

label.snp_makeConstraints { (make) -> Void in    make.top.equalTo(self.view).offset(25) //1
    make.top.equalTo(25) //2
    make.top.equalTo(self.view.snp_top).offset(25) //3    make.centerX.equalTo(self.view) //1
    make.centerX.equalTo(0) //2
    make.centerX.equalTo(self.view.snp_centerX) //3}

For more contraints, and ways to make this contraints

=> http://snapkit.io/docs/

Animate contraints

Now, I will show you how to made an animation on a SnapKit contraint.

For exemple we will take our previous code to make an incrementation of 25pt on our top contraint label.

We need to make an reference to access contraint on our controller.

var topLabelConstraint: Constraint? = niloverride func viewDidLoad() {    super.viewDidLoad()    let label = UILabel(frame: CGRect.zero)    label.text = “HELLO”    self.view.addSubview(label)    label.snp_makeConstraints { (make) -> Void in        self.topLabelConstraint =    make.top.equalTo(self.view).offset(25).constraint        make.centerX.equalTo(self.view.snp_centerX)
    }}

I added an optional variable to my controller named topLabelContraint kind of Contraint (provided by SnapKit)

To keep the reference of our top contraint we use contraint variable of top object and assign it to topLabelContraint.

Now we will can change dynamically the value of the top contraint and make some nice animations.

I added the animation on viewDidAppear just to have time to see what's going on.

override func viewDidAppear(animated: Bool) {    super.viewDidAppear(animated)    if let topLabelConstraint = self.topLabelConstraint {        topLabelConstraint.updateOffset(50)
    }}

If you do that, the constraint will be updated with your value, but there is no animations here with this code.

The way to animate the contraint is pretty similar when you make an animation on a linked storyboard constraint, you need to update the subviews with layoutIfNeeded() method, you can also invalidate current layout if necessary with setNeedsLayout() method on your view

override func viewDidAppear(animated: Bool) {    super.viewDidAppear(animated)    if let topLabelConstraint = self.topLabelConstraint {        topLabelConstraint.updateOffset(50)        UIView.animateWithDuration(2) { () -> Void in             self.view.layoutIfNeeded()        }    }}

Et voilà !

You’ve got a little preview of SnapKit possibilities, this make a difference if you are not comfortable with programatic constraints who are needed for complex views who can’t be done with storyboard.