iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)
2015-06-10 09:46
741 查看
Auto Layout是在WWDC2012上被引入到iOS中的,从iOS6.0以后就开始支持,但是大多数的开发者还是习惯使用传统的UI布局方式,虽然有一大部分开发者早已使用了Auto Layout,这其中大多数的开发者是在拖拽IB文件或者是使用StoryBoard时才会选择用Auto Layout的布局方式。
Auto Layout是一种基于约束的、描述性的布局系统。也就是使用约束条件来描述布局,View的Frame会根据这些描述来进行计算。
在iOS6.0以后加入了一个新类:NSLayoutConstraint。我们可以使用可视化格式化语言Visual
Format Language(稍后的文章中会介绍)的方式创建约束(还有一种创建的方式,后面的文章会介绍)。如下这个方法:
[cpp] view
plaincopy
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
我们可以用这个方法实现如下效果的布局:
实现的代码如下,注释是凭自己的理解写的,有什么不妥之处请评论指出。
[cpp] view
plaincopy
if(floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1)
{
self.edgesForExtendedLayout = UIRectEdgeNone;
}
//自动布局
//正常的创建按钮,但不用设置按钮的Frame属性
UIButton * leftButton = [UIButton buttonWithType:UIButtonTypeSystem];
leftButton.layer.borderWidth = 2.0;
leftButton.layer.borderColor = [UIColor blackColor].CGColor;
[leftButton setTitle:@"左" forState:UIControlStateNormal];
[self.view addSubview:leftButton];
UIButton * rightButton = [UIButton buttonWithType:UIButtonTypeSystem];
rightButton.layer.borderWidth = 2.0;
rightButton.layer.borderColor = [UIColor blackColor].CGColor;
[rightButton setTitle:@"右" forState:UIControlStateNormal];
[self.view addSubview:rightButton];
//将自适应向布局约束的转化关掉(根据情况有时需要有时不需要)
[leftButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[rightButton setTranslatesAutoresizingMaskIntoConstraints:NO];
//创建一个存放约束的数组
NSMutableArray * tempConstraints = [NSMutableArray array];
/*
创建水平方向的约束:在水平方向,leftButton距离父视图左侧的距离为80,leftButton宽度为60,rightButton和leftButton之间的距离为30,rightButton宽60
*/
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-80-[leftButton(==60)]-30-[rightButton(==60)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton,rightButton)]];
/*
创建竖直方向的约束:在竖直方向上,leftButton距离父视图顶部30,leftButton高度30
*/
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[leftButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton)]];
/*
竖直方向的约束:在竖直方向上,rightButton距离其父视图顶部30,高度与leftButton的高度相同
*/
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[rightButton(==leftButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(rightButton,leftButton)]];
//给视图添加约束
[self.view addConstraints:tempConstraints];
这里需要注意的问题是,当我们将一个创建好的约束添加到View上时,添加的目标View要遵循以下的规则:
对于两个同层级View之间的约束关系,添加到他们的父View上。
对于两个不同层级View之间的约束关系,添加到他们最近的共同的父View上
对于有层次关系的两个View之间的约束关系,添加到层次较高的父View上
这篇文章就介绍到这里,后面的文章会继续介绍菜鸟学习iOS—AutoLayout。
欢迎各位的指正和评论,转载请注明转自董宝君的iOS专栏
Auto Layout是一种基于约束的、描述性的布局系统。也就是使用约束条件来描述布局,View的Frame会根据这些描述来进行计算。
在iOS6.0以后加入了一个新类:NSLayoutConstraint。我们可以使用可视化格式化语言Visual
Format Language(稍后的文章中会介绍)的方式创建约束(还有一种创建的方式,后面的文章会介绍)。如下这个方法:
[cpp] view
plaincopy
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
我们可以用这个方法实现如下效果的布局:
实现的代码如下,注释是凭自己的理解写的,有什么不妥之处请评论指出。
[cpp] view
plaincopy
if(floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1)
{
self.edgesForExtendedLayout = UIRectEdgeNone;
}
//自动布局
//正常的创建按钮,但不用设置按钮的Frame属性
UIButton * leftButton = [UIButton buttonWithType:UIButtonTypeSystem];
leftButton.layer.borderWidth = 2.0;
leftButton.layer.borderColor = [UIColor blackColor].CGColor;
[leftButton setTitle:@"左" forState:UIControlStateNormal];
[self.view addSubview:leftButton];
UIButton * rightButton = [UIButton buttonWithType:UIButtonTypeSystem];
rightButton.layer.borderWidth = 2.0;
rightButton.layer.borderColor = [UIColor blackColor].CGColor;
[rightButton setTitle:@"右" forState:UIControlStateNormal];
[self.view addSubview:rightButton];
//将自适应向布局约束的转化关掉(根据情况有时需要有时不需要)
[leftButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[rightButton setTranslatesAutoresizingMaskIntoConstraints:NO];
//创建一个存放约束的数组
NSMutableArray * tempConstraints = [NSMutableArray array];
/*
创建水平方向的约束:在水平方向,leftButton距离父视图左侧的距离为80,leftButton宽度为60,rightButton和leftButton之间的距离为30,rightButton宽60
*/
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-80-[leftButton(==60)]-30-[rightButton(==60)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton,rightButton)]];
/*
创建竖直方向的约束:在竖直方向上,leftButton距离父视图顶部30,leftButton高度30
*/
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[leftButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton)]];
/*
竖直方向的约束:在竖直方向上,rightButton距离其父视图顶部30,高度与leftButton的高度相同
*/
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[rightButton(==leftButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(rightButton,leftButton)]];
//给视图添加约束
[self.view addConstraints:tempConstraints];
这里需要注意的问题是,当我们将一个创建好的约束添加到View上时,添加的目标View要遵循以下的规则:
对于两个同层级View之间的约束关系,添加到他们的父View上。
对于两个不同层级View之间的约束关系,添加到他们最近的共同的父View上
对于有层次关系的两个View之间的约束关系,添加到层次较高的父View上
这篇文章就介绍到这里,后面的文章会继续介绍菜鸟学习iOS—AutoLayout。
欢迎各位的指正和评论,转载请注明转自董宝君的iOS专栏
相关文章推荐
- 升级iOS 9之前的注意事项
- iOS-设置导航栏"返回"按钮 (附效果图)
- 那些在学习iOS开发前就应该知道的事
- ios/oc中的结构体 与字符串互转
- iOS Animation 主流炫酷动画框架(特效)收集整理 #91
- IOS8文件归档NSKeyedArchive的使用方法
- IOS8 addressbook获取全部联系人
- IOS 利用桥接整合通讯录读取全部联系人
- IOS8 通讯录修改添加联系人
- IOS Block随笔
- 【iOS】一不小心破解了别人的静态库
- iOS下编译FFmpeg库
- 玩转iOS开发 - 数据缓存
- iOS项目开发小技巧 (四) --实现类似弹出窗口(View)
- iOS开发-Certificates、Identifiers和Profiles详解
- IOS基础 总结
- 自己动手解Json!(IOS利用分治法解析Json)(一)
- debian的ios下载及源设置
- IOS常用正则表达式
- NSUserDefaults