SnapKitten — Swift library for linear layout

For a long time, i am a android developer. I love android XML layout editor and it make me easy to achieve the result i want. And i can preview easily in editor.

From android to iOS, there is a equivalent editor — XIB or storyboard and their layout system — constraint system. Personally, i don’t like story board, it’s not easy to define everything in storyboard. And for team development, it sometimes generate conflict in editing. So, i choose SnapKit to be my layout creation tools.
SnapKit is one of best iOS library and i love its syntax, However, iOS constraint system itself still not easy to fully understanding for me. I used few weeks to study constraint system but its result still not always as my expectation. That’s the reason i wrote a library to handle some case that i usually re-use.

In snapKitten, Android’s Linear Layout is referenced. It fully based on SnapKit and Constraint system. The aim is to handle some linear case of iOS Layout design.

The Target of SnapKitten
1. Based on constraint system
2. Solve linear layout like LinearLayout in android
3. Easy to use like SnapKit

Coding Example
Consider we want a user profile layout with a image on left and a user name on right.

let userProfile : UIView = 
Kitten.horizontal().from()
.add(imageView).size(40)
.add(label).itemOffset(10)
.build()

What’s going on?
1. Define the orientation (horizontal / vertical)
2. Choose the parent UIView of userProfile in from() method
3. Kitten add a UIImageView and UILabel
4. After each adding view action, you define some properties of the linear layout.
5. build() return a parent UIView that connected all child views

What’s kitten actually did?
1. It does nothing before you calling build() method. It didn’t add any view and no property change on your view.
2. When build method called, it start to build up constraint between children and its parent container.
3. Included position alignment, size, content compression, content hugging properties.
4. Position and size are not related to any frame origin / size. Pure constraint.

More Complex Example

Consider we need a view controller which have User Profile align top, a menu with three icon align bottom and the remaining middle part is scrollview.

let userProfile : UIView = Kitten.horizontal().from().defaultAlignment(.start)
.add(iv).size(40)
.add(lblA).itemOffset(10)
.build()
userProfile.backgroundColor = UIColor.orange
let bottomMenu =
Kitten.horizontal().from()
.weightMode(true)
.add(ivA).height(60)
.add(ivB).height(60)
.add(ivC).height(60)
.build()
let scrollView = UIScrollView()
Kitten.create(.vertical).from(viewController).isAlignDirectionEnd(true).add(userProfile).alignSideStart()
.add(scrollView).fillParent()
.add(bottomMenu)
.build()

With combination of Kitten, complex layout can be achieved with few lines of code.
What SnapKitten did in this example?
1. In bottom menu, it create a linear view which separate the bottom menu to three equal width parts by weightMode() method.
2. In top menu, UILabel ‘s height is greater than UIImageView. And the orange background is the final area of topMenu.
3. isAlignDirectionEnd(true) make last child align the parent’s end.
4. fillParent() make that child as expand as possible.
5. Kitten allow user from() a view controller which will use its view. In default, it align topLayoutGuide and bottomLayoutGuide

What’s next?
You can now add some subview to scrollview by from(scrollView). Kitten will create a container view with vertical / horizontal orientation support.

How to install SnapKitten?

Install SnapKitten throughs cocoapods

pod "SnapKitten"

How to try SnapKitten’s result?
Test kitten behaviour is easy, create a playground file in your project, and follow the playground instruction in github.

import UIKit
import SnapKitten
import PlaygroundSupport

let virtualView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 100))
virtualView.backgroundColor = UIColor.gray
PlaygroundPage.current.liveView = virtualView

let iv = UIImageView()
iv.backgroundColor = UIColor.red
let lblA = UILabel()
lblA.text = "Hello World"
lblA.backgroundColor = UIColor.blue

let simpleComponent = Kitten.horizontal().from()
.add(iv).size(40)
.add(lblA).itemOffset(10)
.build()
simpleComponent.backgroundColor = UIColor.green

Kitten.create(.vertical).from(virtualView)
    .add(simpleComponent).align(.start)
    .build()

Further Reading

https://github.com/springwong/SnapKitten
In Github, it would be more method description about SnapKitten.

Discussion
As the coding style of swift and concept of SnapKitten is following LinearLayout, SnapKitten layout can be highly re-used in android side. I created another github library Kitten which is a android equivalent of SnapKitten library. However, Java version is still in beta as many things that have to prepare for android layout development without XML.

//some java code example
Kitten.create(KittenOrientation.vertical)                .from(mainView).isAlignDirectionEnd(true)                .add(temp).align(KittenAlignment.parent)                .add(imageView)
.add(textViewA).build();

Thank you for your reading!