IOS SizeClass 和 Autolayout 适配各种设备
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IOS SizeClass 和 Autolayout 适配各种设备相关的知识，希望对你有一定的参考价值。
现在苹果生态圈中的设备尺寸也已经变得种类繁多了，设备种类如下：
iPad:iPad1,iPad2,newPad,iPad4,iPad air,iPad air2,iPad mini1,iPad mini2,iPad mini3,iPad pro;
iPhone:iPhone3Gs,iPhone4,iPhone4S,iPhone5,iPhone5S,iPhone5C iPhone6,iPhone6 Plus,iPhone6S,ipad iPhone6S Plus;
iWatch
屏幕大小：
- iPhone:3.5,4.0,4.7,5.5
- iPad: 7.9,9.7,12.9
- iWatch:1.6,1.8
想必苹果也意识到这一点。都知道苹果是以化繁为简的设计哲学深入人心的，这次再一次证明了。SizeClass是对设备尺寸的一个抽象概念，现在任何设备的 长、宽 被简洁地分为三种情况：普通 (Regular) 、紧密 (Compact) 和 任意(Any) ，这样，根据长和宽不同的搭配就能产生 3 * 3 = 9 种不同尺寸。下图展示个每种情况对应的设备。
以前为不同的ios设备尺寸或者同尺寸横竖屏不同适配UI，都要根据实际情况而去计算frame。使用Size Classes是根据当前的屏幕size类型而使用Auto Layout方式进行布局了，要摒弃之前计算frame的思路，而改用相对布局的思维去思考（实际上还是要计算frame）.
而且Xcode6最大的突破也是这里，不在需要建立不同尺寸的storyboard了，只要建立一个，然后修改其view的size就可以做各种屏幕尺寸的适配，如下：
例如我要做iPad页面设计，就设置成w （Regular）／h（Regular）
然后同样的工程，又要兼容横屏的iPhone6 plus，就可以把view的size class设置成：w （Regular）／h（Compact），然后继续适配
然后当程序跑在不同的设备上，或者设备横屏和竖屏切换，就能显示相应的UI了。
示例：
适配iPhone6，在RootViewController的view上添加一个新的view，让这个新的view无论屏幕横屏还是竖屏时候都距离其superview的边缘50点宽，并且横屏时候为绿颜色，竖屏时候为红颜色。
操作如下：
- 切换size class为wCompact／hRegular模式
并且添加一个view，不用管其frame，并设置其背景色为红色
接下来选中红色的view，然后点击Xcode顶部工具栏的Editor－Pin，然后分别添加红色view相对superview边框的约束（上下左右
添加约束的过程中会看到约束的线是黄颜色，表明当前的约束还不能确定view的frame，需要继续添加，当添加完4个约束后，约束线的颜色是蓝色的，表明当前约束是正确的。
然后选中约束，设定约束的值（我们不是想让新的view距离其superview边界50点宽吗！），4个约束都要设置。
设置完后点击下view会自动更新frame，应该是这样的：
2.切换size class为wRegular／hCompact模式，然后重复第一步中的设置，区别是新添加的view背景颜色设置为绿色。
示例2：
基于iPhone适配界面，添加三个view到rootView上，然后无论横屏还是竖屏，新添加的三个view之间及与屏幕边框的距离都保持不变的间距20点宽，效果如图：
因为要适配iPhone横竖屏，所以修改size class为wCompact/hRegular来适配竖屏：拖拽3个view到rootView上，并设置其背景颜色
为了满足设计要求，要添加如下constraint：
- 设定绿色view距离superview左边距和上边距；
- 设定黄色view距离superview右边距和上边距，相对绿色view的的左边距；
- 设定蓝色view的左边距和右边距和下边距，上边距离绿色view下边的距离；
- 设定绿色view与黄色view等宽高
- 设定蓝色view与绿色view等高
操作如下：
选中绿色view，Eidtor－>Pin－>Leading Space to Superview给绿色view添加相对其superview的左边距，然后选中constraint，修改约束的值为20，其他constraint以此类推
添加完如图：
其中红色框部分清晰的表达了所添加的constraint；蓝色框部分时添加的constraint，目前为黄色线，表明当前的constraint还不能定位view，当一个view的constraint正确的时候，constraint的颜色会变为蓝色。绿色线框的部分表达了constraint的数值，我们想让边距为20，所以设置数值为20 。wC hR Installed表明当前constraint适用于wC hR这种size class，不适合any any的size class。
添加绿色view与黄色view之前的距离时候，由于是设定两个子view的constraint，所以要选中两个view，然后Editor－>Pin ->Horizontal，设定值为20：
同样方法Editor－>Pin ->Width Equally，设定绿色view与黄色view等宽度，蓝色view与绿色view等高，结果如图：
但发现constraint颜色仍然后黄色，原因是当前view的位置和constraint希望的不一致，更新下frame（要选中3个view，因为constraint关联3个view）或者点击Document Outline中的黄色小箭头，然后会看到具体的constraint信息来一步步调试，这个也是Xcode6最有突破的地方：
然后效果如图：
然后运行下项目吧，发现确实和预期的一样。然后旋转屏幕，是不是发现横屏时候白了，屏幕什么都没有了？原因是我们仅仅适配的竖屏，横屏还没有适配啊！
修改size class，iPhone4s横屏的size class为wCompact/hCompact，而iPhone6 plus为wReguage/hCompact，那我们不如设置为wAny/hCompact吧！然后安装上边适配竖屏的方式适配横屏。适配好后再次运行，横竖屏都应该是我们想要的了。
小小技巧:
查看不同设备适配情况
Autolayout 纯代码的适配
在 ios6 之前没有AutoLayout布局UI,我们布局UI是基于固定的frame,bound对控件的布局，设置控件的 位置(x,y), 尺寸(width,height)就可以把控件放在相应的位置。
出现Autolayout后，我们用AutoLayout布局控件就要把之前固定设置frame、bound忘记；要想布局显示一个控件，Autolayout以两个词:约束，参照 动态设置一个控件两个东西，位置，尺寸;
小结：
1. 添加约束不宜过多，当添加的约束足以表达该控件的位置与尺寸，就足够了
2. 约束就是对控件的大小或者位置进行约束，参照就是以某个控件的位置进行约束，其实这两者没有明确的分别，它们都可以对控件的位置与尺寸起到作用。两种语法
1）手动添加约束（苹果官方API）
/**
* 这个是系统默认添加约束的方法，它是NSLayoutConstraint的类方法
*
* @param view1 传入想要添加约束的控件
* @param attr1 传入想要添加约束的方向，这个枚举值有很多，可以自己看看
* @param relation 传入与约束值的关系，大于，等于还是小于
* @param view2 传入被参照对象
* @param attr2 传入被参照对象所被参照的方向，如顶部，左边，右边等等
* @param multiplier 传入想要的间距倍数关系
* @param c 传入最终的差值
*
* @return NSLayoutConstraint对象
*/
+(instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c
//一部分NSLayoutAttribute枚举值
NSLayoutAttributeLeft = 1,//控件左边
NSLayoutAttributeRight,//控件右边
NSLayoutAttributeTop,
NSLayoutAttributeBottom,
NSLayoutAttributeLeading,//控件左边
NSLayoutAttributeTrailing,//控件右边
NSLayoutAttributeWidth,//控件的宽
NSLayoutAttributeHeight,//控件的高
NSLayoutAttributeCenterX,//竖直方向中点
NSLayoutAttributeCenterY,//水平方向中点这个方法的参数我很想用形象的语言描述出来，但是还是想不出，更多需要大家从下面的代码中传入的参数去体会
//创建redView
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
//创建redView第一个约束，相对self.view的左边缘间距20
NSLayoutConstraint * redLeftLc = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeLeftMargin
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0f
constant:20.0];
//只有在没有参照控件的情况下，约束才加到自身，不然加到父控件上
[self.view addConstraint:redLeftLc];
//创建redView第二个约束，相对self。view的底边缘间距20
NSLayoutConstraint *redBottomLc = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottomMargin
multiplier:1.0f
constant:-20];//由于是redview相对self.view往上减20，所以是-20
//添加约束
[self.view addConstraint:redBottomLc];
//这里直接设置自身宽为50
NSLayoutConstraint * redWLc = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:kNilOptions
multiplier:1.0f
constant:50.0f];
//由于没有参照物，所以约束添加于自身身上
[redView addConstraint:redWLc];
//创建最后一个约束，自身的高
NSLayoutConstraint * redHLc = [NSLayoutConstraint constraintWithItem:redView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:kNilOptions
multiplier:1.0f
constant:50];
//由于没有参照物，所以约束添加于自身身上
[redView addConstraint:redHLc];运行的效果图
接下来我们继续增加需求，在红色方块的右边放一个离它20间距，离self.view底部也间距20，宽高相等的蓝色方块
//先创建一个一个蓝色的view添加到视图上，剩下的就是用autolayout来设置它的“frame”了
UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];
self.blueView = blueView;
//创建第一个约束，左边间距，由于是想要与红色有20的间距，那么参照参数“toItem”就应该填redView
NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeRight
multiplier:1.0f
constant:20.0f];
//与其他控件发生约束，所以约束添加到父控件上
[self.view addConstraint:blueLeft];
//现在我们已经可以确定自己水平方向的位置了，还差垂直方向的位置，现在我们来创建第二个约束，参照物依然是红色方块，需求是要离self.view底部20间距，这不是正好和红色一样么，那么我们可以直接与红色方块底部对齐就行了
NSLayoutConstraint *blueBottom = [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeBottom
multiplier:1.0f
constant:0.0f];//与红色方块底部对齐，倍数1.0f.差值0.0f
//与其他控件发生约束，所以约束添加到父控件上
[self.view addConstraint:blueBottom];
//剩下两个约束差不多，我就一并描述了，它们都以redView为参照，与其等宽等高
NSLayoutConstraint *blueW = [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeWidth
multiplier:1.0f
constant:0.0f];
[self.view addConstraint:blueW];
NSLayoutConstraint *blueH = [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeHeight
multiplier:1.0f
constant:0.0f];
[self.view addConstraint:blueH];接下来看看效果图
小结：
1.其实Autolayout的思想非常简单，刚开始使用的时候不要想着马上一气呵成，最好一个控件一个控件的实现依赖，分别满足其位置与尺寸的需求，如果一下子几个控件一起弄的话，往往大家犯错是犯在约束添多了，而不是添少了。
2.就如上面的例子，很多人会在设置了与红色等高等宽后，还同时去添加顶部对齐与底部对齐，这样高度就重复设置了，他会忽略了，上下同时对齐不仅给予了垂直位置，也给予了高度，所以思路必须清晰！Autolayout 下添加动画
我将在蓝色方块的右边再加个同样大小的黄色方块，然后，要求点击屏幕，然后蓝色方块被移除，黄色方块替代蓝色方块的位置
还有一个autolayout的知识点：优先级（priority）
//一如往常，先创建黄色View
UIView *yellowV = [[UIView alloc]init];
yellowV.backgroundColor = [UIColor yellowColor];
yellowV.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:yellowV];
//开始创建约束，第一个约束是什么呢？一看就知道是左间距约束啦
NSLayoutConstraint *yellowLeft = [NSLayoutConstraint constraintWithItem:yellowV
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:blueView attribute:NSLayoutAttributeRight
multiplier:1.0f
constant:20];
//与其他控件发生约束，所以约束添加到父控件上
[self.view addConstraint:yellowLeft];
//添加底部约束
NSLayoutConstraint *yellowBottom = [NSLayoutConstraint constraintWithItem:yellowV
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1.0f
constant:-20];
//与其他控件发生约束，所以约束添加到父控件上
[self.view addConstraint:yellowBottom];
//这里我直接设置宽高约束了，就省事不加参照控件了
NSLayoutConstraint *yellowW = [NSLayoutConstraint constraintWithItem:yellowV
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:kNilOptions
multiplier:1.0f
constant:50.0f];
[yellowV addConstraint:yellowW];
NSLayoutConstraint *yellowH = [NSLayoutConstraint constraintWithItem:yellowV
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:kNilOptions
multiplier:1.0f
constant:50.0f];
[yellowV addConstraint:yellowH];运行效果
接下来我再给黄色View添加一个约束，这个约束涉及到优先级，大家注意看代码了哈
//对黄色View添加约束，约束黄色view与红色View的间距为20
NSLayoutConstraint *yellowAnotherLeft = [NSLayoutConstraint constraintWithItem:yellowV
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeRight
multiplier:1.0f
constant:20];
UILayoutPriority priority = 250;//设置优先级
yellowAnotherLeft.priority = priority;
//与其他控件发生约束，所以约束添加到父控件上
[self.view addConstraint:yellowAnotherLeft];想必大家应该看出些端倪了，我在前面已经给黄色View添加了对蓝色View间距位20的view，现在又给黄色view对红色View添加一个间距20的约束，这很明显是不可能出现的情况，黄色View怎么可能同时做到这两个约束呢，用术语来说就是约束冲突，但是大家注意看这段代码
UILayoutPriority priority = 250;//设置优先级-
我给yellowAnotherLeft这个约束添加了优先级，优先级的范围是0~1000，数字越大，优先级越高，在不设置的情况下默认为1000
-
这说明了，我最后添加的这个约束的优先级是低的，这个约束只有在它的冲突约束被抹掉后，它才能实现
-
也就是说，我把蓝色view移除后，黄色View相对于蓝色View左间距20这个约束就不成立了，那么黄色view会自动的变为与红色View间距20
让我们最后加几行代码，来实现这个动画吧！
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//先把蓝色方块从父视图上移除
[self.blueView removeFromSuperview];
//动画更新界面
[UIView animateWithDuration:1.0f animations:^{
[self.view layoutIfNeeded];
}];
}autolayout的动画就是这样实现的，将操作代码走完后，再让动画块去更新界面，动画就出来了，效果如下：
2）VFL(visual format language)
需求：适配iPhone6，在RootViewController的view上添加一个新的view，让这个新的view无论屏幕横屏还是竖屏时候都距离其superview的边缘20
H:|-20-[newView]-20-|
V:|-20-[newView]-20-|
每一个 [] 中表示一个视图或一个控件；V 表示垂直约束，H 表示水平约束,然后两个视图之间的 -0- 的意思就很简单了，意思就是这两个视图之间间隔为0
比如：
V:[view0(67)]-0-[view1(67)]-0-[view2(67)]-0-[view3(67)]-0-[view4(67)]-0-|
self.view.translatesAutoresizingMaskIntoConstraints = NO;
UIView *newView = [UIView new];
newView.backgroundColor = [UIColor greenColor];
[self.view addSubview:newView];
newView.translatesAutoresizingMaskIntoConstraints = NO;
NSMutableArray *constraintArray = [NSMutableArray array];
[constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[newView]-20-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(newView,self.view)]];
[constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[newView]-20-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(newView,self.view)]];
[self.view addConstraints:constraintArray];运行效果
第三方库 Masonry
- VFL的约束创建非常宏观，如果既要照顾语法讲解，又要照顾约束理解.
- Masonry的约束添加思维其实与苹果原API的添加思维是相同的，只是Masonry语法更简洁，代码更优美
示例
需求：如下所示
实现如下：
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
UIView *yellow = [[UIView alloc]init];
yellow.backgroundColor = [UIColor yellowColor];
[self.view addSubview:yellow];
UIView *green = [[UIView alloc]init];
green.backgroundColor = [UIColor greenColor];
[self.view addSubview:green];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(0);// 使左边等于self.view的控件，间隔为0；
make.top.equalTo(self.view.mas_top).offset(0); // 使顶部与self.view的控件的间隔为0；
make.width.equalTo(self.view.mas_width).multipliedBy(0.5); // 设置宽度为self.view的一半，multipliedBy是倍数的意思，也就是，使宽度等于self.view宽度的0.5倍
make.height.equalTo(self.view.mas_height).multipliedBy(0.5);// 设置高度为self.view的一半。
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.and.height.equalTo(redView); // 跟redview等宽高
make.top.equalTo(redView.mas_top); // 与redview顶部对齐
make.leading.equalTo(redView.mas_right); // 与 redview的间隔为0
}];
[yellow mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.and.height.equalTo(redView); // 跟redview等宽高
make.top.equalTo(redView.mas_bottom); // 与 redview的间隔为0
make.leading.equalTo(redView); // 与redvie左对齐
}];
[green mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.and.height.equalTo(redView); // 跟redview等宽高
make.top.equalTo(yellow.mas_top); // 与yellow顶部对齐
make.leading.equalTo(yellow.mas_right); // 与 yellow的间隔为0}];
PS:需要下载第三库 Masonry ，并导入 #import "Masonry.h"Masonry 下的 Autolayout Animation
UIView *redView = [[UIView alloc]init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
UIView *greenView = [[UIView alloc]init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
self.greenView = greenView;
UIView *blueView = [[UIView alloc]init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(20);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);
make.width.equalTo(self.view.mas_width).multipliedBy(0.2);
make.height.equalTo(self.view.mas_height).multipliedBy(0.2);
}];
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(redView.mas_right).offset(20);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);
make.width.equalTo(self.view.mas_width).multipliedBy(0.2);
make.height.equalTo(self.view.mas_height).multipliedBy(0.2);
}];
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(greenView.mas_right).offset(20);
make.bottom.equalTo(self.view.mas_bottom).offset(-20);
make.width.equalTo(self.view.mas_width).multipliedBy(0.2);
make.height.equalTo(self.view.mas_height).multipliedBy(0.2);
make.left.equalTo(redView.mas_right).offset(20).priority(250);
}];让我们最后加几行代码，来实现这个动画吧！
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//先把绿色方块从父视图上移除
[self.greenView removeFromSuperview];
//动画更新界面
[UIView animateWithDuration:1.0f animations:^{
[self.view layoutIfNeeded];
}];
}运行效果
总结 Autolayout 使用
- 以后一律使用autolayout吗？除了在storyboard中使用autolayout，代码方式autolayout如何使用？
- 当需要展示的内容很多并且尺寸不固定；
- 程序需支持屏幕旋转（主要是iPad程序，iPhone程序横屏的场景有点非主流）；
- 程序通用于iPhone和iPad;
-
使用autolayout 利弊
- 好处：可视化，实现简单功能很节省时间
- 坏处：storyboard 使用 autolayout,移动一个控件就会让弄乱那些约束;
-
autolayout有没有局限性和解决不了的问题？兼容性怎么样？效率怎么样
- autolayout对view transforms支持的不好，这里有帖子详细描述了这个问题
- 至于兼容性，只从iOS6就已经提出了autolayout的概念，大部分用户应该是使用iOS7和iOS8系统，所以兼容性问题不会太大，但size class是iOS8才有的概念，所以还有有一定的适配工作量
参考的帖子
以上是关于IOS SizeClass 和 Autolayout 适配各种设备的主要内容，如果未能解决你的问题，请参考以下文章
IOS SizeClass 和 Autolayout 适配各种设备