SnapKit vs PureLayout vs Cartography vs Mortar

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:

captura-de-pantalla-2017-02-07-a-las-23-59-27

(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

Advertisements
SnapKit vs PureLayout vs Cartography vs Mortar

3 thoughts on “SnapKit vs PureLayout vs Cartography vs Mortar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s