简单好用的iOS自动布局框架

有感于iOS自动布局代码的冗长和繁琐,闲来无事,便自己封装了一下。
写的过程中我借鉴了NSLayoutAnchor和masonry的一些思路,写了充分的单元测试用例,并对框架的性能(耗时和内存占用)做了一个简单评估。

优点

  • 简单,17KB大小。易用,对于许多布局,用起来跟frame差不多
  • 支持iOS8和swift
  • 速度是masonry的1.7倍,接近系统方法速度,占用内存小
  • 跟踪所有约束,不需要额外写成员属性引用约束
  • 充分的单元测试
  • 支持iOS11,相对safeAreaLayoutGuide的布局约束书写非常简便!
和系统方法、Masonry在性能上的比较

设置约束

所有约束设置都遵循系统的公式:

firstItem.firstAttribute {=,<=,>=} secondItem.secondAttribute * multiplier + constant

简便写法(适用于NSLayoutRelationEqual、multiplier = 1 且除了宽、高以外的约束的constant = 0的情况)

[self.redView activateConstraints:^{
    self.redView.height_attr.constant = 100; // redView的高度 = 100
    self.redView.width_attr = self.blueView.width_attr; // redView的宽度 = blueView的宽度
    self.redView.top_attr = self.blueView.top_attr; // redView的顶部 = blueView的顶部
    self.redView.left_attr = self.blueView.right_attr; // redView的左边 = blueView的右边
}];

常规写法

[self.redView activateConstraints:^{
    self.redView.height_attr.constant = 150; // redView的高度 = 150
    [self.redView.width_attr equalTo:self.blueView.width_attr constant:50]; // redView的宽度 = blueView的宽度 + 50
    [self.redView.top_attr equalTo:self.blueView.top_attr constant:-10]; // redView的顶部 = blueView的顶部 - 10
    [self.redView.left_attr greaterThan:self.blueView.right_attr constant:20]; // redView的左边 >= blueView的右边 + 20
}];

activateConstraints方法会将block里所有约束都绑定给调用者,这里就是self.redView,这么做是为了方便以后获取约束。
也可以用更接近系统的风格设置约束,但这样以后想获取特定的某个约束就比较麻烦,需要创建一个成员变量引用以后想改变的约束。

NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:4];
[arrayM addObject:[self.redView.height_attr equalTo:nil constant:100]];
[arrayM addObject:[self.redView.width_attr equalTo:self.blueView.width_attr]];
[arrayM addObject:[self.redView.top_attr equalTo:self.blueView.top_attr]];
[arrayM addObject:[self.redView.left_attr equalTo:self.blueView.right_attr]];
[NSLayoutConstraint activateConstraints:arrayM];

更新safeAreaLayoutGuide布局写法,不需要写版本判断

[self.redView activateConstraints:^{
    self.redView.height_attr.constant = 100; // redView的高度 = 100
    self.redView.width_attr = self.blueView.width_attr; // redView的宽度 = blueView的宽度
    self.redView.top_attr = self.view.top_attr_safe; // redView的顶部 = view的safeAreaLayoutGuide的顶部,非iOS11则是view的顶部
    self.redView.left_attr = self.view.right_attr_safe; // redView的左边 = view的safeAreaLayoutGuide的右边,非iOS11则是view的右边
}];

改变约束值

self.blueView.width_attr.constant = 100;

或者

[self.redView constraintAccordingToAttribute:self.redView.height_attr].constant = 100;

获取约束

获取非常方便,当初创建约束是怎样的相对关系,通过相同的关系就可以获取约束。

NSLayoutConstraint *cons = [self.titleLabel constraintAccordingToAttribute:self.titleLabel.bottom_attr andAttribute:self.subtitleLabel.top_attr];

激活和关闭约束

[self.redView activateConstraintAccordingToAttribute:self.redView.height_attr];
[self.redView deactivateConstraintAccordingToAttribute:self.redView.height_attr];

注意:调用deactivateConstraintAccordingToAttribute会将该约束对象销毁,这里保持跟系统的deactivateConstraint方法一致。如果只是想暂时关闭约束,以后想再activate,则应该获取约束后,设置.active = NO

解释一下核心方法 -(void)activateConstraints:(void (^)())constraints;
这是UIView的一个对象方法,一般来说每个UIView的布局代码写在自己的block里, 只有调一次该方法,才会给这个方法的调用者创建一个用来引用布局对象的可变数组,以后才可以通过这个调用者拿到里面的布局对象。
并且只要调用了一次该方法,以后即使不在该方法的block里写的约束,约束的firstItem如果和该方法的调用者是一个对象,也会把这个约束添加到firstItem(调用者)的数组里
如果调用了activateConstraints后,又希望移除对应view的数组,可以调用
- (void)deactivateAllConstraintsAndAssociatedObjects

具体使用请移步github下载示例代码。


添加到项目

使用CocoaPods
在podfile中加入 'NSLayoutConstraint-SSLayout'
直接使用源代码
将Source文件夹下的文件copy到项目

传送门:https://github.com/suruihai/NSLayoutConstraint-SSLayout

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

推荐阅读更多精彩内容