Swift - 使用Auto Layout和Size Classes实现页面自适应弹性布局

    在过去只有 iphone4 的时候，可以在代码里将一个可视单元的位置写死，这样是没问题的，但随着 iPhone5，6 的发布，屏幕尺寸有了越来越多种可能。这就要求 App 的 UI 控件具有在不同屏幕尺寸的设备上具有一定动态的可调性，实现较好的UI展示效果。

一、Auto Layout（自动布局）

1，在StoryBoard中使用自动布局

2，使用纯代码来实现自动布局

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建组件
        let textField = UITextField(frame: .zero) //这里不再需要刻意制定x,y坐标
        textField.borderStyle = UITextBorderStyle.roundedRect
        self.view.addSubview(textField)
        
        let button = UIButton(type: .system)
        button.setTitle("按钮", for: .normal)
        button.backgroundColor = UIColor(red: 55/255, green: 186/255, blue: 89/255,
                                         alpha: 0.5)
        self.view.addSubview(button)
        
        let textView = UITextView(frame: .zero)
        textView.text="hangge.com"
        textView.backgroundColor = UIColor(red: 55/255, green: 186/255, blue: 89/255,
                                           alpha: 0.5)
        self.view.addSubview(textView)
        
        //使用Auto Layout的方式来布局
        textField.translatesAutoresizingMaskIntoConstraints = false
        button.translatesAutoresizingMaskIntoConstraints = false
        textView.translatesAutoresizingMaskIntoConstraints = false
        
        //创建一个控件数组
        let views:[String:AnyObject] = ["textField": textField,
                                        "button": button, "textView": textView]
        
        //创建一个水平居中约束（按钮）
        let constraint:NSLayoutConstraint = NSLayoutConstraint(
            item: button, attribute: .centerX, relatedBy: .equal,
            toItem: self.view, attribute: .centerX, multiplier: 1.0, constant: 0.0)
        self.view.addConstraint(constraint)
        //创建水平方向约束
        self.view.addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "H:|-5-[textField]-5-|", options:.alignAllCenterX,
            metrics: nil, views: views))
        self.view.addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "H:|-5-[textView]-5-|", options: .alignAllCenterX,
            metrics: nil, views: views))
        //创建垂直方向约束
        self.view.addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "V:|-20-[textField]-20-[textView]-20-[button]-20-|",
            options:NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: views))
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

二、Size Classes（适配各类型的屏幕）

1，说明

2，Size Classes 主要的几种设备类型

3，使用样例