对于自动布局:

我们在 StoryBoard 中可以使用约束实现,简单明了,但如果用纯代码来设置约束就很麻烦了

OC里面,我们常用的有Masonry,SDAutoLayout

Swift里,我们有SnapKit:GitHub下载链接

一、项目集成

pod 'SnapKit'
import SnapKit

SnapKit的使用方法

通过 snp.makeConstraints 方法给view添加约束,约束有几种,分别是边距,宽,高,左上右下距离,基准线。
同时,添加过约束后可以有修正,修正有位移修正(inset、offset)和倍率修正(multipliedBy)

语法一般是: make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。 .equalTo:等于
.lessThanOrEqualTo:小于等于
.greaterThanOrEqualTo:大于等于
注意: 使用 snp.makeConstraints 方法的元素必须事先添加到父元素的中,例如:self.view.addSubview(view)
视图属性(ViewAttribute) 布局属性(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

对于如何使用SnapKit,这里简单讲一些常用的场景:

环境:Xcode8.1

语言:Swift3.0

场景1:

在view中心添加一个长宽200的view

  box1.snp.makeConstraints({ (make) in
make.width.height.equalTo()
make.center.equalTo(self.view)
})

场景2:

在红色view里,添加一个子view,距离顶部30px

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
box1.addSubview(box2)
box1.snp.makeConstraints({ (make) in make.width.height.equalTo()
make.center.equalTo(self.view)
})
box2.snp.makeConstraints({ (make) in make.top.equalTo(box1.snp.top).offset() //距离box1 30距离
make.left.equalTo(box1) //等效于 make.left.equalTo(box1.snp.left)
make.right.equalTo(box1)
make.height.equalTo() })

场景3:

添加两个view,高宽相等,绿色的紧靠红色上下排列

   box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
view.addSubview(box2)
box1.snp.makeConstraints({ (make) in
make.left.equalTo() //距离左边20
make.right.equalTo(-) //距离右边20,注意,这里要为负的20
make.top.equalTo()
make.height.equalTo()
})
box2.snp.makeConstraints({ (make) in make.top.equalTo(box1.snp.bottom) //顶部靠着box1底部
make.left.right.height.equalTo(box1) //左右高和box1对齐 })

场景4:

添加两个view,高宽相等,左右排列

box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
view.addSubview(box2)
box1.snp.makeConstraints({ (make) in
make.width.height.equalTo()
make.left.equalTo(view)
make.top.equalTo()
})
box2.snp.makeConstraints({ (make) in make.size.equalTo(box1) //大小等于box1
make.top.equalTo(box1) //顶部和box1对齐
make.right.equalTo(view) })

场景5:

添加两个view,绿色大小为红色一半,上下排列

 box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
view.addSubview(box2)
box1.snp.makeConstraints({ (make) in make.size.equalTo(CGSize(width: , height: ))
make.centerX.equalTo(view)
make.centerY.equalTo(view).offset(-) //中心点为view中心偏上100距离
})
box2.snp.makeConstraints({ (make) in make.size.equalTo(box1).multipliedBy(0.5) //大小为box1一半
make.centerX.equalTo(box1)
make.top.equalTo(box1.snp.bottom).offset() })

场景6:

添加两个view,绿色在红色里面,内边距设置为依次10、20、30、40

 box1.backgroundColor = UIColor.red
box2.backgroundColor = UIColor.green
view.addSubview(box1)
box1.addSubview(box2)
box1.snp.makeConstraints({ (make) in
make.width.height.equalTo()
make.center.equalTo(self.view)
})
box2.snp.makeConstraints({ (make) in
//内距box1边距分别为10、20、30、40
make.edges.equalTo(box1).inset(UIEdgeInsetsMake(, , , ))
})

总结:

以上几种是比较常用的使用场景,涉及到一些基本属性。

其实多用几次之后,会发现和Masonry很像,还是比较容易上手的。

 

Demo下载地址

共勉~~

iOS SnapKit自动布局使用详解的更多相关文章

  1. iOS SnapKit自动布局使用详解(Swift版Masonry)

    对于自动布局: 我们在 StoryBoard 中可以使用约束实现,简单明了,但如果用纯代码来设置约束就很麻烦了 OC里面,我们常用的有Masonry,SDAutoLayout Swift里,我们有Sn ...

  2. iOS 单元测试之XCTest详解(一)

    iOS 单元测试之XCTest详解(一) http://blog.csdn.net/hello_hwc/article/details/46671053 原创blog,转载请注明出处 blog.csd ...

  3. iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem

    http://blog.csdn.net/totogo2010/article/details/7681879 1.UINavigationController导航控制器如何使用 UINavigati ...

  4. IOS—UITextFiled控件详解

    IOS—UITextFiled控件详解 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGR ...

  5. [转]iOS学习之UINavigationController详解与使用(三)ToolBar

    转载地址:http://blog.csdn.net/totogo2010/article/details/7682641 iOS学习之UINavigationController详解与使用(二)页面切 ...

  6. IOS 友盟使用详解

    IOS 友盟使用详解 这篇博客将会详细介绍友盟的使用,希望对博友们有所帮助. 首先我们在浏览器上搜索友盟. 在这里我们选择官网这个,进去友盟官网后我们按照下图进行选择. 接下来选择如下图 Next 这 ...

  7. iOS原生地图开发详解

    在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...

  8. [转]iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController

    转载地址:http://blog.csdn.net/totogo2010/article/details/7682433 iOS学习之UINavigationController详解与使用(一)添加U ...

  9. iOS中—触摸事件详解及使用

    iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...

随机推荐

  1. MVC无刷新查询,PagedList分页控件使用,导出Excel

    使用MVC开发也有一段时间了,总结下无刷新部分视图的使用.PagedList分页控件的使用. @using PagedList @model StaticPagedList<T> < ...

  2. js面试题-2

    // 1.截取字符串 var aa = "abcd"; console.log(aa.substr(,)); var str = "qweda"; consol ...

  3. 网络请求 ---iOS

    //1.url要访问的资源 NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"]; //2.请求,要向服务器请求 N ...

  4. 第一章 Java语言概述

    1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...

  5. js DOM操作---登录例子总结

    简单的总结下用 javascript DOM 实现简易登录框例子,下面是简单的模拟登录,没有具体的登录样子,但只是模拟,整理下思路. 页面简单布局,我这个确实太简单了,看代码: <body> ...

  6. [TPYBoard-Micropython之会python就能做硬件 5] 学习使用重力传感器及PWM

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi            欢迎加入讨论群 64770604 一.实验器材 1.TPYboard V102板  一块 2 ...

  7. 丘吉尔,最后一次演讲-Never Give Up

    丘吉尔一生最精彩的演讲,也是他最后一次演讲.在剑桥大学的一次毕业典礼上,整个会堂有上万个学生,他们正在等待丘吉尔的出现.正在这时,丘吉尔在他的随从陪同下走进了会场并慢慢走向讲台,他脱下他的大衣交给随从 ...

  8. 不启动VS2013,直接打开帮助文档的方法

    在使用VS2013做开发的时候,当我们需要查询一个知识点时,直接按"F1"键就可以打开配套的帮助文档.如果在没有打开VS2013的情况想查看它的帮助文档,我们应该怎么办呢?我们能否 ...

  9. R系列:关联分析;某电商平台的数据;做捆绑销售和商品关联推荐

    附注:不要问我为什么写这么快,是16年写的. 一.分析目的 I用户在某电商平台买了A,那么平台接下来应该给用户推荐什么,即用户在买了商品A之后接下来买什么的倾向性最大: II应该把哪些商品在一起做捆绑 ...

  10. Javascript学习一

    //学习moocjs1 JavaScript-警告(alert 消息对话框) <script type="text/javascript"> var mynum = 3 ...