SnapKit漫游指南

今年WWDC苹果官方除了把整个生态系统做了一次全面升级之外,伴随而来还有同期发布的Swift 3.0 . 如果一年前你还犹豫是否把项目核心语言切换Swift有所忌惮的话,也许稍后Swift 3.0正式版的发布会渐渐打消你在这方面的顾虑. 随着近两年Swift迅猛的发展,而在它开源之后,得意与开源社区源源不断的贡献更是如井喷一样的势头. 当然除了iOS平台,Swift同时还支持了Linux. Swift语言给我更直观的感受是,终于不用在写出类似Object-C冗长的代码风格,调用简洁且易读的Swift让人感到很清爽. 我对语言本身其实没有太大的期望,不过如果能有类似 C# 之类的语言的异步风格函数(Async-Style Function)的话,那就再好不过了. 当然从官方放出的Swift路线图可以看出,3.0版本大的革新内容并不多,主要的方向还是剔除掉C语言的影响为主. 如果说Swift在3.0之前还存在生产力的问题(缺少成熟的第三方框架),有时间看看github相关资源,也许现在就是切入的好时机.

Swift 3.0 [Via Google]

提到AutoLayout,我在使用OC语言开发时一直经常使用的是Masonry框架,在慢慢切入Swift之后,虽然其语言特性能够支持OC的混编,但依然让人觉得很麻烦. Masonry使用开发者众多,而其原作者也在众多开发者要求支持Swift版本呼声中推出了SnapKit. 和Masonry一样,SnapKit是一套轻量级的布局框架,同样适用链式语法封装Apple的自动布局约束. 项目发布至今大约一年多的时间,已经在github上有六千多个Star,当然了,这其中也少不了利用Masonry影响力给他打的那些广告。

如果你还记得StoryBoard中那些约束的线条,那么你也一定记得其中 Constriants 的写法。而SnapKit所做的就是这样一件事——让你采用链式语法封装的方式写 Constraints:

SnapKit [Via chenkai]

当然如果使用过Masonry上面没什么大惊小怪的,但SnapKit比Masonry更为灵活(具体细节后面详细说明):

SnapKit [Via chenkai]

安装

在安装前需要注意SnapKit要求的环境配置:

[iOS 7.0+ / OS X 10.9+]  /  [Swift 2.0]  /  [Xcode 7.0+]

采用Carthage安装SnapKit:

github "SnapKit/SnapKit" >= 0.21.1

安装时指向当前发布的最新版本.通过carthage update 命令生成引用,在项目根目录下找到生成的:

Carthage -> Build -> iOS -> SnapKit.framework

文件,然后把文件集成到:

Project -> General -> Embedded Binaries

选项中,在项目代码中引入:

import SnapKit

编译成功,则安装完成. 当然如果你更习惯CocoaPod或者更多的安装方法请参见官方文档.

基础用法

因为SnapKit设计思路延续了OC版本的Masonry, 只不过换了一种实现语言Swift, 如果你对Masonry非常熟悉,那么其二者基本用法上大同小异.

先看一个基本示例,我们在UI布局中首先尝试布局一个GrayBox:

GrayBox Layout [Via chenkai]

基本写法跟Masonry没有多磨大的区别, 但在SnapKit中,如果多个属性值一致,可以串连视图属性,增加其可读性,类似上面写法有一个更简单的实现方式:

GrayBox Layout Simple Way [Via chenkai]

在SnapKit通过 ‘snp_makeConstraints' 给元素增加约束,约束主要分为边距、宽、高、左上右下距离、基准线, 当然增加约束同样也是可以修正的, 修正方式有位移修正 [‘inset、offset’] 和倍率修正 [multipliedBy]. 

SnapKit支持的属性与 NSLayoutAttrubute 对照表如下:

TableView [Via chenkai]

其中leading与left、trailing与right 在正常情况下是等价的, 但是当一些布局是从右至左时(比如阿拉伯文) 则会对调. 换句话说大部分情况二者其实是等价的. 

修正约束语法一般就是三种,跟Masonry完全一致.

.equalTo:等于

.lessThanOrEqualTo:小于等于

.greaterThanOrEqualTo:大于等于

关于基本用法,官方文档和示例中非常详细这里就不多介绍. 重点说一下其其他Masonry少见的用法.

倍率修正

在布局我们有两个正方形色块,现在采用倍率修正方式,采用倍率修正方式吧橙色视图缩小为灰色视图的一半,如下图:

视图

可以采用multipliedBy实现:

倍率修正[Via chenkai]

注意这里不得不说是这个multipliedBy方法, 当前只是需要橙色视图大小也就是Size属性,而该方法能够接受的值我们能从其定义中找到,有如下几种值的类型:

MultipliedBy值类型 [Via chenkai]

同理DividedBy也是如此.

约束引用

在日常布局中,我们可能在多个地方更新同一个约束的值. 这就需要对现有定义的约束能够修改、移除、替代等操作. 而SnapKit可以将约束的结果赋值给一个局部变量或一个类属性,然后对这个约束的引用进行操作. 这样就大大简化我们操作一个约束的成本,同时保证其灵活性.

在页面我们有一个橙色的视图,距离顶部100,横向位置居中. 点击页面Button时移除掉该约束,效果如下:

约束引用[Via chenkai]

实现很简单:

约束引用[Via chenkai]

首先什么一个约束对象topConstraint, 在对橙色视图添加约束时,引用SuperView顶部间距的约束. 当点击Button移除约束按钮时则触发移除操作:

移除操作

在触发移除时,通过调用topConstraint的uninstall方法则完成操作. 移除完成后如果更新改约束,例如把橙色视图到顶部距离由原来100改为现在200像素. 直接采用updateOffset(200)即可,当然这个操作之前因为使用uninstall,所以导致约束不可用,在调用updateOffset方法前需要把通过activate将其激活,要不然没有任何效果.

约束优先级

当同一个元素有多个建立多个约束时,可以定义约束的优先级。这样当约束出现冲突的时候,优先级高的约束覆盖优先级低的约束.

SnapKit中元素默认优先级是500(最大数值是1000),也就是priorityMedium()中等级别.除此之外还可以设置如下几个优先级:

priorityLow():设置低优先级,优先级为250

priorityMedium():设置中优先级,优先级为500(默认优先级)

priorityHigh():设置高优先级,优先级为750

priority():可以设置任意的优先级,接受的参数是0-1000的数字.

优先级使用语法是一般放在约束链的结束处,例如:

make.width.height.equalTo(100 *self.view.width).priorityLow()

篇幅所限关于用法参见官方的Demo或者本篇演示的github上源代码. 这里就不做过多赘述.

小结

SnapKit和Masonry一出同源,在设计思想极为相似,但在用法上原作者坐了一些创新,使SnapKit更为灵活适应更多的场景. 虽然SnapKit很好用,但我想很多纯代码进行界面的人应该都知道,它的弊端是非常的耗时且细节琐碎繁多, 极大自主带来的是生产力的不足. 我想很多人跟我一样都有同感. 所以我最近开始尝试是否可以xib/storyboard+SnapKit混合使用,主要布局使用xib/storyboard,在需要动态更新布局的时候使用SnapKit. 效率是提升了一些,但遇到很多特别棘手的问题. xib/storyboard在界面开发上的确可以大大提升开发效率,在部分界面设计场景也的确需要手写代码的灵活性. 如果有更好方案不放可以探讨一下.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,609评论 4 59
  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 23,668评论 3 89
  • “砰” 一声巨响打破了这诡异的寂静 “咳咳,我天,这是发生了什么啊!!”从一堆废墟里钻出的少年说着...
    余生不见白阅读 140评论 0 0
  • 楔子 “南方有鸟,其名为鹓雏,子知之乎?夫鹓雏,发于南海而飞于北海,非梧桐不止,…” 我想,吴竹,你就是那只凤凰非...
    我是蛋小卷阅读 1,251评论 31 137