自制自动布局约束开源库Lite Auto Layout

首先,贴上这个库的源码地址:https://github.com/MellongLau/LiteAutoLayout

这个库也写了好长一段时间了,由于最近忙,一直都没时间把它更新好放上来,特别是文档,拖了这么久总算是补全了一点了。至于好不好用,那就见仁见智了,我之前比较习惯用IB拖auto layout的约束,也是根据IB的使用概念来实现的这个库,下面也有提到这一点,所以,个人认为,习惯使用IB来布局的同学应该会比较容易上手和习惯使用吧。

然后就是,如果——

喜欢这个项目? 点击Github 里面的 Star按钮支持我们吧!

示例项目

可以下载 Demo 文件夹下的示例项目运行,下面是运行后的截图。

Demo
Demo

这是一个使用 LiteAutoLayout 编写布局约束的登录框界面,所有的约束代码都在下面的代码截图中:

Code
Code

简介

最近在用 Swift 3.0,Swift 3.0给我们带来了很多新的特性,在学习过程中发现自定义操作符这个写法很适合来写 autolayout 的约束,结合自己平时使用 IB 来创建视图之间的约束的经验,决定使用自定义操作符来让使用代码创建约束更加直观,清晰和简单。

其中,~> 这个符号被我用来作为视图约束于其同级视图或者父级视图的表达式,如 (view1 ~> view2), 中间需要留空格,而创建对于自身的约束,可以使用(~>view1)来创建,中间不需要留空格,后面添加约束是用的简单方便的链式写法。

当然,如果你不想使用~>这个符号来创建约束,我还提供了startLayout()的方法直接创建约束,如:

view1.startLayout(toView: view2)。

另外,因为项目中使用 IB 编写界面比较多,同时也觉得 IB 添加约束的用法比较简单和方便,所以这里使用的设置约束的方法是用了 IB 添加约束的概念,相信有用过 IB 应该都比较容易接受这种写法,在使用 LiteAutoLayout 后相信会加深对 IB 添加布局约束的理解,两种的使用相互促进,相互提高,这也是这个库的优势之一。

比较 NSLayoutConstraint vs NSLayoutAnchor vs LiteAutoLayout

如设置两个视图之间垂直的距离约束verticalSpacing(), 值得注意的是~>后面的视图默认是在上方,如果是添加水平距离,则~>后面的视图是在左边。

这个库是一个简单的封装,如果你使用过 sdk 原始创建约束的方法的话,你应该会被其繁琐的写法所吓倒。

这里引用 apple 官网的一个例子:

// 使用 NSLayoutConstraint 创建约束
NSLayoutConstraint(item: subview,
                   attribute: .Leading,
                   relatedBy: .Equal,
                   toItem: view,
                   attribute: .LeadingMargin,
                   multiplier: 1.0,
                   constant: 0.0).active = true
 
NSLayoutConstraint(item: subview,
                   attribute: .Trailing,
                   relatedBy: .Equal,
                   toItem: view,
                   attribute: .TrailingMargin,
                   multiplier: 1.0,
                   constant: 0.0).active = true
 
 
// 使用 Layout Anchors 创建相同的约束
let margins = view.layoutMarginsGuide
 
subview.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true
subview.trailingAnchor.constraintEqualToAnchor(margins.trailingAnchor).active = true

上面可以看到直接使用 NSLayoutConstraint 创建简单的布局约束需要繁复的代码,使用 NSLayoutAnchor 可以简化约束代码,那 LiteAutoLayout 到底表现如何,下面我们用 LiteAutoLayout 创建相同的布局约束:

// 使用 Lite Auto Layout 创建相同的约束
(subview ~> view).leading().trailing()

显然,使用 LiteAutoLayout 甚至比 NSLayoutAnchor 还简单,并且代码阅读更加清晰易懂,而且 NSLayoutAnchor 目前只支持 iOS9+,LiteAutoLayout 目前支持 iOS7+。

最后,需要注意的是:

  • 左边是子视图,右边为父视图(subview ~> view, 左侧的subview 是 view 的子视图)。
  • 左边是位于右边的视图的右侧或者下方(view2 ~> view1, 则 view2 在 view1的右侧或者下方)。

目前支持的特性:

  1. 支持>=, <=, ==操作符。
  2. 支持指定优先级。
  3. 支持链式写法。

如何安装

下载文件 LiteAutoLayout.swift 并将其复制到项目文件夹下,添加引用到项目中即可。

使用 LiteAutoLayout?

如果你在你的项目中使用了 LiteAutoLayout,请发邮件(邮件地址在下面)告诉我一声,我会把你的 app 的下载链接添加到这里!

贡献

欢迎为此项目提供任何的帮助,包括意见建议,资金,代码或者精神鼓励等,为此项目贡献代码请提交 pull request, 代码经过审核后会立即合并到主分支中。

License

MIT License

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

推荐阅读更多精彩内容