【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

上一话我们详细介绍了多MVC模式以及Segue过渡的时候,这一话用一个新的Demo来诠释。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

我们新建一个Psychologist的工程。把ViewController的名字改为PsychologistViewController。那么这个控制器是做什么用的呢?系统问你一个问题,然后你做出回答,系统会根据你的回答判断你是否开心,这样就能用上我们之前的Hppiness的项目。

在视图中加入一个label,然后调整字体为36,文字居中,label两边上边都与蓝线对齐。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

每一话都会渗透一些自动布局的内容。我们让这个label重置到它被推荐的位置。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

我们会看到:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

中间的蓝线代表label与下边界产生了关联,但是我们不希望这样做,因为你并不确认运行的设备的尺寸。通常我们不去关联下边界,而让下边界的距离做一个弹性的变量。

我们打开右侧的尺寸检测器,可以看到所有的约束:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

我可以选中我不喜欢的约束然后delete它。删掉之后会出现黄线,因为我们没有足够的约束了,按照我们之前讲的,在试图大纲中update frame,你会看到黄线消失了。

有了问题,现在我们把答案拖出来,这是一个按钮。我把这个按钮拖到中间,然后点击重置位置到推荐位置(和上面操作一样),然后我们删除不需要的约束,这里我只保留竖直方向的居中,我们不需要上下的间距和固定宽高,因为我希望这个按钮的大小根据它里面的内容来自动调整。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

这时我需要使用其他约束了,点击右下角按钮栏的第一个按钮

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

因为已经有了竖直方向的中心,所以只要添加一个水平方向的居中就行了。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

你会看到现在我们的按钮在水平和竖直方向上都居中了。再次update frame,按钮的位置就调整好了。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

然后复制按钮,加入不同的内容。

新按钮重置到推荐的位置,你会看到它有两个约束,一个水平居中,一个底部距离:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

我们用同样的办法创建第三个按钮:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

我们运行一下我们的程序:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

你可以看到顶部的文字被截掉了,旋转一下:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

看起来横屏模式下效果很好,但是竖屏就不行了,为什么会这样呢?因为我们设置了字体为36号,你可以在storyboard属性监测器的Autoshrink中看到,目前的设置为Fixed

 Font Size(固定字体大小):

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

但是这个字体不需要固定大小,我需要设置它的最小值,不希望它比12号要小,设置如下:

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

现在我们再来运行,你会看到字体会自动缩放,当屏幕变宽的时候字体会变大。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

那么有没有办法可以让文字自动换行呢?一种方法是用textView替换label。另一种方法是设置label中的Line Breaks,当前的做法是删减尾部,最直接的直接设定lines的值。

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记22 多MVC模式Demo中的AutoLayout自动布局

上一篇:Xcode里一个快速注释的脚本


下一篇:免费 PSD 素材:25个全新的界面设计资源