iOS SnapKit自动布局使用详解
对于自动布局:
我们在 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很像,还是比较容易上手的。
共勉~~
iOS SnapKit自动布局使用详解的更多相关文章
- iOS SnapKit自动布局使用详解(Swift版Masonry)
对于自动布局: 我们在 StoryBoard 中可以使用约束实现,简单明了,但如果用纯代码来设置约束就很麻烦了 OC里面,我们常用的有Masonry,SDAutoLayout Swift里,我们有Sn ...
- iOS 单元测试之XCTest详解(一)
iOS 单元测试之XCTest详解(一) http://blog.csdn.net/hello_hwc/article/details/46671053 原创blog,转载请注明出处 blog.csd ...
- iOS学习之UINavigationController详解与使用(一)添加UIBarButtonItem
http://blog.csdn.net/totogo2010/article/details/7681879 1.UINavigationController导航控制器如何使用 UINavigati ...
- IOS—UITextFiled控件详解
IOS—UITextFiled控件详解 //初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGR ...
- [转]iOS学习之UINavigationController详解与使用(三)ToolBar
转载地址:http://blog.csdn.net/totogo2010/article/details/7682641 iOS学习之UINavigationController详解与使用(二)页面切 ...
- IOS 友盟使用详解
IOS 友盟使用详解 这篇博客将会详细介绍友盟的使用,希望对博友们有所帮助. 首先我们在浏览器上搜索友盟. 在这里我们选择官网这个,进去友盟官网后我们按照下图进行选择. 接下来选择如下图 Next 这 ...
- iOS原生地图开发详解
在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...
- [转]iOS学习之UINavigationController详解与使用(二)页面切换和segmentedController
转载地址:http://blog.csdn.net/totogo2010/article/details/7682433 iOS学习之UINavigationController详解与使用(一)添加U ...
- iOS中—触摸事件详解及使用
iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...
随机推荐
- MVC无刷新查询,PagedList分页控件使用,导出Excel
使用MVC开发也有一段时间了,总结下无刷新部分视图的使用.PagedList分页控件的使用. @using PagedList @model StaticPagedList<T> < ...
- js面试题-2
// 1.截取字符串 var aa = "abcd"; console.log(aa.substr(,)); var str = "qweda"; consol ...
- 网络请求 ---iOS
//1.url要访问的资源 NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"]; //2.请求,要向服务器请求 N ...
- 第一章 Java语言概述
1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...
- js DOM操作---登录例子总结
简单的总结下用 javascript DOM 实现简易登录框例子,下面是简单的模拟登录,没有具体的登录样子,但只是模拟,整理下思路. 页面简单布局,我这个确实太简单了,看代码: <body> ...
- [TPYBoard-Micropython之会python就能做硬件 5] 学习使用重力传感器及PWM
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.实验器材 1.TPYboard V102板 一块 2 ...
- 丘吉尔,最后一次演讲-Never Give Up
丘吉尔一生最精彩的演讲,也是他最后一次演讲.在剑桥大学的一次毕业典礼上,整个会堂有上万个学生,他们正在等待丘吉尔的出现.正在这时,丘吉尔在他的随从陪同下走进了会场并慢慢走向讲台,他脱下他的大衣交给随从 ...
- 不启动VS2013,直接打开帮助文档的方法
在使用VS2013做开发的时候,当我们需要查询一个知识点时,直接按"F1"键就可以打开配套的帮助文档.如果在没有打开VS2013的情况想查看它的帮助文档,我们应该怎么办呢?我们能否 ...
- R系列:关联分析;某电商平台的数据;做捆绑销售和商品关联推荐
附注:不要问我为什么写这么快,是16年写的. 一.分析目的 I用户在某电商平台买了A,那么平台接下来应该给用户推荐什么,即用户在买了商品A之后接下来买什么的倾向性最大: II应该把哪些商品在一起做捆绑 ...
- Javascript学习一
//学习moocjs1 JavaScript-警告(alert 消息对话框) <script type="text/javascript"> var mynum = 3 ...