Xcode6中自动布局autolayout和sizeclass的使用
招聘信息：
一、关于自动布局（Autolayout）
在Xcode中，自动布局看似是一个很复杂的系统，在真正使用它之前，我也是这么认为的，不过事实并非如此。
我们知道，一款iOS应用，其主要UI组件是由一个个相对独立的可视单元构成，这些可视单元有的主要负责向用户输出有用的信息，有些则负责信息的输入（交互），交互的过程中往往还伴随有动画的效果，已达到整个信息传递的连贯性以及用户体验的细腻感。可视单元，在实际开发中主要是view、button等，那么这些可视单元的关系由两个基本的关系构成：兄弟关系和父子关系，整个视图单元就是一个树形结构：
对于任何一个UI组件，确定了它的（相对于父view）位置、大小也就确定了它在整个UI视图中的展示效果。
Autolayout（以及iOS8中新增的sizeclass）是为了解决这些UI可视单元或者元素是怎样布局、排列的问题。在过去只有iPhone4的时候，我们可以在代码里将没一个可视单元的位置写死，这样是没问题的，但随着iPhone5、6的发布，屏幕尺寸有了越来越多中可能，未来不排除更多尺寸的iPhone发布出来，这就要求我们的APP的UI元素具有在屏幕尺寸不同的设备上具有一定动态的可调性，已实现较好的UI展示效果。从目前苹果提供的技术来看，有下、中、上三种实现方法：
下策是，代码中判断当前设备的尺寸，对UI元素进行手工的调整，其缺点是显而易见的：代码复杂、容易出错、且维护难度大、灵活性极差；
中策是，通过设置可视单元（UIView UIButton...）的autoresizing属性，预设当该view所在的环境（父view）发生变化时它的尺寸和位置应该如何调整，该方法可以在Xcode的interface
builder中（storyboard 或者 xib）设置完成，但其只能针对父子关系进行有限的调整，比如左边距是否固定，尺寸是否可变等，而对于兄弟关系的调整则无法实现，对于UI比较固定的APP这种调节方式也算基本满足需求；
上策就是结合使用autolayout和sizeclass对UI可视单元的父子关系、兄弟关系进行全方位的调整，而且调节精度更高：不仅能确定一个view的位置尺寸的变化依据是什么，还能对这些依据加以不同的优先级，先满足什么条件，再满足什么条件，对于重要的位置尺寸可以优先保证，这样整个APP就具有极强的动态可调性，满足不同设备、不同应用场景下的需求。
在目前苹果手机苹果尺寸多达四种的情况下，显然新的APP必须要采用上策来解决视图组件的布局问题。
Autolayout的作用非常明确：帮我们确定在不同设备、不同（父view）环境下，同一个可视单元所应具有合适的位置和尺寸，因此，当一个UIView上所施加的约束能够唯一确定它的frame（x,
y, width, height）的时候我们的自动布局的使用才是正确的。而新手通常犯的两类错误就是约束不足（约束太少）和约束冲突两种（约束太多）。如果你给出的约束只能够确定这个view的大小，或者位置或者位置中的某一个项（比如x）的时候，就会出现约束不足的情况，在xib或者storyboard中，会以黄色的警告出现在左侧提示框内；如果你给出的约束推导出了两个甚至多个互相矛盾的位置尺寸结果的时候，就产生了布局错误，在编译的时候直接就build不过。
二、关于iOS8新增的sizeclass属性
在iOS8中，新增了Size Classes特性，它是对当前所有iOS设备尺寸的一个抽象，也是该抽象了，想想现在多少种iOS尺寸的设备吧：iPhone4-5-6-6plus、iPad、iPad mini、iWatch，如何还是按照以前那针对种特定设备来编写不同的布局的话，一定是很糟糕的一件事情。
现在有了sizeclass，事情就好办多了：你不是设备多吗，那我们就只把屏幕的宽和高分别分成三种情况：（Compact, Regular, Any），也即紧凑、正常和任意。这样宽和高三三一整合，一共9中情况。如下图所示，针对每一种情况，如果需要的话，我们可以单独在storyboard或xib中设置UIView的自动布局约束，甚至某一个button是否显示都是能轻松实现。
关于size class的详细解析，参考苹果文档和wwdc2014视:点击打开链接 (What's New in Interface
Builder)。
三、storyboard中autolayout和size class的无敌配合
对Xcode的interface builder比较熟悉的童鞋应该对UIButton的超强定制性映像深刻：通过选择button的不同状态（normal、height、disabled...），我们可以单独设置每一种状态，button的background
image、image、text color等属性，见下图：
而Xcode6中对自动布局的重大变更有异曲同工之妙：开发者可以根据实际需要，针对size
class的九种组合中的某一种或几种分别进行自动布局的设置，这样，当APP运行于不同屏幕、不同旋转方向的时候，就可以根据当前环境的size class情况使用我们预先设置好的布局信息，从而达到APP UI的极大灵活性。
和设置UIButton的不同状态的不同属性类似，我们首先选择一种size class，然后针对该种size class进行自动布局。下面我们以一个简单的布局场景为例进行说明：
假设，我们想实现下面这个效果：横屏和竖屏头像和label都能正常的现实，且在&比较恰当&的位置：显然横屏的时候，高度处于压缩的状态，（height: compact），我们需要先对正常的布局之外，还要添加一种（wAny, hCompact）size class的布局：
首先，我们对默认的sizeclass进行布局，确定头像和label的位置和尺寸：
设置完（wAny hAny）之后，点击wAny hAny文字（上图底部），选择（wAny hCompact）：注意点击后弹出一个九宫格浮框，拖动鼠标即可选择响应的size class，注意在右下角（红色方框表示），还可以选择是否install，如果取消勾选，则这个头像在当前size class下就不会被加载（自然也就不显示出来）。
在新的size class下我们开始添加新的布局，注意，这里并没有覆盖上一种size class我们定义好了得布局，知识针对当前的size class添加新的、独立的布局信息，狡兔三窟，Xcode6这下子一口气给了我们九个窟窿，爽！
布局完毕，运行起来，即可达到我们想要的效果！
Awesome, isn't it ?
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量16272点击量10875点击量8664点击量8017点击量7488点击量7063点击量6588点击量6497点击量5716
&2016 Chukong Technologies,Inc.
京公网安备89主题 : 关于scrollview在自动布局中设置contentsize大小。。。。
级别: 新手上路
可可豆: 0 CB
威望: 1 点
在线时间: 28(时)
发自: Web Page
关于scrollview在自动布局中设置contentsize大小。。。。&&&
首先，我在xib文件中创建了一个scrollview，为了适配3.5寸屏幕，设置布局限制，scrollview底部和superview底部距离为0，然后想在.m文件中修改contentsize，怎么改这个值啊，好像改不了啊。。。。
级别: 新手上路
可可豆: 141 CB
威望: 100 点
在线时间: 190(时)
发自: Web Page
我的scroll在3.5和4寸的屏幕上都没问题，在viewDidLoad中设置frame，和设置scrollView的contentSize。
//设置View大小
CGSize size = [[UIScreen mainScreen] bounds].
self.view.frame = CGRectMake(0, 0 , size.width, size.height);
//如果你不想让scroll view的内容自动调整，将这个属性设为NO（默认值YES）。
self.automaticallyAdjustsScrollViewInsets = NO;
//滚动图片
self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width*3,self.view.frame.size.height);
self.scrollView.pagingEnabled = YES;//分页模式
self.scrollView.showsHorizontalScrollIndicator = NO;
我使用的也是自动布局
级别: 新手上路
可可豆: 0 CB
威望: 1 点
在线时间: 28(时)
发自: Web Page
你的自动布局不会对你的scrollview产生影响吗，你在viewdidload里面设置了，好像它又会自动改回去啊。。。
级别: 新手上路
可可豆: 141 CB
威望: 100 点
在线时间: 190(时)
发自: Web Page
我使用的时候是有一点影响，出现过的情况是：我准备用scrollView做引导页的，所以要充满真个屏幕（包括状态栏），本来没加自动布局条件的时候，是可以充满整个屏幕的。加了之后出现scrollView从状态栏以下开始显示。我加了这个self.automaticallyAdjustsScrollViewInsets = NO;代码之后就ok了。。。。你说的这个情况没有遇到过。或者你把scrollView放到一个View中放到底部试试吧。。。
级别: 新手上路
可可豆: 4 CB
威望: 4 点
在线时间: 125(时)
发自: Web Page
回 3楼(gaobusi) 的帖子
虽然不是一模一样的问题，但是帮了我忙，
关注本帖(如果有新回复会站内信通知您)
个人IDP证书一年费用？ 正确答案:99美金
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版iOS屏幕适配教程（手动布局和自动布局） - 推酷
iOS屏幕适配教程（手动布局和自动布局）
iOS屏幕适配教程
1.通过frame进行适配
在iOS早期开发，都是使用frame属性进行屏幕适配，需要多套代码，非常麻烦。
//使用frame添加控件view，并设置属性，但是只能使用指定屏幕尺寸
[super didReceiveMemoryWarning];
UIView *greenView=[[UIView alloc]init];
greenView.frame=CGRectMake(20, 20, 20, 20);
greenView.backgroundColor=[UIColor greenColor];
[self.view addSubview:greenView];
2.Autoresizing实现适配
随着iOS的发展，后期苹果公司添加了Autoresizing功能，用来约束父子控件之间的关系，以父控件作为参照进行设置，设置相应的参数。相应可用拖拽来实现，下面列出用代码实现的方法
//设置两个view，通过代码实现两个view（blueView，redView）一起变化
@interface ViewController ()
@property(nonatomic,weak)UIView *blueV
//此处声明redView父控件blueView
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
1.创建蓝色的视图
UIView *blueView = [[UIView alloc]init];
blueView.frame =
CGRectMake(0, 0, 200, 200);
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];
self.blueView = blueV
2.创建红色的视图
UIView *redView = [[UIView alloc]init];
CGFloat redViewH = 30;
redView.frame = CGRectMake(0, 170, 200, redViewH);
redView.backgroundColor = [UIColor redColor];
[blueView addSubview:redView];
3.当修改蓝色视图的frame的时候，红色的视图跟着变化
红色的宽带随着蓝色的宽度变化而变化，距离顶部的间距始终是拉伸的
UIViewAutoresizingNone
UIViewAutoresizingFlexibleLeftMargin
= 1 && 0,//距离左边拉伸
UIViewAutoresizingFlexibleWidth
= 1 && 1,//宽度拉伸
UIViewAutoresizingFlexibleRightMargin
= 1 && 2,//距离右边边拉伸
UIViewAutoresizingFlexibleTopMargin
= 1 && 3,//顶部拉伸
UIViewAutoresizingFlexibleHeight
= 1 && 4,//高度拉伸
redView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleH
当点击屏幕的时候就会触发这个方法，点击的时候，让蓝色视图的frame变化。
@param touches &#touches description#&
@param event
&#event description#&
- (void)touchesBegan:(NSSet&UITouch *& *)touches withEvent:(UIEvent *)event{
CGRect tempFrame = self.blueView.
tempFrame.size.width +=30;
tempFrame.size.height +=30;
self.blueView.frame = tempF
3.Aotolayout实现适配
因为autorezing不能设置同级控件之间的关系，假设在竖屏下, 屏幕底部有两个按钮, 这两个按钮的间距为一个固定的值(宽度不指定); 当切换为横屏的时候要求这两个按钮还显示在屏幕底部, 并且按钮间的间距不变, 按钮可以随之变宽，通过autorezing是无法实现的，所以在iOS6之后，苹果公司推出aotolayout,既可以设置父子控件之间的关系也可以设置同级控件之间的关系，一经推出便在ios7开始大规模使用。
aotolayout里边的两个核心概念：约束和参照，一般一个控件确定位置需要四个约束，且这些约束都有相应参照的控件。
在使用aotolayout设置控件的时候，屏幕上控件的的位置区域会有两种颜色：
黄色：表示当前的显示效果和实际效果不匹配，需要更新frame
红色：表示约束不完整，约束冲突（表示两个或者多个约束约束的效果不一致）
在开发的时候基本都是使用拖拽及设置参数的方法进行设置，相对较为简单，本位就不加赘述，下面笔者通过代码进行设置
创建一个蓝色的View视图
UIView*blueView=[[UIView alloc]init];
blueView.backgroundColor=[UIColor
blueColor];
[self.view addSubview:blueView];
因为AutoLayout和Autoresizing不能重用，因此需要去掉autoresizing，所以可能添加约束的控件
1 //去掉所以可能添加约束的控件的autoresizing属性
self.view.translatesAutoresizingMaskIntoConstraints=NO;
blueView.translatesAutoresizingMaskIntoConstraints=NO;
给控件的属性赋值 ，并添加在对应视图上
//设置left
NSLayoutConstraint *leftBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
//设置right
NSLayoutConstraint *rightBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
NSLayoutConstraint *topBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
//设置height
NSLayoutConstraint *heighBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:30];
//添加到对应参照控件上
[self.view addConstraints:@[leftBlue,rightBlue,topBlue]];
[blueView addConstraint:heightBlue];
可以看到，通过代码实现autolayout方法非常麻烦，因此通过拖拽创建相对方便快捷，但是在做一些支付信息，密码保护等功能的时候，尽量使用代码进行创建。
4.通过sizeClass进行适配
因为autolayout不能满足设置一套约束，在所有的屏幕都适配，所以出现了sizeClass,size用来区分屏幕
sizeclass中把宽高各分成了三种类型regualr，compact，any，当宽度和高度各是某种类型的时候，就会确定某一类屏幕，当宽高均为any的时候，即可适配所有屏幕。
所以确定九类屏幕，只是不屏幕进行了区分，具体的约束关系，但是具体的实现
还需要autolayout来实现。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致xcode6中自动布局autolayout和sizeclass的使用 - 推酷
xcode6中自动布局autolayout和sizeclass的使用
一、关于自动布局（Autolayout）
在Xcode中，自动布局看似是一个很复杂的系统，在真正使用它之前，我也是这么认为的，不过事实并非如此。
我们知道，一款iOS应用，其主要UI组件是由一个个相对独立的可视单元构成，这些可视单元有的主要负责向用户
输出有用的信息，有些则负责信息的输入（交互），交互的过程中往往还伴随有动画的效果，已达到整个信息传递的连
贯性以及用户体验的细腻感。可视单元，在实际开发中主要是view、button等，那么这些可视单元的关系由两个基本的
关系构成：兄弟关系和父子关系，整个视图单元就是一个树形结构：
对于任何一个UI组件，确定了它的（相对于父view）位置、大小也就确定了它在整个UI视图中的展示效果
& Autolayout（以及iOS8中新增的sizeclass）是为了解决这些UI可视单元或者元素是怎样布局、排列的问题。在过去
只有iPhone4的时候，我们可以在代码里将没一个可视单元的位置写死，这样是没问题的，但随着iPhone5、6的发布，
屏幕尺寸有了越来越多中可能，未来不排除更多尺寸的iPhone发布出来，这就要求我们的APP的UI元素具有在屏幕尺寸
不同的设备上具有一定动态的可调性，已实现较好的UI展示效果。从目前苹果提供的技术来看，有下、中、上三种实现
& & &下策是，代码中判断当前设备的尺寸，对UI元素进行手工的调整，其缺点是显而易见的：代码复杂、容易出错、且
维护难度大、灵活性极差;
& & &中策是，通过设置可视单元（UIView UIButton...）的autoresizing属性，预设当该view所在的环境（父view）发生变
化时它的尺寸和位置应该如何调整，该方法可以在Xcode的interface builder中（storyboard 或者 xib）设置完成，但其
只能针对父子关系进行有限的调整，比如左边距是否固定，尺寸是否可变等，而对于兄弟关系的调整则无法实现，对于
UI比较固定的APP这种调节方式也算基本满足需求；
& & &上策就是结合使用autolayout和sizeclass对UI可视单元的父子关系、兄弟关系进行全方位的调整，而且调节精度更高
：不仅能确定一个view的位置尺寸的变化依据是什么，还能对这些依据加以不同的优先级，先满足什么条件，再满足什
么条件，对于重要的位置尺寸可以优先保证，这样整个APP就具有极强的动态可调性，满足不同设备、不同应用场景下
在目前苹果手机苹果尺寸多达四种的情况下，显然新的APP必须要采用上策来解决视图组件的布局问题。
& & &Autolayout的作用非常明确：帮我们确定在不同设备、不同（父view）环境下，同一个可视单元所应具有合适的位置
和尺寸，因此，当一个UIView上所施加的约束能够唯一确定它的frame（x, y, width, height）的时候我们的自动布局的
使用才是正确的。而新手通常犯的两类错误就是约束不足（约束太少）和约束冲突两种（约束太多）。如果你给出的约
束只能够确定这个view的大小，或者位置或者位置中的某一个项（比如x）的时候，就会出现约束不足的情况，在xib或
者storyboard中，会以黄色的警告出现在左侧提示框内；如果你给出的约束推导出了两个甚至多个互相矛盾的位置尺寸
结果的时候，就产生了布局错误，在编译的时候直接就build不过。
二、关于iOS8新增的sizeclass属性
在iOS8中，新增了Size Classes特性，它是对当前所有iOS设备尺寸的一个抽象，也是该抽象了，想想现在多少种i
OS尺寸的设备吧：iPhone4-5-6-6plus、iPad、iPad mini、iWatch，如何还是按照以前那针对种特定设备来编写不同的
布局的话，一定是很糟糕的一件事情。现在有了sizeclass，事情就好办多了：你不是设备多吗，那我们就只把屏幕的宽
和高分别分成三种情况：（Compact, Regular, Any），也即紧凑、正常和任意。这样宽和高三三一整合，一共9中情况
。如下图所示，针对每一种情况，如果需要的话，我们可以单独在storyboard或xib中设置UIView的自动布局约束，甚至
某一个button是否显示都是能轻松实现。
关于size class的详细解析，参考苹果文档和wwdc2014视:
What 's New in Interface Builder)。
三、storyboard种autolayout和size class的无敌配合
对Xcode的interface builder比较熟悉的童鞋应该对UIButton的超强定制性映像深刻：通过选择button的不同状态
（normal、height、disabled...），我们可以单独设置每一种状态，button的background image、image、text color等属
性，见下图：
而Xcode6中对自动布局的重大变更有异曲同工之妙：开发者可以根据实际需要，针对size class的九种组合中的某
一种或几种分别进行自动布局的设置，这样，当APP运行于不同屏幕、不同旋转方向的时候，就可以根据当前环境的
size class情况使用我们预先设置好的布局信息，从而达到APP UI的极大灵活性。
和设置UIButton的不同状态的不同属性类似，我们首先选择一种size class，然后针对该种size class进行自动布局。
下面我们以一个简单的布局场景为例进行说明：
假设，我们想实现下面这个效果：横屏和竖屏头像和label都能正常的现实，且在“比较恰当”的位置：显然横屏的时
候，高度处于压缩的状态，（height: compact），我们需要先对正常的布局之外，还要添加一种（wAny, hCompact）
size class的布局：
首先，我们对默认的sizeclass进行布局，确定头像和label的位置和尺寸：
设置完（wAny hAny）之后，点击 wAny hAny文字（上图底部），选择（wAny hCompact）：注意点击后弹出一
个九宫格浮框，拖动鼠标即可选择响应的size class，注意在右下角（红色方框表示），还可以选择是否install，如果取
消勾选，则这个头像在当前size class下就不会被加载（自然也就不显示出来）。
在新的size class下我们开始添加新的布局，注意，这里并没有覆盖上一种size class我们定义好了得布局，知识针对当前的size class添加新的、独立的布局信息，狡兔三窟，Xcode6这下子一口气给了我们九个窟窿，爽！
完毕，运行起来，即可达到我们想要的效果！
Awesome, isn't it ?
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致