SizeClass 和AutoLayout教程2

原文链接

第二篇我带大家做个自动布局的DEMO，这次会讲一些稍微复杂点的布局。整体思路照着《iOS8 by tutorials》的第一章来，大部分直接翻译，会加入我自己的解释和理解，有兴趣的可以上Raywenderlich网站购买正版图书。
打开Xcode，新建一个single ViewController项目，打开storyboard，拖一个ImageView到我们的viewcontroller里，然后把坐标设为（150，20，300，265）。接着拖一个UIView到controller，然后设置坐标为(150,315,300,265).
接下来，在Identity Inspector里设置UIView的Document里的Label属性为“TextContainer”。如图。

Smaller icon

这个Document里的Label属性可能以前没接触过，我看这个英文教程的时候我也没碰到过，后来发现其实这个属性就是为了这个。

Smaller icon

看到没，只是这里的标识变成了TextContainer。

现在把界面的背景色调一下，因为全是白色有点不好辨认。首先，把controller的view背景色调成RGB（74，171，247）。然后把我们的TextContainer view 的背景色调为（55，128，186）。
好了，现在你的界面应该看起来是这样的。

Smaller icon

接下来，我们要添加约束了。首先，给选择ImageView然后添加这两个约束

Smaller icon

第一个约束英文名叫Horizontal Center in Container,翻译过来就是在父容器中水平居中，其实就是把自己的center.x 设置为父容器的width/2.自己体会。
第二个约束看过上篇教程的应该清楚，就是自己的顶部和距离自己最近的那个控件之间的间距，在这里自然是和self.view的顶部，这两个约束其实就确定了imageview的x,y轴。大家想想，对不对呢（不一定对哦）。
那么看过上篇的应该都会留意到，左边的窗口显示了红色小箭头，说明我们添加的约束有冲突或者不够。现在先不着急，继续往下做。

先选中imageView，然后用鼠标右键选中imageView，按住不放，拖向下面的TextContainer(就是我们刚才拖得UIView)，这时候应该会出现一条线，如图。

Smaller icon

松手，然后出现下面这个界面

Smaller icon

我们选中Vertical Spacing。
然后点击ImageView的Size Inspector窗口，应该是下面这个样子。

Smaller icon

现在，你为ImageView添加了三个约束，分别是，1.居中self.view，2.距离self.view的上间距，3.距离TextContainer的下间距。然后呢，我们修改下距离TextContainer下间距这个约束。找到这个约束，然后点击Edit，修改数值为20.如下图

Smaller icon

好的，现在给ImageView添加完约束了，还是有红色小箭头，表示我们的约束不够。不着急，接着往下走。
点击TextContainer这个View，然后给他增加如下约束。

Smaller icon

注意，数值都是0，意思就是给这个view，添加距离self.view的左间距，下间距和右间距都为0.OK。
现在我们的约束添加完了。红色小箭头还是没消失！what the hell？现在我们回忆一下上一篇教程。上一篇教程我说过有些控件只需要设置他的坐标（x,y）,而他的宽和高系统会根据空间的内容由系统自己计算。其实ImageView这个控件也是这样的。现在先点开红色小箭头，看看我们到底缺什么约束。如下图。

Smaller icon

系统告诉我们，ImageView这个控件缺少X或者Width，why？我们添加了居中约束为什么还缺X？很简单啊，因为你的x怎么计算呢？应该用image.center.x-imageview.width/2,没错吧。你添加的约束没一条规定image的Width，肯定会报错啊。那我们给imageview设置image试试。
然后把我博客下面的附件打开，找到DEMO里面的图片资源，cloud_small,然后新建一个ImageSet，如图。

Smaller icon

然后我们设置ImageView的image属性为cloud。再看看，左边窗口，红色小箭头没了！Nice。大家可以回过头好好思考一下为什么。但是可能会有黄色小箭头，只要update frames就可以了。
好，我们接下来要介绍个好东西。不知道大家以前调界面的时候有没有用过一个神器叫做Reveal，我当时还掏钱买的正版。这个东西确实很屌。大家有兴趣的可以百度一下。现在iOS8苹果也加入了这个预览界面的功能。我们看一下怎么调用这个东西。如图。

Smaller icon

然后，这样。

Smaller icon

然后你就能看到你的界面运行后的效果了。如图。

Smaller icon

点击旋转这个按钮，他还能旋转。

Smaller icon

你还能添加别的设备，例如iPad。

Smaller icon

第二篇先讲这么多，下一篇我们会接着这个DEMO往下讲。
DEMO地址http://pan.baidu.com/s/1hqEb1tU