突然抽了,发现Xcode6的适配真好用,那叫一个爽歪歪,可是毕竟原来用的不多,所以此博客技术不深入,有错误的还希望大家积极指正!小弟先谢过啦。。
可能比较啰嗦,并有点难懂,因为只写了一个大致方向,详细的很多细节请参看大牛的博客。
尾部链接的几个博文写的非常给力,建议看一下。。。
话不多说,如题:
一、AutoLayout、Size Classes基本概念此处不再赘述,详细请参看尾部。
二、怎么用?
先说Size Classes (以下简称SC)。Xcode6创建的工程是不是很神奇?那个Xib、SB文件怎么那么抽象,还是正方形的!其实不用怕,简单的测试就知道了。
--不扯了,太话痨。。
看一下大多数朋友曾经关闭的那个按钮的地方:
先打开这两个选项,然后开始使用自动布局部署各种设备吧!
仔细观察你会发现这个东东:
然后仔细观察发现和原来有不一样的地方,那就是多了个“wAny hAny”这个东东点开之后会有这么个九宫格:
此九宫格拖拽以下看看,还不错吧!有说明,还能改变后面的屏幕的大小。这就是SC。根据不同的选择会出来不同的尺寸,但是这个都是有规则的,简单来说左侧第一排或者第一行是一个叫Compacth(紧凑)的尺寸,中间是个叫any的尺寸,最后那个是Regular(正常)这么一个尺寸,然后重点来了!这几种东东怎么对应设备的尺寸?
拖一个Label测试一下,或者测试一下结果如下:
iPhone4S,iPhone 5/5s,iPhone 6 竖屏:(w:Compacth:Regular) 横屏:(w:Compacth:Compact) iPhone6Plus 竖屏:(w:Compacth:Regular) 横屏:(w:Regularh:Compact) iPad 竖屏:(w:Regularh:Regular) 横屏:(w:Regularh:Regular) AppleWatch(猜测) 竖屏:(w:Compacth:Compact) 横屏:(w:Compacth:Compact)
如果你是自己测试的你会发现,其实有时候你再这里拖拽了控件,当你改变之后你会发现它神奇的莫名的消失了!!这是因为他们之间有一个继承关系。简单点来说就是这样的:
w:Compact h:Compact继承(w:Anyh:Compact,w:Compacth:Any,w:Anyh:Any)
w:Regular h:Compact继承(w:Anyh:Compact,w:Regularh:Any,w:Anyh:Any)
w:Compact h:Regular继承(w:Anyh:Regular,w:Compacth:Any,w:Anyh:Any)
w:Regular h:Regular继承(w:Anyh:Regular,w:Regularh:Any,w:Anyh:Any)
是不是看不大懂?没事,记住简单的这么一个规律:如果出现C/R那么这个布局就继承自该属性为Any的布局。这么一推倒,那么最开始创建时候那个方方的布局(wAny hAny)就是一个通用的布局,就是说不管你怎么改变设备屏幕的尺寸,所读的布局都继承于这个布局。
现在有了上面的基本知识,就可以动手创建一个试试了!
如果试一下你会发现这就是坑人的!拖控件靠边时候就出屏幕了!确实如此。。其实如果你设置九宫格错误的话,有的设备根本就不会出来你拖拽的控件!如果出现这种问题,那么就对着设备尺寸再看看吧!
控件不消失的可以跳过该段!如果你还没有成功!那么来这里吧:
看设备尺寸,你会发现一个现象:
手机:
竖屏:w:Compact h:Regular
呵呵,你懂的。。。对的就是你想的那样,如果说我的布局设置成w:Compact h:Regular格式,那么该布局在手机的竖屏上总能显示!(只是显示,,是否错位是否超出屏幕,未知)
但是这样写有好处也有弊端。。。如果你只做竖屏手机应用,这就是好的,如果其他的就不行了。。。
另外一种方法:灵活使用Any!!比如一下:
手机竖屏:w:Compact h:Regular
iPad竖屏:w:Regular h:Regular
我知道你又懂了。。。是的!
如果在九宫格为w:Any h:Regular 中进行布局的话,那么手机、iPad的竖屏都会显示里面的控件。只是显示,如果正常需要加约束,下面说。
总体上来说就是这样的,如果说你在W:Any H:Any 中设置,则所有的屏幕尺寸均会得到这个布局里面的控件。具体的自己耍着玩吧。。。
然后开始AutoLayout(AL)
首先你应该现弄明白上面的东西。然后保证在某些设备上控件不会消失!然后在进行下面的操作。。。
名词解释:
约束:就是一种布局的表述。比如:A和B上对齐。
重点来了:
首先,需要做的事情是淡化frame!AL是描述性布局,里面的所有的Frame均可以设置为CGRectZero!所以说,如果你创建了一个约束,那么系统就不会为你创建自动布局的默认约束条件,你必须接手全部的布局。否则会发生不可预知的错误。有人该想,系统有自动布局那我不是可以不用添加约束就能达到效果呢?那么你就想错了。只有你自己才知道你的代码需要添加什么样的约束,除非你还没有明白怎么布局你的UI。
第二步:设计你的UI。运用几何,不使用frame完成你的页面的一个表述。比如说如下布局页面和约束:
1.左上角和右上角的视图总是有相等的宽度(也就是pin中第一个widths equally命令)。 2.左上角和右上角的视图水平方向有20点距离(也就是pin中的horizontal spacing)。 3.所有的视图总是有相同的高度(也就是pin中heights equally命令)。 4.上面两个视图和下面那个视图垂直方向上有20点距离(也就是pin中的vertical spacing)。 5.视图和屏幕边缘有20点空间(top,bottom,leading和trailing space相对于父视图的约束)。
大致知道布局的约束是怎么情况了吧?!是不是觉得很复杂?但是如果你觉得复杂的话,去用代码写几个设备的坐标,你会发现其实这个是比较简单的。
第三步:创建约束。上图中的蓝色线表示已经创建好的约束(有效的约束为蓝色,无效的约束为橙色)。现在开始创建约束。
创建约束的位置:
不要问为什么都是灰色的。。因为我没有选中View。
在IB的右下方有这么一行快捷设置的,并效果比较多:
同时还能进行ctr+点击+拖拽到相应View = 弹出框会出现约束的设置。
另外还有约束也是一个对象,有对应的属性(优先级等)具体位置如下
大致功能有这么几种,设置宽高、设置横竖控件距离、设置距离父View的四边距离、设置两个View等宽/高。
很显然:有的是需要选中一个就能设置的,比如第一项和第三项。有的是需要选中两个才能进行选择的,比如第二项和第四项。这个不用我再进行翻译了吧?!
如果还是不懂的话,建议参看后面的链接。他的比我的详细。
以上是IB的设置自动布局,然后是代码的自动布局。
使用代码进行设置约束时候有这么两种设置方式:
/** * * 步骤: * * 1.添加该视图到父View * 2.生成约束对象 * 3.在对应的视图上添加约束条件 * 1)有的约束添加在对应的父视图上,有的约束则是添加在自己身上。 * ⚠⚠⚠ 4.生成的约束一定要能够保证是有效的,否则会出现不可预知的事,比如:看不到视图、崩溃等 */ UIView * view = [[UIView alloc] initWithFrame:CGRectZero]; [view setBackgroundColor:[UIColor orangeColor]]; [self.view addSubview:view]; CGFloat constant = 20.f; #ifdef itemOrVFL NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view.superview attribute:NSLayoutAttributeTop multiplier:1.0f constant:constant]; [self.view addConstraint:constraint]; #else NSArray *vfls = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-constant-[view]" options:0 metrics:@{@"constant":[NSNumber numberWithFloat:constant]} views:NSDictionaryOfVariableBindings(view)]; [self.view addConstraints:vfls]; #endif /* 常见的VFL的写法: [cancelButton(72)]-12-[acceptButton(50)] 取消按钮宽72point,accept按钮宽50point,它们之间间距12point [wideView(>=60@700)] wideView宽度大于等于60point,该约束条件优先级为700(优先级最大值为1000,优先级越高的约束越先被满足) V:[redBox][yellowBox(==redBox)] 竖直布局,先是一个redBox,其下方紧接一个宽度等于redBox宽度的yellowBox H:|-[Find]-[FindNext]-[FindField(>=20)]-| 水平布局,Find距离父view左边缘默认间隔宽度,之后是FindNext距离Find间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边缘的间距都是默认宽度。(竖线'|‘ 表示superview的边缘) */
总结一下:
自动布局才接触可能会觉得很难,因为其打破了原来的直接设置frame的设计UI的作风,所以刚开始可能会不习惯,但是仔细想,这样做还是比较好的。
SC的基本布局还是根据AL进行布局的。
贴出几个学习链接:
SC的理解和使用 http://www.cnblogs.com/zhw511006/p/3998534.html
AL教程 http://www.cocoachina.com/industry/20131203/7462.html
自动布局及VFL写法http://www.360doc.com/content/14/0731/09/11482448_398279878.shtml
纯代码布局 http://blog.sina.com.cn/s/blog_693de6100102v4sl.html
自动布局入门VFL的写法和含义 http://blog.csdn.net/sxfcct/article/details/8776928
VFL详细的写法说明 http://www.cocoachina.com/industry/20131108/7322.html