【IOS开发基础系列】Autolayout自动布局专题

1 简介

        bounds是指这个view在它自己坐标系的坐标和大小 而frame指的是这个view在它superview的坐标系的坐标和大小区别主要在坐标系这一块。很明显一个是自己为原点的坐标系,一个是以屏幕为原点的坐标系。

        当谈到自动布局,橙色代表坏的。InterfaceBuilder绘制两个橙色方块:一个是虚线边框,一个是实线边框。虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。这两个应该吻合的,但是这里并没有。

        Note你可能会奇怪,为什么Xcode不为X轴方向自动增加一个约束。Xcode中的规则是:Xcode只为那些你没有设置任何约束的对象创建自动约束。一旦你增加一个约束,你便是告诉Xcode你接管了这个视图。Xcode将不再增加任何自动约束,并希望你为这个视图增加需要的约束。


2 代码实现自动布局

2.1 使用方法

2.1.1 添加约束的方法

        代码中一般用到的有两个添加约束的方式:

    1. - (void) addConstraint: (NSLayoutConstraint *) constraint    NS_AVAILABLE_IOS (6_0);

    2. - (void) addConstraints: (NSArray *) constraints    NS_AVAILABLE_IOS(6_0);


        在使用自动布局之前要对子视图的布局方式进行调整,用到这个UIView的属性。

- (BOOL) translatesAutoresizingMaskIntoConstraints     NS_AVAILABLE_IOS(6_0); // Default YES

需要将其设置为NO;


2.1.2 关于constraintsWithVisualFormat:函数介绍:

       constraintsWithVisualFormat:参数为NSString型,指定Contsraint的属性,是垂直方向的限定还是水平方向的限定,参数定义一般如下:

    V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离

    若是要定义水平方向,则将V:改成H:即可。

    在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定;

options:字典类型的值;这里的值一般在系统定义的一个enum里面选取;

metrics:nil;一般为nil,参数类型为NSDictionary,从外部传入//衡量标准;

views:就是上面所加入到NSDictionary中的绑定的View;

        在这里要注意的是AddConstraints  和AddConstraint之间的区别,一个添加的参数是NSArray,一个是NSLayoutConstraint;


    使用规则:

        |:表示父视图

        -:表示距离

        V:  :表示垂直

        H:  :表示水平

        >= :表示视图间距、宽度和高度必须大于或等于某个值

        <= :表示视图间距、宽度和高度必须小宇或等于某个值

        == :表示视图间距、宽度或者高度必须等于某个值

        @  :>=、<=、==  限制  最大为  1000


1. |-[view]-|:  视图处在父视图的左右边缘内

2. |-[view]  :   视图处在父视图的左边缘

3. |[view]   :   视图和父视图左边对齐

4. -[view]-  :  设置视图的宽度高度

5. |-30.0-[view]-30.0-|: 表示离父视图 左右间距  30

6. [view(200.0)] :表示视图宽度为200.0

7. |-[view(view1)]-[view1]-| :表示视图宽度一样,并且在父视图左右边缘内

8. V:|-[view(50.0)] :视图高度为 50

9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-|:表示离父视图的距离为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为padding。

10: [wideView(>=60@700)]  :视图的宽度为至少为60不能超过  700

11: 如果没有声明方向默认为  水平 V:


2.1.3 示例

    下面用简单例子说明一下:

UIView *v1 = [[UIView alloc] initWithFrame: CGRectZero];

v1.translatesAutoresizingMaskIntoConstraints = NO;

v1.backgroundColor = [UIColor redColor];

 [self.viewaddSubview: v1];


UIView *v2 = [[UIView alloc] initWithFrame: CGRectZero];

v2.backgroundColor = [UIColor grayColor];

v2.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview: v2];    //添加两个允许自动布局的子视图


//设置子视图的宽度和父视图的宽度相同

[self.view addConstraint: [NSLayoutConstraint constraintWithItem: v1 attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: self.view

attribute: NSLayoutAttributeWidth multiplier: 1.0 constant:0]]; 


//设置子视图的高度是父视图高度的一半

[self.view addConstraint: [NSLayoutConstraint constraintWithItem: v1 attribute: NSLayoutAttributeHeight relatedBy: NSLayoutRelationEqual toItem: self.view attribute: NSLayoutAttributeHeight multiplier: 0.5 constant: 0]];


//通过addConstraints添加对水平方向上v1的控制--距离父视图左侧距离为0(距离为0的话也可省略)同时将v2的水平方向的宽度和v1设置成相同

[self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: @"H:|-0-[v1][v2(==v1)]-0-|" options: 0 metrics: nil views: views]];


//通过addConstraints添加对垂直方向上v1的控制--距离父视图上侧距离为0(距离为0的话也可省略)同时将v2的垂直方向的高度和v1设置成相同

 [self.viewaddConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|-0-[v1][v2(==v1)]|"options:0 metrics:nil views:views]];


//最后是垂直布局两个子view

[self.viewaddConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|-0-[v1]-0-[v2]-0-|"options:0 metrics:nil views:views]];


        这样就可以实现上下两个view,各占一半。旋转屏幕的情况下也会自动处理布局。这样看起来代码多,但是可以适应多种分辨率的屏幕。不排除以后苹果出更大更多分辨率的手机。


2.2 AutoLayout框架介绍(ZXPAutoLayout)

        iOS原生的自动布局(NSLayoutConstraint)非常繁琐, 影响开发进度和可读性也不利于维护, 正所谓工欲善其事必先利其器 , 有一个良好的自动布局框架, 则会让我们事半功倍. 而ZXPAutoLayout则是解决这一问题和诞生 . 采用新颖的链式语法, 扩展性,可读性,维护成本也较低.并致力打造最好用,最简洁,最方便,最轻巧的自动布局。

        以下一个简单示例。ZXPAutoLayout详细教程点此- github地址点此

//设置一个背景为半透明红色的view,上下左右四边都距离superview的距离为10

UIView *bgView = [UIView new];

[self.view addSubview: bgView];

bgView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent: 0.5];

[bgView zxp_addConstraints: ^(ZXPAutoLayoutMaker *layout) {

    //上下左右四边都距离superview的距离为10

    layout.edgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));

    //也可以如下这行代码来设置,但要同时设置top,left,bottom,right.推荐以上写法,比较简洁.

    //layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);

}];

//设置一个背景为半透明红色的view,上下左右四边都距离superview的距离为10

UIView *bgView =[UIView new];

[self.viewaddSubview:bgView];

bgView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent: 0.5];

[bgView zxp_addConstraints: ^(ZXPAutoLayoutMaker*layout) {

    //上下左右四边都距离superview的距离为10

    layout.edgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));

    //也可以如下这行代码来设置,但要同时设置top,left,bottom,right.推荐以上写法,比较简洁.

    //layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);

}];


3 界面设置实现自动布局

iOS8开发~UI布局(二)storyboard中autolayout和sizeclass的使用详解

http://blog.csdn.net/liangliang103377/article/details/40082255


        用Xcode在Storyboard界面配置自动布局要点:

    1、对于一个视图内同级别的子视图,要配就全部都配置成自动布局;

    2、对于每个视图,无法上下左右四个方向上的设置,一定要设置全;

    3、对于TableView等大型视图控件,默认顶行就行,无须手动考虑导航条与状态栏高度;


        重点参考IM_RAC项目中,IMSingleChatVC的自动布局设置

4 开发问题汇总

4.1 Constraint问题

4.1.1 不能同时设置一个控件横向或纵向的相对间距后,又去设置绝对尺寸,否则会导致控件不能显示,也不会报错!


4.1.2 Constraint可以只使用部分,细节控件可去代码中做


4.1.3 Constraint中设计的布局一定与代码中设计得布局保持一致

        使用Storyboard进行布局设计后,系统运行时会总是以Storyboard中布局来刷新页面,所以代码中设计得布局一定要与Constraint中设计的布局保持一致。不然会导致布局混乱。


4.1.4 在故事板中进行布局设计时,如果有导航栏、Tab栏,必须也要把高度预留出来

iPhone iPad各种控件默认高度

http://blog.csdn.net/chengyakun11/article/details/7565690


5 参考链接

'Unable to create description indescriptionForLayoutAttribute_layoutItem_coefficient. Something is nil'

http://stackoverflow.com/questions/26024906/unable-to-create-description-in-descriptionforlayoutattribute-layoutitem-coeffi


Unable to create description indescriptionForLayoutAttribute添加了系统约束无法在ios7运行

http://bbs.csdn.net/topics/390950336?page=1


Size Classes with Xcode 6:为所有的尺寸准备一个Storyboard

http://www.cocoachina.com/ios/20140926/9766.html


Storyboard自动布局

http://demo.netfoucs.com/hmt20130412/article/details/24653659


开始iOS7中自动布局教程(一)

http://www.cocoachina.com/industry/20131203/7462.html


【iOS开发】多屏尺的自动适配AutoLayout(纯代码方式)

http://blog.sina.com.cn/s/blog_693de6100102v4sl.html


iOS开发:iPhone6、6 plus适配

http://jingyan.baidu.com/article/8cdccae97a5c2b315413cda9.html


开始iOS 7中自动布局教程(一)

http://www.cocoachina.com/industry/20131203/7462.html


(翻译)开始iOS 7中自动布局教程(二)

http://www.cnblogs.com/zer0Black/p/3977288.html


http://blog.csdn.net/dizzthxl/article/details/9009537


ios-AutoLayout(自动布局代码控制)简单总结

http://blog.sina.com.cn/s/blog_7c336a830102vaht.html


IOS学习之路(代码实现自动布局)

http://www.tuicool.com/articles/B3iiU3J


iOS开发笔记--使用AutoLayout中的VFL(Visualformat language)--代码实现自动布局

http://blog.csdn.net/hopedark/article/details/41844071


使用了Autolayout和约束后,无法用代码修改View的位置,怎么处理?(7楼)

http://www.cocoachina.com/bbs/read.php?tid-256011-page-1.html


在代码中更新AutoLayout约束

http://blog.sina.com.cn/s/blog_6291e42d0102uzav.html


关于autolayout需要频繁变更的讨论

http://segmentfault.com/q/1010000002420050


实时显示iOS编写UI代码效果

http://blog.csdn.net/zhang_red/article/details/45503683

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

推荐阅读更多精彩内容