【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记26 AutoLayout自动布局1

上一话中我们讲解了viewController的生命周期。这一话来讲解一下自动布局，之前的Demo中都有涉及自动布局的知识，今天来系统讲解。



之前你接触过面板上的蓝线来对齐控件，重置位置来适应系统推荐，在大纲视图中消去警告，利用尺寸检查器可以看到详细的约束等等

自动布局需要大量的经验，想要掌握好它，你必须去多练多想。

自动布局也可以用代码实现。

那么当你旋转的时候该怎么办呢？



旋转之后几何位置可能会有较大变动，这时候自动布局是不够的。拿我们之前的计算器Demo来举例，计算器有20个键，当我们横屏的时候希望有五列四行，当竖屏的时候希望有五行四列，使用自动布局没法实现这个变动。这种情况并不仅限旋转，我们使用分屏控制器的时候同样会遇到这种问题，解决这个问题的方式是使用Size Classes（尺寸等级），并且对所有当前的空间来说，当前的尺寸等级可以是compact（紧凑的），也可以是regular（普通的）。

我们之前提到过ip6 plus是一个很有意思的设备。



在竖屏模式下，它的宽是紧凑的，它的高是普通的。而当横屏的时候高是紧凑的，宽是普通的。

其他除了ip6 lus的iphone竖屏时宽紧凑高普通，但是在横屏的时候它们的宽和高都是紧凑的。

ipad在全方向上作为普通处理。

例如我们的计算器在不同的尺寸等级组合下理想的显示效果：



我们还有其他的尺寸等级Any



当垂直方向是紧凑的时候，我们不关心横向的尺寸等级，这种情况我们把按键变成四行的，其他情况通通是五行，这样简化了我们的工作。接下来我们将做一个Demo。

新建一个工程命名为AutoLayout。在storyboard中新建两个文本框和两个标签：

文本框右对齐，并且设定两个文本框间距固定：



然后设置两个标签左对齐，长度相同，并且与对应的文本框baseline：



然后添加标签到文本框的水平空间约束。之后我们可以进入尺寸检查器中设置具体的sizeclass。

尺寸检查器中的数字被称作magic number（魔法数）：



这个数字可以编辑，比如这里展示的标签到文本框的距离，这个392是系统根据蓝线生成的，这个距离不应该是固定的所以我们要修改这个数据：



修改之后的效果：



然后把上面的文本框距顶部距离调整为standard，把baseline的距离调整为0。下面文本框做同样的处理，现在的效果：



下面来展示一些xcode的小技巧，点开联合视图，在右侧的菜单中选择Preview：



然后你将看到这样一个页面：



你可以通过点击+，在不运行工程的情况下查看不同尺寸下的页面展示，非常的好用。右边的English也是可选项，你可以选择标签为字体重复一次，大家可以试一下。

然后我们在下面添加两个按钮，按钮并不靠边，所以它们的左侧没有蓝线可以对齐，怎么保证这两个按钮在不同尺寸的屏幕中能整齐地排列呢，答案是在左右两侧各添加一个空的view，为了方便观察我们把view的颜色设置为灰色。

我们让两个view贴住左右蓝线，然后让两个按钮分别对view做如下约束：



两个view之间设置等宽



两个按钮间作如下约束：



另外需要有一个按钮设置到上方文本框的垂直距离。



然后左右view分别设置到两边的距离





全部设置好之后update一下你可以看到：



但是这并不是我想要的确切位置，我们还要消除魔法数，把左右两侧view和按钮之间的距离设为标准值、顶部和底部距离设为0，通常我们都会选标准值，当标准值不可选时我们一般选0.



现在来看一下两个按钮之间的约束：



这个魔法数代表两个按钮间的间距，我们可以在storyboard中之间点击两个按钮间的蓝线就能修改这个魔法数，这里修改间距为50，因为我们做的并不是一个标准化的东西。

每当我们要做一个非标准化的东西，我们都要问问自己是不是的确需要这么做，显然在这里这是必须的。在预览里看一下：



看起来不错，两个辅助视图的宽度是相同的。现在我们把辅助视图的颜色去掉。现在让我们继续，当我点击Change Security按钮的时候我希望能修改标签的显示，并且当我输入密码的时候变成星号。

我们需要写一些代码：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var loginField: UITextField!
   
    @IBOutlet weak var passwordField: UITextField!

    @IBOutlet weak var passwordLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    @IBAction func toggleSecurity(sender: UIButton) {
        secure = !secure
    }
    var secure = false { didSet{ updateUI()}}
    
    private func updateUI(){
    passwordField.secureTextEntry = secure
    passwordLabel.text = secure ? "Secure Password":"Password"
    }
}

我们设置了一个标识secure，它有一个属性观察器，我们已经很熟练了，当secure的值变化时密码文本框输入的文字会变成星号，同时密码标签也会修改，现在让我们运行一下：



当我点击第一个按钮：