I wanted to learn how to do AutoLayout in code, and I found four libraries (among others) that helps with that. So, I created four different applications, to see the differences between them.

Screenshots:

Comparison:

(image date: Feb-07-2017)

Main screen

SnapKit

box.snp.makeConstraints { make in make.top.equalTo(topLayoutGuide.snp.bottom).offset(10) make.right.equalTo(view).offset(-10) make.bottom.equalTo(view).offset(-10) make.left.equalTo(view).offset(10) } header.snp.makeConstraints { make in make.height.equalTo(box.snp.height).dividedBy(4) make.top.equalTo(box.snp.top) make.right.equalTo(box.snp.right) make.left.equalTo(box.snp.left) } logo.snp.makeConstraints { make in make.height.equalTo(header.snp.height) make.center.equalTo(header.snp.center) } button.snp.makeConstraints { make in make.height.equalTo(50) make.right.equalTo(box.snp.right) make.bottom.equalTo(box.snp.bottom) make.left.equalTo(box.snp.left) }

PureLayout

box.autoPin(toTopLayoutGuideOf: self, withInset: 10) box.autoPinEdge(ALEdge.right, to: ALEdge.right, of: view, withOffset: -10) box.autoPinEdge(ALEdge.bottom, to: ALEdge.bottom, of: view, withOffset: -10) box.autoPinEdge(ALEdge.left, to: ALEdge.left, of: view, withOffset: 10) header.autoMatch(ALDimension.height, to: ALDimension.height, of: box, withMultiplier: 0.25) header.autoPinEdge(ALEdge.top, to: ALEdge.top, of: box) header.autoPinEdge(ALEdge.right, to: ALEdge.right, of: box) header.autoPinEdge(ALEdge.left, to: ALEdge.left, of: box) logo.autoPinEdge(ALEdge.top, to: ALEdge.top, of: header) logo.autoPinEdge(ALEdge.bottom, to: ALEdge.bottom, of: header) logo.autoAlignAxis(ALAxis.horizontal, toSameAxisOf: header) logo.autoAlignAxis(ALAxis.vertical, toSameAxisOf: header) button.autoSetDimension(ALDimension.height, toSize: 50) button.autoPinEdge(ALEdge.right, to: ALEdge.right, of: box) button.autoPinEdge(ALEdge.bottom, to: ALEdge.bottom, of: box) button.autoPinEdge(ALEdge.left, to: ALEdge.left, of: box)

Cartography

constrain(view, box) { view, box in box.top == topLayoutGuideCartography + 10 box.right == view.right - 10 box.bottom == view.bottom - 10 box.left == view.left + 10 } constrain(box, header) { box, header in header.height == box.height / 4 header.top == box.top header.right == box.right header.left == box.left } constrain(header, logo) { header, logo in logo.height == header.height logo.center == header.center } constrain(box, button) { box, button in button.height == 50 button.right == box.right button.bottom == box.bottom button.left == box.left }

Mortar

box.m_top |=| m_topLayoutGuideBottom + 10 box.m_right |=| view.m_right - 10 box.m_bottom |=| view.m_bottom - 10 box.m_left |=| view.m_left + 10 header.m_height |=| box.m_height / 4 header.m_top |=| box.m_top header.m_right |=| box.m_right header.m_left |=| box.m_left logo.m_height |=| header.m_height logo.m_center |=| header.m_center button.m_height |=| 50 button.m_right |=| box.m_right button.m_bottom |=| box.m_bottom button.m_left |=| box.m_left

Check the repositories to see more examples, I will be adding some more screens until I decide which one I will use in my next project.

Edit: I ended up using SnapKit, check this: https://melorriaga.wordpress.com/2017/01/26/using-snapkit-on-a-real-app/

Links

https://github.com/matoelorriaga/LearningSnapKit

https://github.com/matoelorriaga/LearningPureLayout

https://github.com/matoelorriaga/LearningCartography

https://github.com/matoelorriaga/LearningMortar