都说换一家公司就学多点东西,这句话果然不假,去了新公司见识了新一套的代码后学到了不少,诚然不能说是旧公司的代码太陈旧,因为新公司虽然技术新颖,可是也有其不足的地方,其细节就不一一诉说,今天主要是聊聊新公司代码让我学到的两个方面之一——Autolayout的运用。(还有一个方面是git对比SVN的优势,此对比迟点另开一篇文章诉说)
一开始来到公司发现大部分界面都是用纯代码构建,不适应之余还发现控件之间的间距用的Autolayout的代码,让我花了一段时间研究。这里说一下我们Autolayout用到的技术——Masonry。一个轻量级的布局框架,拥有自己的描述语法,采用链式语法封装自动布局,其实写熟后发现也是简洁明了,可读性很高。 其源码git地址是:Masonry 源码
给你们看一下用法示例:
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@(kNAVIGATION_BAR_HEIGHT));
make.leading.equalTo(@0);
make.trailing.equalTo(@0);
make.bottom.equalTo(self.toolsBarView.mas_top);
}];
这段代码主角是控件tableView,block中的回调第一句make.top.equalTo(@(kNAVIGATION_BAR_HEIGHT));
表示tableView的顶部在kNAVIGATION_BAR_HEIGHT
之下(kNAVIGATION_BAR_HEIGHT
是define定义好的常量),第二三句分别表示前端到顶,后端到顶,最后一句是底部在控件toolsBarView顶部之上。其实Masonry并不止top、leading、trailing和bottom这四个变量,其所有变量如下图:
我在上一家公司其实是大多是根据label要显示的内容多少计算出来label的长度和高度,然后用currentY 把界面的一个个控件排好位置,难度不大,可是功夫缺不少,然用了Masonry,才发现Autolayout真是好用,只要设置好每个控件的相对位置,控件便能自动排好,不用再计算控件大小(能舍弃CGRectMake了),但偶然也会出现显示效果不是想要的情况,这种现状目前还没找到解决办法,所以偶然还是要用到计算控件大小来修复这种现状,未来找到自己的错误或者解决办法再更新。
值得一说的是,Masonry能够添加autolayout约束的函数有三个,分别是
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
虽然我基本只用第一个,但运用一个技术最好全面都了解一下,因此我还是学习了一下这三个的用处:
1. mas_makeConstraints 只负责新增约束,最好不要同时存在两条针对于同一对象的约束,虽然不会报错,但按照哪个执行我也不清楚
2. mas_updateConstraints 针对上面的情况,会更新在block中出现的约束,不会导致出现两个相同约束的情况
3. mas_remakeConstraints 则会清除之前的所有约束,仅保留最新的约束
另外还有一点想说明的是,bottom、right和trailing里的offset是负数才是距离边距的距离,即make.bottom.equalTo(@-10);
相当于距离底部但superview10个像素的意思。即
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@10);
make.leading.equalTo(@10);
make.trailing.equalTo(@-10);
make.bottom.equalTo(@-10);
}];
等同于让tableView略小于其superView,边距都为10
详细关于Masonry的使用大家可以自行去百度一下,已经有很多技术博客写的十分详细了,写熟很快就能上手。值得一提的是,UISCrollView平时只要设置它的contentSize的大小就能滚动显示。但在Masonry中无法通过CGSizeMake进行设置它的contentSize,需要通过一个过渡视图进行处理。详情可以参考:Masonry适配——(4)UIScrollView的设置