本文主要是介绍浅谈autolayout,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
本人录制技术视频地址:https://edu.csdn.net/lecturer/1899 欢迎观看。
Autolayout是基于约束的,描述性的布局系统。
关键词:
- 基于约束 - 和以往定义frame的位置和尺寸不同,AutoLayout的位置确定是以所谓相对位置的约束来定义的,比如x坐标为superView的中心,y坐标为屏幕底部上方10像素等
- 描述性 - 约束的定义和各个view的关系使用接近自然语言或者可视化语言(稍后会提到)的方法来进行描述
- 布局系统 - 即字面意思,用来负责界面的各个元素的位置。
总而言之,AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前,不论是在IB里拖放,还是在代码中写,每个UIView都会有自己的frame属性,来定义其在当前视图中的位置和尺寸。使用AutoLayout的话,就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题,另外也简化了旋转时view的位置的定义,原来在底部之上10像素居中的view,不论在旋转屏幕或是更换设备(iPad或者iPhone5或者以后可能出现的mini iPad)的时候,始终还在底部之上10像素居中的位置,不会发生变化。 总结:使用约束条件来描述布局,view的frame会依据这些约束来进行计算。
本文将从三个方面对autolayout的使用进行说明:
1. 基于xib或者storyboard的自动布局;2. 用VFL代码的自动布局;3. 用第三方类库的代码实现的自动布局。
Demo:
1. 在控制器View底部添加两个View,1个蓝色,1个红色;
2. 两个View宽度,高度永远相等;
3. 举例父控件左边,右边,下边间距和两个View之间的间距相等,且均为20px。
运行效果图:
竖屏:
横屏:
基于xib或者storyboard的自动布局
self.viewHeight.constant = 100;
上面的代码执行完毕,蓝色和红色的View高度均变为100了,因为他们是相互约束的。
UIView *blueView = [[UIView alloc] init];blueView.backgroundColor = [UIColor blueColor];blueView.translatesAutoresizingMaskIntoConstraints = NO;[self.view addSubview:blueView];UIView *redView = [[UIView alloc] init];redView.backgroundColor = [UIColor redColor];redView.translatesAutoresizingMaskIntoConstraints = NO;[self.view addSubview:redView];// 占位所用NSDictionary *metrics = @{@"margin":@20};//NSDictionary *views = @{@"blueView":blueView,@"redView":redView};// 下面的写法等价于上面的写法NSDictionary *views = NSDictionaryOfVariableBindings(redView,blueView);NSArray *constraint1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-margin-[blueView(==redView)]-margin-[redView]-margin-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:views];[self.view addConstraints:constraint1];// 小括号里面的参数(水平方向定宽度,垂直方向定高度)NSArray *constraint2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(==40)]-margin-|" options:0 metrics:metrics views:views];[self.view addConstraints:constraint2];
看到上面的写法,真是一眼难尽啊!!!
H:|-margin-[blueView(==redView)]-margin-[redView]-margin-|
像这样的写法,可读性真是太差了。大家可作为了解,本人就不解释了。
[self.redView autoSetDimension:ALDimensionHeight toSize:50];[self.redView autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:20];[self.redView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20];[self.blueView autoMatchDimension:ALDimensionHeight toDimension:ALDimensionHeight ofView:self.redView];[self.blueView autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:20];[self.blueView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20];[self.blueView autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.redView withOffset:20];[self.blueView autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:self.redView];
对比VFL,可读性真是好多了。
__weak typeof(self) ws = self;UIView *sv1 = [[UIView alloc] init];sv1.backgroundColor = [UIColor redColor];[self.view addSubview:sv1];UIView *sv2 = [[UIView alloc] init];sv2.backgroundColor = [UIColor blueColor];[self.view addSubview:sv2];CGFloat padding = 20;[sv1 mas_makeConstraints:^(MASConstraintMaker *make) {make.bottom.mas_equalTo(ws.view.mas_bottom).with.offset(-padding);make.left.mas_equalTo(ws.view.mas_left).with.offset(padding);make.right.mas_equalTo(sv2.mas_left).with.offset(-padding);make.height.mas_equalTo(50);}];[sv2 mas_makeConstraints:^(MASConstraintMaker *make) {make.bottom.mas_equalTo(ws.view.mas_bottom).with.offset(-padding);make.right.mas_equalTo(ws.view.mas_right).with.offset(-padding);make.height.mas_equalTo(sv1.mas_height);make.width.mas_equalTo(sv1.mas_width);}];
这篇关于浅谈autolayout的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!