Funny

How to write auto layout constraints with SnapKit in iOS


SnapKit : Hello iOS developer pals! You definitely know auto layout for coding. It seems to be complicated to do, doesn’t it? I super extremely proudly present SnapKit for easier and more clearly way to code.

About this How-to

  • Build compelling user interfaces with SnapKit
  • Use SnapKit building view with auto layouts constraints programmatically
  • Step-by-step guide to create complete custom layout

Who this How-to is for

  • iOS Developers who want to become proficient in auto layout
  • Experienced iOS Developers who need try something new in auto layout

What you will learn & Get Plot dynamic layout using SnapKit.

  • Get to know about SnapKit.
  • Forget NSLayoutConstraint 😛
  • No worry for storyboard conflict.
  • Readable code.
  • You can adjust padding in your app just one click (Useful trick).

Let’s GO Install SnapKit

We can install SnapKit via dependencies manages (Cocoapods, Carthage) or Embedded framework but now i’ll show you how to install SnapKit by Cocoapods. If this your first time using cocoapods just open Terminal and typing

Go to the your project directory from

Make new Podfile for your Xcode project

Open Podfile in Text Editor or open directly from terminal

Integrate SnapKit into your Xcode project, specify it in your Podfile

Then, run the following command for install SnapKit

Success!! Now SnapKit integrated with your project, double click on yourproject.xcworkspace file to open Xcode

Usage

First thing you need to import SnapKit framework to your view controller by import statement

Alignment & Positioning

Let’s say we want to layout some UIButton that is constrained to it’s superview at the right bottom edges with 20pts.

snapkit

Align at Bottom Right edges with 20pts of superviewThat is first example in this How-To, I want to explain the view attribute in SnapKit, it similar with NSLayoutAttribute you can align your custom layout easily.

This important method is snp_makeConstraints it will make constraints to your view.

// your constraints

}

Like that custom UIButton we want to stick the button at Bottom-Right of superview with spacing 20pts, we use view attribute of UIButton (bottom and right) for reference to view attribute of superview and use .offset(x) for set padding.

Below is the screen what we should do ?
snapkit
Custom Navigation bar by SnapKitIn the screen you can see custom navigation bar, this nav bar has UIView for background and UILabel for title. We want to stick custom nav bar on top of superview with height 64pts and width equal to superview and title label is embedded inside a UIView(Navigation bar) center. Try …

Finished!

You would know how to alignment and positioning already, then i’ll move on composition by SnapKit.

Composition

SnapKit can do easier way to create multiple constrains at the same time.
snapkit
Edges, Size, CenterEdges : You can adjust size, position of view with .edges

Size : You can adjust size of view with .size

Center : You can align subview to center refer by superview.

Done! In composition example i hope it will help you understand how to use edges, size, center.

Next… What we should do when we want to modify, remove, update constraint after animate or has something ? Don’t worry, SnapKit give 3 different approaches to updating constraints.

References : You can assigning the result of a constraint make expression to a local variable , then you can remove and update that constraint when you want.

snp_remakeConstraints : this method is similar to snp_makeConstraint, but will first remove all existing constraints installed, code below will move my button to bottom-left of superview and resize to 44pts.

snapkit

Constraints Priority

In the Auto layout sometime your view should have priority for decision about adjust the position, size and other.

.priority : allows you to specify an exact priority
.priorityHigh : equivalent to UILayoutPriority.DefaultHigh
.priorityMedium : equivalent to UILayoutPriority.DefaultMedium
.priorityLow : equivalent to UILayoutPriority.DefaultLow

you can add priority on to the end of a constraint chain.

Recommend Trick

Sometime you want to see the result of interface after you added constraints to your view follow mock-up from designer, and then his want to change left-spacing of all element to 20 from 15 … hmmm What you should do ?

It very easy to solve that problem and flexible to change left-spacing of all element by Global constant in Swift.

That good :D.

The example project is ready on Github, you can download here : How to use SnapKit

And you can follow me at Medium : https://medium.com/@igroomgrim/
with my first story on medium : How to write auto layout constraints with SnapKit in iOS

Hopefully, I think you will understand how to use SnapKit for solving auto layout problem. SnapKit also make your code to readable and decreases time to develop user interface as well.

Finally, what’s your opinion about SnapKit? You can leave your comment below. Let’s share idea!

Thank you.

English-Learning
Daily English : 30 Minutes per day
Funny
Reactive Programming in Swift คืออะไร ? (ตอน 1)
iOS
View Controller Transitions on Swift
There are currently no comments.