Swift Automatic Layout library Snapkit usage 1 (Configuration, usage, sample)

Adapted to a variety of screen sizes, IOS 6 introduced the concept of automatic layout (auto Layout), through the use of various Constraint (constraints) to achieve a page adaptive elastic layout. (For more information, see my original article: Swift-use auto layout and size classes to achieve a resilient page layout)

It is convenient to use constraints in StoryBoard to automate layout, but it is cumbersome to set constraints with pure code. Here to recommend a useful Third-party layout library: Snapkit (its predecessor is masonry, an OC version of the layout of the library)

1,snapkit Introduction

Snapkit is an excellent third-party adaptive layout library that lets iOS, OS x applications automate layout (auto Layout) more simply.
Gtihub Address: Https://github.com/SnapKit/SnapKit

2,snapkit Configuration

(1) Drag the downloaded Snapkit project snapkit.xcodeproj into your project directory

(2) in the engineering-> General-> Embedded Binaries, click the plus sign to add Snapkit library to the project

3, first look at a simple use of the sample
Place a 100*100 square view in the center of the page

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller {
lazy var box = UIView ()

Override Func Viewdidload () {
Super.viewdidload ()

Box.backgroundcolor = Uicolor.orangecolor ()
Self.view.addSubview (Box)

box.snp_makeconstraints {(make)-> Void in
Make.width.equalTo (100)
Make.height.equalTo (100)
Make.center.equalTo (Self.view)
}
}
}\

Because of the long width, we can also concatenate view properties to increase readability:
 
Import uikit
Import Snapkit
 
Class Viewcontroller: Uiviewcontroller {
    lazy var box = UIView ()
 
    override func Viewdidl Oad () {
        super.viewdidload ()
         
        box.backgroundcolor = Uicolor.orangecolor ()
        self.view.addSubview (box)
         
        box.snp_makeconstraints {(make)-> Void in
 & nbsp;          Make.width.height.equalTo
             make.center.equalTo (self.view)
        }
   }

How to use 4,snapkit
Through the Snp_makeconstraints method to add constraints to view, there are several constraints, respectively, margin, width, height, left upper right and lower distance, the baseline. At the same time, after adding the constraint can be modified, modified with displacement correction (inset, offset) and magnification correction (Multipliedby)
The syntax is generally: Make.equalto or Make.greaterthanorequalto or Make.lessthanorequalto + multiples and displacement corrections.

. Equalto: Equal To
. Lessthanorequalto: Less than or equal
. Greaterthanorequalto: Greater than or equal
Note: Elements that use the Snp_makeconstraints method must be added to the parent element in advance, for example: Self.view.addSubview (view)

5, the constraint condition parameter supports the following three kinds of types:
(1) View properties (Viewattribute)

View Properties (viewattribute)	Layout Properties (nslayoutattribute)
view.snp_left	nslayoutattribute.left
view.snp_right	nslayoutattribute.right
view.snp_top	nslayoutattribute.top
view.snp_bottom	nslayoutattribute.bottom
view.snp_leading	nslayoutattribute.leading
view.snp_trailing	nslayoutattribute.trailing
view.snp_width	nslayoutattribute.width
view.snp_height	nslayoutattribute.height
View.snp_centerx	nslayoutattribute.centerx
view.snp_centery	nslayoutattribute.centery
view.snp_baseline	nslayoutattribute.baseline

Makes the center x-coordinate of the current view object less than the X coordinate to the left of the view View2
Make.centerX.lessThanOrEqualTo (View2.snp_left)

(2) View relations (Uiview/nsview)
For example, to make view.left greater than or equal to Label.left:

Make.left.greaterThanOrEqualTo (label)
This is actually equivalent to:

Make.left.greaterThanOrEqualTo (Label.snp_left)

(3) Strict testing (Strick Checks)
For example, set the width and height properties to constant values:

Make.height.equalTo (20)
Make.width.equalTo (20)
Make.top.equalTo (42)

6, set constraints on the various properties of the view
(1) Width, height property
Automatic layout allows width and height to be set to constant values.

Make.height.equalTo (20)
Make.width.equalTo (Self.buttonSize.width)
The current view is flush with the top of the label
Make.top.equalTo (Label.snp_top)

(2) left, right, top, CenterX, CenterY and other properties
These properties directly set constant values, representing their relative constraints relative to the parent container. For example, we place the green square in the lower right corner of the Orange Square.

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller {

Outer Squares
Lazy var boxoutter = UIView ()
Inner Square
Lazy var boxinner = UIView ()

Override Func Viewdidload () {
Super.viewdidload ()

Boxoutter.backgroundcolor = Uicolor.orangecolor ()
Self.view.addSubview (Boxoutter)
Boxinner.backgroundcolor = Uicolor.greencolor ()
Boxoutter.addsubview (Boxinner)

boxoutter.snp_makeconstraints {(make)-> Void in
Make.width.height.equalTo (200)
Make.center.equalTo (Self.view)
}

boxinner.snp_makeconstraints {(make)-> Void in
Make.width.height.equalTo (100)
Make.right.equalTo (0)
Make.bottom.equalTo (0)
}
}
}
Of course, you can also use relationships with other views to add constraints. For example: The following green Square view size is the same as the above Orange square, the following view and the left side of the above view, the top of the view below and the bottom of the view level.

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller {

Square 1
Lazy var box1 = UIView ()
Square 2
Lazy var box2 = UIView ()

Override Func Viewdidload () {
Super.viewdidload ()

Box1.backgroundcolor = Uicolor.orangecolor ()
Self.view.addSubview (Box1)
Box2.backgroundcolor = Uicolor.greencolor ()
Self.view.addSubview (Box2)

box1.snp_makeconstraints {(make)-> Void in
Make.left.equalTo (20)
Make.right.equalTo (-20)
Make.height.equalTo (40)
Make.top.equalTo (20)
}

box2.snp_makeconstraints {(make)-> Void in
Make.width.height.equalTo (Box1)
Make.left.equalTo (box1)//equivalent to Make.left.equalTo (box1.snp_left)
Make.top.equalTo (Box1.snp_bottom)
}
}
}

(3) Edges (edge)

Make the current view up or down (top,left,bottom,right) equal to View2
Make.edges.equalTo (VIEW2)

(4) Size (size)

Current View width high >= Titlelabel
Make.size.greaterThanOrEqualTo (Titlelabel)

(5) Center (centre)

The current view is the same as the Button1 Center (CenterX and CenterY)
Make.center.equalTo (button1)

7, displacement correction and magnification correction
(1) Internal displacement correction: inset
For example, the green view in the following figure, which is 10, 15, 20, 25 from the top, left, bottom, and right margins of the parent view, respectively.

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller {

Outer Squares
Lazy var boxoutter = UIView ()
Inner Square
Lazy var boxinner = UIView ()

Override Func Viewdidload () {
Super.viewdidload ()

Boxoutter.backgroundcolor = Uicolor.orangecolor ()
Self.view.addSubview (Boxoutter)
Boxinner.backgroundcolor = Uicolor.greencolor ()
Boxoutter.addsubview (Boxinner)

boxoutter.snp_makeconstraints {(make)-> Void in
Make.width.height.equalTo (200)
Make.center.equalTo (Self.view)
}

boxinner.snp_makeconstraints {(make)-> Void in
Make.edges.equalTo (Boxoutter). Inset (Uiedgeinsetsmake (10, 15, 20, 25))
}
}
}
The offset setting for the top margin actually corresponds to the following form:

Make.top.equalTo (Boxoutter). Offset (10)
Make.left.equalTo (Boxoutter). Offset (15)
Make.bottom.equalTo (Boxoutter). Offset (-20)
Make.right.equalTo (Boxoutter). Offset (-25)

(2) External displacement correction: offset
Let the green view add 50 to the width of the orange view, and the height minus 50.

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller {

Outer Squares
Lazy var boxoutter = UIView ()
Inner Square
Lazy var boxinner = UIView ()

Override Func Viewdidload () {
Super.viewdidload ()

Boxoutter.backgroundcolor = Uicolor.orangecolor ()
Self.view.addSubview (Boxoutter)
Boxinner.backgroundcolor = Uicolor.greencolor ()
Boxoutter.addsubview (Boxinner)

boxoutter.snp_makeconstraints {(make)-> Void in
Make.width.height.equalTo (200)
Make.center.equalTo (Self.view)
}

boxinner.snp_makeconstraints {(make)-> Void in
Make.center.equalTo (Boxoutter)
Make width = superview.width +, height = superview.height-50
Make.size.equalTo (Boxoutter). Offset (Cgsizemake (50,-50))
}
}
}

(3) Magnification correction: Multipliedby

The following sets the size of the green view to half the size of the orange view.

Import Uikit
Import Snapkit

Class Viewcontroller:uiviewcontroller {

Outer Squares
Lazy var boxoutter = UIView ()
Inner Square
Lazy var boxinner = UIView ()

Override Func Viewdidload () {
Super.viewdidload ()

Boxoutter.backgroundcolor = Uicolor.orangecolor ()
Self.view.addSubview (Boxoutter)
Boxinner.backgroundcolor = Uicolor.greencolor ()
Boxoutter.addsubview (Boxinner)

boxoutter.snp_makeconstraints {(make)-> Void in
Make.width.height.equalTo (200)
Make.center.equalTo (Self.view)
}

boxinner.snp_makeconstraints {(make)-> Void in
Make.center.equalTo (Boxoutter)
Make width = superview.width/2, height = superview.height/2
Make.size.equalTo (Boxoutter). Multipliedby (0.5)
}
}
}