20storyboard自定义cell_屏幕的适配_size class_Autolayout_图片适配_Masonry
作者:Solar_He
storyboard自定义cell_屏幕的适配size class_Autolayout图片适配_Masonry
一、storyboard自定义cell核心要点:1,如何创建,根据cell的identifier自动创建2,不需要注册3,不需要为cell单独创建xib
二、屏幕的适配（一）为什么需要做屏幕的适配横竖屏情况,界面内部的控件根据,界面view的高度和宽度的不同变化,做出相应适配不同尺寸屏幕的情况,同上核心:界面内部的控件根据界面的大小的变化而进行适配
iPhone都有哪些尺寸:
分辨率(px:像素点)
程序坐标系单位(pt 点)
320480 (缩放因子 1)
320480iPhone4/4s
(4s)640960
320480 (缩放因子 2)
640960iPhone5/5s
320568 (缩放因子 2)
6401136iPhone6/6s
375667 (缩放因子 2)
iPhone6 Plus /6s Plus
414736 (缩放因子 3)
程序里面有一个缩放因子,scale px和pt的缩放比例px = scale*pt
//iPad的课下自己查,所有的iPad mini/mini2iPad 2iPad air
（二）屏幕的适配都要做哪些事情改变控件的大小,来适应屏幕的变化
苹果提供的适配的技术1,6.0之前 Autosizeing2,6.0之后 Autolayout
(推荐)程序员自己搞3,相对坐标 (推荐)
（三）size class
核心:使用 Compact，Regular，Any，即紧凑，正常和任意。三种组合来代表所有的设备的屏幕.
//从 Xcode 6 开始，xib 默认的大小是 600 * 600。这是因为苹果在 iOS 8 中新增了一个屏幕适配的技术，叫做 sizeClass。
//实际开发项目的时候，通常有 iPhone 和 iPad 两个版本，两者内容完全一样，只是 UI 不同。我们需要建立两个工程对应实现。sizeClass 抛弃了我们传统上的屏幕宽高尺寸，它把屏幕的宽高分别抽象为三种情况：Compact，Regular，Any，即紧凑，正常和任意。这样宽高总共有九种组合，包含了所有 iOS 设备的屏幕类型(iPhone，iPod，iPad，iWatch)。我们就可以在一个 xib 文件中为每个控件在不同类型的屏幕下设置不同约束条件，达到在不同屏幕下展示不同效果的目的。
//具体宽高组合和屏幕尺寸对应关系如下图，或者在 xib 中选择查看。
//宽高组合中，any
any 组合是默认的，即 600
600。在这个状态下我们设置约束在所有的屏幕分辨率下都会生效。
//如果我们需要为某一个屏幕单独设置约束，我们需要选择我们需要的状态，然后设置约束。
//sizeClass 允许我们为同一个控件在不同的屏幕下设置不同的约束。
//xib 中设置约束参考如下图片：1.Autolayout图解
2.添加约束
（四）使用autolayout动态计算cell的高度/Program/IOS/965.shtml
Content Hugging Priority和Content Compression Resistance PriorityContent Hugging：内容压缩，阻止视图的实际尺寸比intrinsicContentSize返回的更大Content Compression Resistance：阻止内容压缩，阻止视图的实际尺寸比intrinsicContentSize返回的更小。Content Hugging Priority：内容压缩优先级，默认为250Content Compression Resistance Priority：阻止内容压缩优先级，默认为750
1,添加合理的约束2,设置 Content Hugging Priority和Content Compression Resistance Priority
二、图片适配1.@2x 的来源。2.Image.xcassets 的简单使用。3.Image.xcassets 中可以使用 pdf 图片。
（一）图片适配
（二）Masonry属性对照表在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
写布局规则写到吐了，但是对 Storyboard 来设置约束总感觉没安全感，而且很多约束不知道该怎么在界面上描述
你现在项目中是使用 Storyboard 来设置约束的还是代码？有没有好的 Storyboard 来设置约束的教程推荐？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
先说个人看法：具体情况具体分析，该用什么用什么。脱离具体使用场景的讨论都是耍流氓。
AutoLayout可以解决你很多约束需求，你有什么需求是AutoLayout实现不了的可以通过代码调整，不过情况很少的。。。举个例子看看？
12-05 更新
多个storyboard和xib里的字体、控件背景如何统一控制。 比如标题都是14，颜色为0X999999这样，用代码设置一个global config之类的地方读取即可，用IB不知道要怎么做。
storyboard中的viewController的重用问题。
这种统一控件不应该用基类来做吗？比如整个应用所有按钮字体都是14号字，如果有1000个按钮你就多了1000行设置格式的代码？这种无意义代码不应该尽量减少吗？如果我又要加上背景颜色，那你岂不是要找到这1000个按钮然后挨个加上背景颜色？累不累。。。
XIB 是可以设置基类的 (custum class)，而且利用 run time attr 标签可以设置一些运行时属性，比如圆角，投影之类。我觉得这种代码属于 无意义重复代码 ，如果能减少是最好的。
storyboard中似乎是无法直接制作view的，而必须要放入viewController中，以体现storyboard“scene”的意义，这不难理解。但在storyboard里做了一个容器viewController A(比如说，一个类网易新闻的横向标签条和一个scrollView的组合)，想要作为基类来使用，同一个storyboard里使用A的派生类B，B中所有的控件都没有初始化，似乎是storyboard并不认可这样使用，让人有些困扰。
storyboard 是故事版，你见过在链表里面插入一个字符串的吗，显然应该加个节点啊。。。
这种情况如果想用 xib 可以新建 xib 文件并建立关联即可。至于你说的初始化的问题，没看懂你想说什么，建议先了解一下 view 的生命周期和 xib 的加载流程。
后面的我不想说太多了，时间有限，如果有了问题建议先google一下，比如：
我觉得能解决你的很多困惑。
还是那句话，具体问题具体分析。很多场景确实不适合使用 Storyboard (比如我要写个基类继承 UIButton 然后有一些自己的默认属性比如字体颜色什么的)，但是绝大部分场景是推荐使用 XIB 的。看你怎么用了。
当然 Masonry 也是个不错的选择。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用代码写会疯掉的，用storyboard代码能实现的它都能实现。
这里有几个地址你可以参考一下
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
纯代码，用，很快，极快，让我直接扔掉了自己封装的一套垃圾。
Storyboard和Xib用了一段时间，产生了很多困惑和问题，最终在公司现在的项目上放弃了。这里列举3个，希望IB达人指正。
多个storyboard和xib里的字体、控件背景如何统一控制。 比如标题都是14，颜色为0X999999这样，用代码设置一个global config之类的地方读取即可，用IB不知道要怎么做。
storyboard中的viewController的重用问题。
storyboard中似乎是无法直接制作view的，而必须要放入viewController中，以体现storyboard“scene”的意义，这不难理解。但在storyboard里做了一个容器viewController A(比如说，一个类网易新闻的横向标签条和一个scrollView的组合)，想要作为基类来使用，同一个storyboard里使用A的派生类B，B中所有的控件都没有初始化，似乎是storyboard并不认可这样使用，让人有些困扰。
xib写就的view的重用问题。
在storyboard中的某个viewController或者一个xib文件中拖入另一个xib文件写就的view
A，在初始化完成后，发现A中所有的outlet都为nil，似乎根本没有去加载对应的xib。要正常使用，目前我只能通过代码来加载。这一点是我最终放弃的主要原因，即使有办法能够做到，但如此符合直觉的做法却是无效的，仍然让人有些上火。
补充一下，刚好在大屏iPhone出来的时候加入了现在的公司，从头拉起一个项目，直接用iOS8.1的SDK，在autolayout上真是吃了不少苦头。我觉得不论用IB还是用代码，autolayout本身的使用最终都不会有多大问题，真正的坑其实是autolayout的兼容性问题。我遇到了不少在iOS8下正常工作，但在iOS7下crash或卡viewDidLayoutSubviews无限循环的bug，绕过去花了大量时间。相比同时间android组的开发速度。。。。。有时候是会有点转行的冲动的。。
再补充一下，autolayout的debug在刚开始的时候是非常痛苦的，基本只能根据console里的一大排错误信息慢慢做排除法。用纯代码写约束的一个巨大好处是，暂时地移除部分约束(注释即可)，或添加测试约束(用Debug_constraint_only之类的宏控制即可)非常容易，而在IB里做则非常痛苦。一是要反复地进出各个view层级来install/uninstall，二是面对复杂的UI，很容易就恍惚了刚刚改了什么(也可能是我脑残片忘了吃了)。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
storyboard，妥妥的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
用Storyboard设置会比较方便，但是复杂的应用程序例如要求添加动画的话。
可以同Animate Constraints来改变。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
现在3.5寸，4寸，4.7寸，5.5寸以及iPad、Apple Watch这么多尺寸的屏幕共存，使用代码布局就显的捉襟见肘了，且不说效率，容错率就很低。而且WatchKit压根不允许你使用代码布局，说明Apple逐渐有规避代码布局的趋势。建议还是系统的学习Storboard、AutoLayout、Size Classes三大利器。
这里介绍两篇外国的译文，可以参考一下：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
storyboard 方便快速
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：12:23 提问
Xcode6 如何利用storyboard实现不同设备下的屏幕适配
我知道用autolayout 加约束 但是我一直有个疑问 比如两个视图 一个高100 一个高300
放在屏幕中央 怎么让他们等比例放大缩小呢？
他们两个的间距， 还有上面视图到上面 下面视图到下面的 间距都是固定的 就是要让他们的宽度比固定 宽度自适应
- - 我想不出来怎么加约束
求教啊 现在在做适配 急 在线等。。。。。
按赞数排序
这个问题不好答，我也想知道答案
- 好把 有人没呀
可以添加一条约束，让子视图的宽度等于父视图宽度的几比几，边距自适应也是同样的原理，不过不能用VFL语言写，只能手动创建约束对象来完成
两个控件都选中,下面添加约束的左边按钮点开后,里面有等比例缩放的,这个必须选中2个或2个以上的控件才能选
给这个界面下面再套一个view。然后设置下面这个view的约束条件
1.Control+按住左键点击一个控件 拖向 另一个控件。
2.如果想要宽度按比例，选择equal widths
如果想要高度按比例，选择equal heights
3.编辑刚才设计的约束，如图，在黑框中输入数值，如果想要第一个控件是第二控件的n倍，黑框中输入n，可以为小数。
也可以在控件的底层铺一个view，分别设置控件与view的比例，主要就是设置Multipier的值。
其他相关推荐Storyboard 自适应布局 - CSDN博客
Storyboard 自适应布局
原文链接：
通用的Storyboard
通用的stroyboard文件是通向自适应布局光明大道的第一步。在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想。我们不必再为不同尺寸的Apple移动设备创建不同的storyboard文件，不用再苦逼的同步若干个storyboard文件中的内容。这真是一件美好的事情。
我们打开Xcode，新建一个项目：
选择iOS\Application\Single
View Application创建一个单视图应用：
设置项目名称AdaptiveWeather，语言选择Swift，设备选择Universal：
创建好项目后，我们在项目目录结构中可以看到只存在一个storyboard文件：
Main.storyboard文件就是一个通用的storyboard文件，它可以适配目前所有屏幕尺寸的Apple移动设备。打开该文件，同学们会看到一个View
Controller，以及一个我们不太熟悉的界面尺寸：
同学们不要吃惊，没错，你们看到的就是一个简单的、有点大的正方形！大伙都知道，在上一个版本的Xcode中，storyboard里的屏幕尺寸都对应着我们所选的目标设备的尺寸，但是这样无法让我们达到“用一个storyboard搞定所有设备”的宏伟目标。所以在iOS8中，Apple将storyboard中屏幕的尺寸进行了抽象处理，也就是说我们看到的这个正方形是一个抽象的屏幕尺寸。
我们接着往下走，选中Main.storyboard文件，然后在右侧工具栏中选择File
Inspector页签，然后勾选Use Size Classes选项：
在新的iOS8项目中，该选项默认是勾选的。但当你使用老版本的项目创建新的storyboard文件时就需要你手动进行勾选了。
设置你的Storyboard文件
首先，我们打开Main.storyboard文件，从组件库（Object
Library）中选择Image View拖拽到View Controller中。选中刚刚拖入的Image View，在右侧工具栏选择Size Inspector页签，设置X坐标为150，Y坐标为20，宽为300，高为265。
然后再拖入一个View组件，设置X坐标为150，Y坐标为315，宽为300，高为265。
选择你刚才拖入的View，在右侧工具栏中选择Identity Inspector页签，在Document面板中的Label属性输入框中输入TextContainer。这个属性的作用就是给View起一个名字，方便我们辨认。这里要注意一下，Document面板有可能是隐藏的，我们需要点击它后面的&Show按钮来显示它。我们拖入的这个View最后是显示城市和温度Label的容器。
完成上面的设置后，同学们可能会发现刚才拖入的View貌似看不到，这是因为它的背景色和View Controller的背景色是相同的，都是白色，所以我们不太容易辨别。我们来解决这个问题，选中View Controller的View，然后在右侧工具栏中选择Attribute Inspector页签，设置背景色为&红：74，绿：171，蓝：247。然后再选择TextContainer，就是我们拖入的View，设置背景色为&红：55，绿：128，蓝：186。此时Main.storyboard文件中应该是这番景象：
到目前为止，我们在View Controller中添加了两个组件Image View和View，这也是仅有的两个组件，接下来我们就要给它们添加一些布局约束了。
添加布局约束
选择image view，点击底部自动布局工具栏中的Align按钮，勾选Horizontal Center in Container选项，将后面的值设置为0，点击&Add 1 Constraint按钮添加第一个约束。
这个约束的意思是让image view在它的容器（View Controller的View）中保持居中。
然后再点击底部自动布局工具栏中的Pin按钮，添加一个image view顶部与容器顶部间距的约束，我们设置为0：
上面这两个约束使image view处于容器居中的位置，并且它的顶部与容器顶部有一个固定的间距。现在我们需要添加image view和text container view之间的约束。同学们先选中image view，然后按住Ctrl键和鼠标左键，从image view往text container view移动鼠标：
松开鼠标左键后会弹出一个约束菜单，我们选择Vertical Spacing：
这个约束决定了image view底部和text container view顶部之间的距离。
现在选中image view然后点击右侧工具栏中的Size Inspector页签，同学们会发现这里在Xcode6中和之前的Xcode版本有所不同：
你会看到之前添加的三个布局约束，你可以在Size Inspector中很方便的修改这些布局约束。比如点击Bottom Space To: TextContainer约束后的&Edit按钮，会弹出约束属性编辑框，我们让Constant的值等于20：
然后点击该弹出框之外的任意地方关闭该弹出框。
你先已经将TextContainer view顶部与image view底部的间距调整到了20，我们还需要添加TextContainer view另外三个边的间距约束。
继续选择TextContainer view，点击底部的Pin按钮弹出&Add New Constraints窗口，在Spacing to nearest neighbor面板中设置左、右、底部的约束，将值设置为0，然后点击Add 3 Constraints按钮添加约束。这里要注意的是，在设置约束时要将&Constrain to margins选项的勾去掉，这样可以避免TextContainer
view产生内边距：
这三个约束会让TextContainer view的左、右、底部三个边与容器的左、右、底部的间距始终为0。
现在Main.storyboard中应该是这番景象：
此时同学们应该会注意到在view上有几个橘黄色的约束线，这意味着还有一些约束上的问题需要我们注意。不过在运行时storyboard会自动更新view的大小来满足它与容器的约束条件。我们也可以点击底部&Resolve
Auto Layout Issues&按钮，在弹出框中选择&All Views in View Controller/Update Frames&来修复提示的约束问题，但是如果我们这样做，那么image view的尺寸就会压缩成零，也就是会看不到image view。
这是因为我们的image view还有没有任何内容，但是它有一个缺省的高和宽，并且值为0。进行自动布局的时候，如果被约束的view没有实际的高和宽，那么会依照缺省的高和宽来满足约束条件。
我们接着学习，在项目结构中打开&Images.xcassets&，然后点击左下角的&+号，在弹出菜单中选择&New Image Set：
双击左上角的&Image&标题将其改为&cloud&：
我们刚才新建的这个image set其实就是若干图片文件的一个集合，其中的每一个图片都会对应一个特定的应用场景，也就是针对与不同分辨率的Apple移动设备。比如说，一个图片集合可能会包含针对非视网膜、视网膜、视网膜高清三种分辨率的图片。自从Xcode中的资源库与UIKit完美结合后，在代码中引入图片时我们只需要写图片的名称，程序在运行时会根据当前运行的设备自动选择对应分辨率的图片。
注意：如果你以前使用过通过资源库管理图片，那么你可能会发现在Xcode6中会有所不同。那就是3x图片是怎么回事？
这个新的分片率是专为iPhone 6 Plus提供的。这意味着每一个点是由3个像素点组成，也就是说3x的图片比1x图片的像素多9倍。
目前你的图片集合中还是空的，同学们可以在这里下载需要的图片，然后将图片拖入刚才创建的名为cloud的图片集合中，将&cloud_small.png图片拖到&1x图片区域：
由于我们的图片背景颜色是透明的，所以在图片集合中看到的都是白色的图片。你可以选中某一个图片，然后按下空格键来预览图片。比如选中&1x&图片，按下空格：
现在将&cloud_small@2x.png&图片拖至&2x&图片区域，将&cloud_small@3x.png&图片拖至&3x&图片区域。和之前情况一样，我们看到的只是白色的图片，但我们可以通过空格键来预览图片集合中的图片。
现在你就可以在image view中设置图片了。我们回到&Main.storyboard&中，选中image view，在右侧工具栏中选择&Attribute Inspector&页签，将&Image View&面板中的&Image&属性设置为cloud，然后将&View&面板中的&Mode&属性设置为&Aspect
现在你的Main.storyboard中应该是这番景象：
我们看到storyboard中一直有橘黄色的约束提示，是时候让我们来修复它们了。首先选中view
controller的view：
然后点击底部的&Resolve Auto Layout Issues&按钮，在弹出菜单的&All Views in View Controller&面板中选择&Update Frames&：
这时，storyboard会自动根据约束条件重新计算view的大小以满足约束：
预览助手编辑器（Preview Assistant Editor）
一般情况下，在这个时候我们应该会在iPad、iPhone4s、iPhone5s、iPhone6、iPhone6 Plus这几个不同尺寸的设备上编译运行程序，以便测试通用的storyboard是否能在不同尺寸的设备上正确的自适应。但这确实是个体力活，一遍一遍的更改设备、编译、运行，多么苦逼。但上天总是会眷顾我们这些苦逼的程序员，Xcode6提供了Preview
Assistant Editor，能在一个界面上显示出不同尺寸设备的程序运行情况，是否有问题一目了然。
我们打开&Main.storyboard&，然后选择&View\Assistant Editor\Show Assistant Editor&，这时编辑区会分隔为两部分。再点击顶部导航栏中的&Automatic&，在弹出菜单中选择&Preview&，最后选择&Main.storyboard (Preview)&：
现在在&Assistant Editor&区域会显示一个4寸的界面：
我们还可以点击预览界面底部，名字（比如图中的iPhone 4-inch）旁边的地方让屏幕翻转为横屏：
这无疑是针对检查不同尺寸设备的自适应情况的一项重大改进，但还远远不止于此！点击预览界面左下角的&+&按钮，会弹出当前storyboard文件支持的各种尺寸的设备，可供我们预览：
分别选择iPhone 5.5-inch和iPad，此时我们在预览界面就可以同时显示三种尺寸的屏幕：
此时同学们是否注意到4寸的横屏显示有点别扭呢？没错，它的那朵元太大了，我们可以通过对image view添加其他的约束条件来改善这个问题。
回到&Main.storyboard&，选择image view，然后按住&Ctrl建和鼠标左键，拖动鼠标到View Controller的View上，松开鼠标后会弹出一个菜单，我们选择&Equal Heights&：
这时会出现一些红色的约束提示，这是因为我们刚才加的这个约束条件与之前加过的约束条件有冲突。因为之前我们添加过image view和TextContainer view之间的垂直间距（Vertical Margins）约束，所以image view的高度不可能等于它容器（View Controller的View）的高度。
让我们来修复该问题，首先在storyboard的结构目录中选择我们刚才添加的&Equal
Heights约束，然后选择右侧工具栏中的&Attribute Inspect&页签，如果&First Item&属性不是cloud.Height&，那么在下拉菜单中选择&Reverse First and Second Item&这一项让&First Item&的值成为&cloud.Height&：
接下来将&Relation&属性的值设置为&Less Than or Equal&，将&Multiplier&的值设置为&0.4&：
这一系列设置的作用是让cloud这张图片的高度要么等于它自身的高度，要么等于屏幕高度的40%，最后呈现的效果选择这两者中较小的一个高度。
现在你应该注意到了在预览面板中，4寸的横屏显示即时的对你刚才的约束改动做出了响应：
你看看其他尺寸的预览自动更新了么？答案那是必须的，所以说&Preview Assistant Editor&确实是一项重大改进，是程序员和设计人员的福音！
由于本文的示例是一个天气应用，所以光有天气图标不行，我们还得加上城市和温度才行。
给TextContainer中添加内容
打开&Main.storyboard&，从组件库（Object Library）中拖拽两个&Label&组件到TextContainer中，位置可以随意摆放：
先选择靠上的Label，然后点击底部的&Align&按钮，添加一个&Horizontal Center in Container约束，再点击&Pin&按钮，添加一个&Top Spacing to nearest neighbor&约束，设置其值为10：
然后选择右侧工具栏中的&Attribute Inspector&页签，将该Label的&Text&属性设置为&Cupertino，Color&属性设置为&White&，Font&属性设置为&Helvetica Neue, Thin&，&Size&属性设置为&150。
这时同学们可能会发现基本看不到刚才设置的文字的全貌，这是因为Label大小的原因。别着急，我们很快就会解决这个问题。
现在选择另一个Label，按照上述的方法给它也添加一个&Horizontal Center in Container&约束以及一个&Bottom Spacing to nearest neighbor&约束，将其值设置为10。打开右侧工具栏中的&Size Inspector&看看：
然后选择&Attribute Inspector&将该Label的&Text&属性设置为&28C&，&Color&属性设置为&White， 将&Font&属性设置为&Helvetica Neue, Thin， 将&Size&属性设置为&250。
现在是时候解决Label大小的问题了。选中view controller的view，点击底部的&Resolve Auto Layout Issues&按钮，在弹出菜单中选择&All Views\Update Frames&，现在看看storyboard中发生了什么：
我们看到了刚才设置的城市和温度，但是他们有一点点重叠，这可不是我们想要的结果。在我们修改这个问题之前，先看看预览编辑区的显示情况。我们发现在iPad下显示貌似还挺完美：
但是在iPhone下不出所料的无法直视，字体太大了：
接下来让我们解决这个重叠和字体大小的问题。
Size Classes
通用的storyboard文件固然很好，但是你想真正把它玩转还是得花功夫去研究它，这是一件很有挑战性的工作，当然我们也要懂得运用一些现有的工具来帮助我们。Xcode6就为我们提供了一些工具和技巧，帮助我们更好的实现自适应布局。
自适应布局有一个很重要的概念就是&Size Classes。它并不代表真正的尺寸，而是我们从感官上感觉尺寸的种类，通过这种种类的组合，表示出不同屏幕尺寸设备的横屏及竖屏。
Xcode6为我们提供了两个种类：普通（Regular）和紧凑（Compact）。虽然它们涉及到视图的物理尺寸，但一般它们只代表视图的语义尺寸，即不是真正的尺寸，而是我们从感官上分出的尺寸种类。
下面这个表格向同学们展示了size classes和各个尺寸设备竖屏、横屏之间的关系：
上表中的这些size classes组合都是我们在开发应用中经常碰到的。然而你也可以在视图的任何一个层级中覆盖这些size classes。当以后我们开发Apple Watch应用时显得尤其有用。
Size Classes与开发者
何为设计应用的UI？虽然现在你们的应用已经知道要使用Size Classes，并且你们在storyboard文件中设计应用界面时已经抛开了具体尺寸大小的束缚。但是你们难道没有发现在所有尺寸的设备中，不管是竖屏还是横屏，应用的界面布局都是一致的吗？只是自适应了尺寸大小而已。这还远远不是设计。
当你们决心要设计自适应的界面并已经开始设计的时候，有一点很关键。那就是要知道界面在不同的Size Classes要有继承的关系。你们应该首先设计一个基础的界面，然后根据不同尺寸的横竖屏在基础的界面上进行自定义。千万不要把不同的Size Classes当做独立的屏幕尺寸去设计UI。应该在你们的脑海中建立起界面的一个继承关系的思想，也就是大多数的设备使用基础界面，然后特别的尺寸及横竖屏再根据情况基于基础界面修改。
在本文中，一直没有像大家介绍过如何设置特殊设备的布局，那是应为自适应布局的核心概念Size Classes本身就是由各种特殊设备的特点抽象而来的。也就是说一个Size Classes就意味着一种特殊设备的布局特点，其实普通情况也是特殊情况中的一种。所以说我们可以组合不同的Size Classes来满足各种特殊的布局情况，比如一个支持自适应的视图，它可以在应用的父视图控制器中自适应，也可以在某一个功能的视图控制器容器中自适应。但是两者自适应后的布局却不相同。
这种改进对Apple本身也是有益的，因为他们不断的改变移动设备的尺寸，但从来没有强迫开发者和设计者重新开发和设计他们的应用以适应新尺寸的设备。这就不会让开发者和设计者对Apple不断改变设备尺寸这件事有抗拒心理。
接下来，我们将自定义Size Classes以适应iPhone横屏的时候，因为现在的布局在横屏时用户体验很糟糕。
使用Size Classes
回到&Main.storyboard，点击底部的&w Any h Any，你就可以看到Size Classes的选择器了：
在这个由9个方格组成的网格中，你就可以选择你想在storyboard中显示的Size
Class。一共有9种组合方式：3种垂直的也就是竖屏的（任意尺寸（Any），普通（regular），紧凑（compact））选择和3种水平的也就是横屏（任意尺寸（Any），普通（regular），紧凑（compact））的选择。
注意：这里有一点需要大家注意。在Size Classes中，有两个重要的概念叫做水平（Horizontal）和垂直（Vertical）。但是在IB中叫做&宽（Width）和高（Height）。但他们是等价的，所以大家记住这个概念有两种叫法就可以了。
目前我们的布局在紧凑高度（Compact Height）时显示的很糟糕，也就是iPhone横屏时。我们来解决这个问题，在Size Classes选择器中选择&Any Width | Compact Height&的组合：
这时你会发现在storyboard中会立即出现2个变化：
storyboard中的view
controller变成了我们刚才设置的size class。storyboard底部会出现蓝色的长条区域，并显示出当前我们正在使用的size
为了在该size class下改变布局，我们要临时改变一些之前设置好的约束。在自动布局中这种操作有个术语叫做&装配（installing）&和&卸载（uninstalling）&约束。当一个约束在当前的size class中是适用的，我们就将该约束装配在当前的size class中，如果不适用，我们就卸载它。
选择image view，在右侧工具栏中选择&Size Inspector。你可以看到在image view上添加的所有约束：
单击鼠标左键选择&Align Center X to: Superview&约束，然后按下键盘上的&Delete&键来卸载该约束。这时我们可以看到在storyboard中这个约束就立即消失了，并且在storyboard的结构目中和
Size Inspector中该约束都变成了灰色：
注意：你可以在Size Inspector中点击&All&来查看当前size class卸载掉的约束。
鼠标双击刚才卸载的那条约束，我们可以看到在约束编辑界面的底部出现了额外的2个选项：
这两个选项的意思就是这条约束在基础布局中是可用的，但在当前的&Any Width | Compact Height&布局中是不可用的。
按照上面的步骤卸载掉image view上的另外3个约束：
现在你就可以添加适合当前size class的约束了。我们添加一个&Align/Vertical Center in Container&约束，再添加一个&Pin/Left Spacing to nearest neighbor&约束，其值设置为10：
选择image view，按住&Ctrl&键从image view上拖拽至view controller的view上，在弹出的菜单中选择&Equal Widths&约束。
打开右侧工具栏中的&Size Inspector&页签，双击&Equal Width to: Superview&打开该约束的属性编辑界面。如果&First Item&属性的值不是&cloud.Width&，那么点击输入框，在下拉菜单中选择&Reverse First and Second Item。然后将&Multiplier&属性的值设置为&0.45。
现在image view在所有的size class中显示应该都没有什么问题了。但是text container view还有点问题。你需要给它添加一个约束，让它显示在该size class屏幕的右侧。
TextContainer&view现在有两种约束在身。一种是内部约束，它约束了两个Label的位置，这些约束在各size
class中表现的还不错。另一种是外部的约束，它们限制了text container view的左、右、底部与它容器的左、右、底部的间距。这些约束在当前的size class中表现的就不尽如人意了。如果想使text container view在当前size class中位于容器的右下角位置，你得卸载掉左侧的约束。
选中&Left Spacing to nearest neighbor&约束：
按&Cmd-Delete&卸载该约束，和之前一样，被卸载的约束显示为灰色。
现在你需要再添加两个约束将TextContainer限制在正确的位置上。一个是让text container view的宽度为它容器（view controller的view）宽度的一半。另一个是将text container view固定在顶部。
按理来说，你现在需要选中text container view然后按住Ctrl键和鼠标左键拖动鼠标到view controller view上，然后选择约束。但是目前的情况由于image view和text container view占满了整个view controller，所以你很难选中view controller的view。同学们可以通过storyboard的结构树上进行该操作，会容易很多。
在结构树中选中TextContainer，按住&Ctrl&键和鼠标左键，拖动鼠标到结构树的View上：
弹出菜单中显示了可用的约束，按住&Shift&键点击&Top Space to Top Layout Guide&和&Equal Widths&约束：
然后选中TextContainer，在&Size Inspector&中设置刚刚添加的两个约束：
将&Top Space to: Top Layout Guide&约束的值设置为0。将&Equal Width&约束的&Multiplier&的值设置为0.5。这里要注意&First Item&和&Second Item&这两个属性的值。前者应为TextContainer view，后者为view controller view。如果不一致，那么点击任意一个输入框，选择&Reverse
First and Second Item。
现在点击storyboard界面底部的&Resolve
Auto Layout Issues&按钮，然后选择&All Views\Update frames&。看看发生了什么变化呢：
到目前为止，我们的布局已经越来越接近完美了，唯一一点不足的就是字体大小的自适应，我们会在下一节解决它！
文字属性的自适应
目前TextContainer中的文字尺寸在iPad设备上，也就是使用普通（Regular）size class显示还比较正常。但是当使用紧凑（Compact）size class时文字尺寸就显得太大了，以至于都超出了视图。不过同学们不要怕，我们照样可以在不同的Size Classes中设置不同的文字尺寸来做到自适应。
注意：与重写布局不同，在不同的size class中改变文字的属性始终会影响基础布局中的文字。它不能像布局一样，在不同的size class中设置不同的属性值。我们通过下面的方法来解决这一问题。
回到storyboard文件中，将目前的size
class改为最基础的&Any Width | Any Height&。
选择显示Cupertino的Label，打开&Attribute Inspector&。点击&Font&属性前面的&+&号：
弹出的菜单内容是让我们选择一种size class的组合来重写该组合下的文字属性。我们选择Compact Width & Any Height：
这时就会出现另外一个文字属性下拉框，针对于我们刚才选择的&Compact Width | Any Height&size class，我们将字体大小改为90：
再选择显示温度的Label，重复刚才的操作，选择size class组合时选择&Compact Width & Any Height。设置字体大小为150。
在预览区域会自动更新我们刚才的设置：
现在看起来稍微好一些了，但是显示&Cupertino&的Label被截掉了两头。同学们可能会继续调整字体大小使Cupertino显示完全，虽然目前看起来完美了，但是当换一个城市名称后或许又会出现刚才的问题。比如Washington, D.C这么长的名称，又比如Kleinfeltersville, PA这个更长的名称。那么我们应该如何设计呢？
我们的救世主&自动布局（Auto Layout）&再次出马。你只需要给显示城市名称和温度的这两个Label设置一个相对于TextContainer view的宽度约束即可。选中显示Cupertino的Label，按住&Ctrl&键和鼠标左键，拖动鼠标到TextContainer view，在弹出菜单中选择&Equal Widths&约束。对显示温度的Label做相同的操作。之后在预览界面看看发生了什么：
呃……貌似还是有问题，城市名显示不完全。Label中的文字长度超出了允许显示的空间。不过我们可以通过一个选项，让Label自动判断当前的空间可以显示多大的字体。
选择显示Cupertino的Label，然后打开&Attribute Inspector。将&AutoShrink&属性设置为Minimum font scale，将其值设置为0.5。将&Alignment&属性设置为&Centered：
对显示温度的Label做相同的操作。
再来看看预览区域，是不是在不同尺寸的iPhone横屏、竖屏下显示都比较完美了：
是时候在不同的设备上编译运行我们的程序了。用设备来检验才是最保险的。iPhone下的横屏、竖屏是多么的完美：
via：/articles/adaptive-layout-1/
/83276/beginning-adaptive-layout-tutorial
本文已收录于以下专栏：
相关文章推荐
原文链接：/blog/2148987
通用的Storyboard
通用的stroyboard文件是通向自适应布局光明大道的第一步。在一个st...
基于StoryBoard自动布局–Cell自适应高度AutoLayout
StoryBoard
Automatic Adaptation HeightAutoLayout是什么？AutoLa...
原文地址：点击打开链接
通用的Storyboard
通用的stroyboard文件是通向自适应布局光明大道的第一步。在一个storyboard文件中适配iPad和iPhone的布局在iOS...
先看需求：两个Label，要求蓝色的label紧跟在红色的label文字后面
ok首选正常添加约束
红色的Label添加宽度，高度，左边，上边约束
蓝色的Label添加宽度，高度，左边，和红...
建好工程，来到Storyboard，开搞。
首先设置竖屏
在Storyboard拖入一个滚动视图UIScrollView
由于这边只是演示，所以直接给ScrollView加
上，左，下，右的约...
先约束好图片的大小（防止被拉伸）、上左的距离（固定位置）、下边的距离（当label的字数很少时，cell的高度以图片的高度加上边的距离加上下边的最小距离）label(上面)
约束好上下左右...
好久没有写博客了，以后多写些博客，对自己是一种提升，对大家也是一种帮助
       最近特别痴迷storyboard和xib的可视化编程，在写项目的时候遇到个问题就是如何使UILabel自适应高度，...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}