Perfect fit for what you need to know about SnapKit

preface

As we all know, the screen of iPhone is becoming more and more diversified. Diversified screens meet the differentiated needs of users, but also increase the work of developers —– adaptation. In the face of diversified devices with different screen sizes, the frame layout in iOS before seems inappropriate. So Apple launched AutoLayout. AutoLayout’s advantages in programming are not to be ignored, but it is not so friendly to friends who are used to code interface. Faced with such problems, many third-party frameworks were born. By far the most popular is SnapKit.

The body of the

Of course, if you’re familiar with all THE navigation you’ll receive, you’ll be able to ☺ SnapKit, which I would like to describe all the navigation you’ll receive. ☺ continues.

The installation

If your project uses CocoaPods to manage components, you just need to add it to your Podfile:

 pod 'SnapKit'.'~ > 3.0'
Copy the code

And then execute it in Terminal

pod install
Copy the code

After the installation is successful, you can import SnapKit to use.

usage

SnapKit framework design, easy to use, good readability. When you want to build a tableView, the padding of the tableView in the parent view is 20, so what do you do with SnapKit?

tableView.snp.makeConstraints { (make) in
            make
                .edges
                .equalTo(self.view)
                .inset(UIEdgeInsets(
                    top: 20.left: 20,
                    bottom: 20.right: 20))}Copy the code

or

tableView.snp.makeConstraints { (make) in
            make.left.top.equalTo(self.view).offset(20)
            make.right.bottom.equalTo(self.view).offset(-20)}Copy the code

This is the most common way to write it. Of course, the layout of our actual project is very complex, and not all views can be laid out with equalTo. With SnapKit you can use:

. EqualTo equivalent to NSLayoutRelation. Equal. LessThanOrEqualTo equivalent to NSLayoutRelation. GreaterThanOrEqual. GreaterThanOrEqualTo equivalent to NSLayoutRelation.GreaterThanOrEqual

We use a table to list the mapping between SnapKit attributes and NSLayout attributes:

Through this table, we can arrange the corresponding animation according to our own needs, but this cannot fully meet our needs. Our application is very complex. What if the product requires our APP to update the frame of the view or make animation according to the user’s interactive feedback? Don’t worry, SnapKit provides us with Constraint attribute associations. That is, we can associate the constraint to be changed and then change it, such as declaring the association property

var topConstraint: Constraint? = nil
Copy the code

Initialize the

button.snp.makeConstraints { (make) in
            self.topConstraint = make.top.equalTo(self.view).offset(100).constraint
            make.centerX.equalTo(self.view.snp.centerX)
            make.width.equalTo(60)
            make.height.equalTo(30)}Copy the code

To change the

UIView.animate(withDuration: 5) {
            self.topConstraint? .update(offset:200)
            self.view.layoutIfNeeded()
        }
Copy the code

This is a simple animation. Of course, if you want to updateConstraints, you can also use.snp.updateconstraints

 self.button.snp.updateConstraints({ (make) in
                make.top.equalTo(200)})self.view.layoutIfNeeded()
Copy the code

Another problem is that if we reference a tripartite view library and we want to change its constraints, what if we don’t know the original constraints? In fact, we can use SNP.remakeconstraints

        button.snp.remakeConstraints { (make) in
            make.top.equalTo(self.view).offset(100)
            make.centerX.equalTo(self.view.snp.centerX)
            make.width.equalTo(60)
            make.height.equalTo(30)}Copy the code

This first removes the constraints on the original control and then resets the constraints. See here believe that you are not unfamiliar with the use of SnapKit!

Here’s a common problem if we need to dynamically create a set of controls from an array that are equal in length, width and height, and placed side by side in the superview:

for (idx, item) in items.enumerated() {
            if items.count < 2 { return }
            if idx == 0 {
                item.snp.makeConstraints({ (make) in
                    make.left.top.bottom.equalTo(self)
                    make.width.equalTo(items[idx + 1])
                    make.right.equalTo(items[idx + 1].snp.left)})}else if idx == items.count - 1 {
                item.snp.makeConstraints({ (make) in
                    make.right.top.bottom.equalTo(self)
                    make.width.equalTo(items[idx - 1])})}else {
                item.snp.makeConstraints({ (make) in
                    make.top.bottom.equalTo(self)
                    make.left.equalTo(items[idx - 1].snp.right)
                    make.width.equalTo(items[idx - 1].snp.width)
                })
            }
        }
Copy the code

So, a dynamic set is created! Please see AutoLayoutDemo level is limited, if there are omistions, hope pointing out welcome exchange, welcome star CNKCQ left 🌹, hand has lingering fragrance blog

reference

snapKit