iOS面试&笔试

自动布局 Auto Layout (原理篇)

2018-10-24  本文已影响12人  Fat_L
背景

Auto Layout是苹果公司在iOS6发布的界面布局技术,并随着iOS SDK的迭代逐步完善了各种布局API、提供多种使用Auto Layout的布局方式。实际上Auto Layout算法本身并非有Apple发明,Auto Layout源于Cassary约束解析工具包。该算法由Alan Borning、Kim Marriott、Peter Stuckey、Yi Xiao于1997年发布,而后被多门流行编程语言采用,Objective-C是其中之一。

Auto Layout本质

Cassary该算法的主要思想是:将基于约束系统的布局规则(本质上是表示视图布局关系的线性方程组)转化为表示规则的视图几何参数。

苹果官方图片.png
Auto Layout布局周期
图片.png

Auto Layout布局过程涉及延迟机制,并非一有约束更新就马上进行布局重绘,当有约束更改时,系统的默认做法是延迟更新,目的是实现批量更改约束、绘制视图,避免频繁遍历视图层级,优化性能。当更新约束太慢影响到后序代码逻辑,也可强制马上更新。


图片.png

关于Auto Layout的布局流程,Apple给出图示如上:即Layout Cycle是一个在App运行循环RunLoop下循环执行的一个过程。

Auto Layout多种使用方式

一、NSLayoutConstraint对象创建约束
原生的NSLayoutConstraint进行布局,使用NSLayoutConstraint提供的约束对象创建接口,传入对应的参数即可,一个约束对象对应一个布局关系。具体步骤如下:
设置View的translatesAutoresizingMaskIntoConstraints属性为NO;
根据约束方程式,创建约束对象;
把约束添加到对应位置(iOS8+直接通过active激活约束);

NSLayoutConstraint优缺点:
1、使用该方式进行布局,最明显的特点是代码量冗余,欠优雅。
2、约束更新、删除时,执行起来也不方便,需要实现用指针记录约束对象、或者通过匹配找到对应的约束。

UIView *grayView = [[UIView alloc] init]; 
grayView.backgroundColor = [UIColor lightGrayColor]; 
[self.view addSubview:grayView]; 
grayView.translatesAutoresizingMaskIntoConstraints = NO; 
NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:50]; 
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100]; 
NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100]; 
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100]; 
[self.view addConstraints:@[left, top]]; 
[grayView addConstraints:@[width, height]];

二、VFL创建约束

VFL字符串中可以传入任意多个视图、可以表示任意多个布局关系,因此使用VFL创建的约束时一次创建一个约束集合,返回一个装着NSLayoutConstraint对象的数组。

NSArray<NSLayoutConstraint *> *horizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-50-[view1(100)]-50-[view2]-50-|" options:(NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom) metrics:nil views:NSDictionaryOfVariableBindings(view1, view2)]; 
[self.view addConstraints:horizontalConstraint]; 
NSArray<NSLayoutConstraint *> *verticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view1(100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1, view2)]; 
[self.view addConstraints:verticalConstraint];
VFL优缺点

三、Interface Builder

四、Masonry

References

https://www.jianshu.com/p/3a872a0bfe11

上一篇下一篇

猜你喜欢

热点阅读