Autolayout in Code

使用代碼自動(dòng)布局，需求還是有的，雖然很習(xí)慣了 IB 來做。參看 Programming iOS 9。

一共三個(gè)方法：

  • Anchor notation
  • Creating constraints in code
  • Visual format notation

1. Anchor notation

感覺 anchor 一個(gè)折中的方案，語法比 constraints 簡潔，符合 IB 設(shè)計(jì)和添加約束的思路。美中不足是僅支持 iOS 9。

The NSLayoutAnchor class is a factory class for creating NSLayoutConstraint objects using a fluent API. Use these constraints to programatically define your layout using Auto Layout.

具體的使用語法都很簡單，貼一個(gè)書中的 Demo：

        let v1 = UIView(frame:CGRectMake(100, 111, 132, 194))
        v1.backgroundColor = UIColor(red: 1, green: 0.4, blue: 1, alpha: 1)
        let v2 = UIView()
        v2.backgroundColor = UIColor(red: 0.5, green: 1, blue: 0, alpha: 1)

        mainview.addSubview(v1)
        v1.addSubview(v2)

        v2.translatesAutoresizingMaskIntoConstraints = false


        var which : Int {return 3}
        switch which {
        case 1:
            // the old way, and this is the last time I'm going to show this
            v1.addConstraint(
                NSLayoutConstraint(item: v2,
                    attribute: .Leading,
                    relatedBy: .Equal,
                    toItem: v1,
                    attribute: .Leading,
                    multiplier: 1, constant: 0)
            )
            v1.addConstraint(
                NSLayoutConstraint(item: v2,
                    attribute: .Trailing,
                    relatedBy: .Equal,
                    toItem: v1,
                    attribute: .Trailing,
                    multiplier: 1, constant: 0)
            )
            v1.addConstraint(
                NSLayoutConstraint(item: v2,
                    attribute: .Top,
                    relatedBy: .Equal,
                    toItem: v1,
                    attribute: .Top,
                    multiplier: 1, constant: 0)
            )
            v2.addConstraint(
                NSLayoutConstraint(item: v2,
                    attribute: .Height,
                    relatedBy: .Equal,
                    toItem: nil,
                    attribute: .NotAnAttribute,
                    multiplier: 1, constant: 10)
            )


        case 2:
            // new API in iOS 9 for making constraints individually
            // and we should now be activating constraints, not adding them...
            // to a specific view
            // whereever possible, activate all the constraints at once
            NSLayoutConstraint.activateConstraints([
                v2.leadingAnchor.constraintEqualToAnchor(v1.leadingAnchor),
                v2.trailingAnchor.constraintEqualToAnchor(v1.trailingAnchor),
                v2.topAnchor.constraintEqualToAnchor(v1.topAnchor),
                v2.heightAnchor.constraintEqualToConstant(10),
            ])

        case 3:
            
            // NSDictionaryOfVariableBindings(v2,v3) // it's a macro, no macros in Swift
            
            // let d = ["v2":v2,"v3":v3]
            // okay, that's boring...
            // let's write our own Swift NSDictionaryOfVariableBindings substitute (sort of)
            let d = dictionaryOfNames(v1,v2,v3)
            NSLayoutConstraint.activateConstraints([
                NSLayoutConstraint.constraintsWithVisualFormat(
                    "H:|[v2]|", options: [], metrics: nil, views: d),
                NSLayoutConstraint.constraintsWithVisualFormat(
                    "V:|[v2(10)]", options: [], metrics: nil, views: d),
                ].flatten().map{$0})
        default: break
        }
        

        
        func dictionaryOfNames(arr:UIView...) -> [String:UIView] {
    var d = [String:UIView]()
    for (ix,v) in arr.enumerate() {
        d["v\(ix+1)"] = v
    }
    return d
}

2. Creating constraints in code

兼容 iOS 8 以下的，但是超級(jí)啰嗦。

  • iOS 6 可以全部使用最外面的視圖添加約束，下面 Demo 中的：container.addConstraint(s) / removeConstraints
  • iOS 8 直接使用：NSLayoutConstraint.activateConstraints / deactivateConstraints

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let container = UIView(frame: self.view.bounds)
        container.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.252461163294798)
        self.view.addSubview(container)

        let aLine = UIView()
        aLine.frame = CGRect(x: 0, y: 0, width: 5, height: 5)
        aLine.backgroundColor = UIColor(red: 0.6667, green: 0.0742, blue: 0.6667, alpha: 1.0)
        container.addSubview(aLine)

        aLine.translatesAutoresizingMaskIntoConstraints = false

        let i = 3

        switch (i) {
        case 0:
            // MARK:-  superview addConstraint
            container.addConstraint(NSLayoutConstraint(item: aLine, attribute: .Leading, relatedBy: .Equal, toItem: container, attribute: .Leading, multiplier: 1, constant: 0))
            container.addConstraint(NSLayoutConstraint(item: aLine, attribute: .Trailing, relatedBy: .Equal, toItem: container, attribute: .Trailing, multiplier: 1, constant: 0))
            container.addConstraint(NSLayoutConstraint(item: aLine, attribute: .Top, relatedBy: .Equal, toItem: container, attribute: .Top, multiplier: 1, constant: 0))
            aLine.addConstraint(NSLayoutConstraint(item: aLine, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20))
        case 1:
            // MARK:- iOS 6
            container.addConstraints([
                NSLayoutConstraint(item: aLine, attribute: .Leading, relatedBy: .Equal, toItem: container, attribute: .Leading, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: aLine, attribute: .Trailing, relatedBy: .Equal, toItem: container, attribute: .Trailing, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: aLine, attribute: .Top, relatedBy: .Equal, toItem: container, attribute: .Top, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: aLine, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20),
            ])
        case 2:
            // MARK:- active = true
            if #available(iOS 8.0, *) {
                NSLayoutConstraint(item: aLine, attribute: .Leading, relatedBy: .Equal, toItem: container, attribute: .Leading, multiplier: 1, constant: 0).active = true
                NSLayoutConstraint(item: aLine, attribute: .Trailing, relatedBy: .Equal, toItem: container, attribute: .Trailing, multiplier: 1, constant: 0).active = true
                NSLayoutConstraint(item: aLine, attribute: .Top, relatedBy: .Equal, toItem: container, attribute: .Top, multiplier: 1, constant: 0).active = true
                NSLayoutConstraint(item: aLine, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20).active = true
            } else {
                // Fallback on earlier versions
            }

        case 3:
            // MARK:- NSLayoutConstraint.activateConstraints
            if #available(iOS 8.0, *) {
                NSLayoutConstraint.activateConstraints([
                    NSLayoutConstraint(item: aLine, attribute: .Leading, relatedBy: .Equal, toItem: container, attribute: .Leading, multiplier: 1, constant: 0),
                    NSLayoutConstraint(item: aLine, attribute: .Trailing, relatedBy: .Equal, toItem: container, attribute: .Trailing, multiplier: 1, constant: 0),
                    NSLayoutConstraint(item: aLine, attribute: .Top, relatedBy: .Equal, toItem: container, attribute: .Top, multiplier: 1, constant: 0),
                    NSLayoutConstraint(item: aLine, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 20),
                ])
            } else {
                // Fallback on earlier versions
            }
        default:
            break
        }
    }

}

3. Visual format notation

這個(gè)語法支持 iOS 6，而且語法最為簡潔直觀。也是
Programming iOS 9 書中推薦的方案。實(shí)際項(xiàng)目嘗試了上面兩種兩種方法后，想要更短的代碼量的話，還是 Visual format notation 最為合適。這里也推薦大家，還很容易理解其語法，而且 console debugging 也會(huì)優(yōu)先顯示該語法。

<NSLayoutConstraint:0x7f855ad1bb00 H:[UIButton:0x7f855ad1bba0'Button'(46@188)] priority:188>

<NSLayoutConstraint:0x7f855ad1e130 UIButton:0x7f855ad1bba0'Button'.leading == UIView:0x7f855ad1ca20.leadingMargin + 127 priority:999>

Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x15c5ab880 V:[UIView:0x15c63d860(20)]>",
    "<NSLayoutConstraint:0x15c5abb60 V:[UIView:0x15c63d860(10)]>"

當(dāng)然這些都是不用 IB 和 View Debugging / Reveal 情況下的選擇。

還有個(gè)優(yōu)點(diǎn)就是類 ASCII-art，可視化的樣式描述。

The Visual Format Language lets you use ASCII-art like strings to define your constraints. This provides a visually descriptive representation of the constraints.

下面是一個(gè) CustomToolBar 的 Demo：

import UIKit

/**
 Swift NSDictionaryOfVariableBindings substitute

 - parameter arr: UIView array: (view1, view2)

 - returns: return ["v1": UIView, "v2": view2]
 */
func dictionaryOfNames(arr: UIView ...) -> [String: UIView] {
    var d = [String: UIView]()
    for (ix, v) in arr.enumerate() {
        d["v\(ix+1)"] = v
    }
    return d
}

class CustomToolBar: UIView {

    var textField: UITextField!
    var commentCountButton: UIButton!
    var commentImageButton: UIButton!

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = UIColor.whiteColor()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func drawRect(rect: CGRect) {

        let topLine = UIView()
        topLine.backgroundColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0)
        self.addSubview(topLine)

        textField = UITextField()
        textField.placeholder = "Write some in your deep mind."
        self.addSubview(textField)

        commentImageButton = UIButton(type: .Custom)
        commentImageButton.setBackgroundImage(UIImage(named: "comment"), forState: .Normal)
        self.addSubview(commentImageButton)

        commentCountButton = UIButton(type: .Custom)
        commentCountButton.titleLabel?.font = UIFont.systemFontOfSize(14)
        commentCountButton.setTitle("8888888888", forState: .Normal)
        commentCountButton.setTitleColor(UIColor.blackColor(), forState: .Normal)
        self.addSubview(commentCountButton)

        topLine.translatesAutoresizingMaskIntoConstraints = false
        textField.translatesAutoresizingMaskIntoConstraints = false
        commentImageButton.translatesAutoresizingMaskIntoConstraints = false
        commentCountButton.translatesAutoresizingMaskIntoConstraints = false

        // NSLayoutConstraintsHelper.swift
        let d = dictionaryOfNames(topLine, textField, commentImageButton, commentCountButton)

        self.addConstraints([
            NSLayoutConstraint.constraintsWithVisualFormat("H:|[v1]|", options: [], metrics: nil, views: d),
            NSLayoutConstraint.constraintsWithVisualFormat("V:|[v1(0.5)]", options: [], metrics: nil, views: d),

            NSLayoutConstraint.constraintsWithVisualFormat("H:|-15-[v2]-[v3(14)][v4]-|", options: .AlignAllCenterY, metrics: nil, views: d),
            NSLayoutConstraint.constraintsWithVisualFormat("V:|-[v2]-|", options: [], metrics: nil, views: d),
            NSLayoutConstraint.constraintsWithVisualFormat("V:[v3(14)]", options: [], metrics: nil, views: d),
            NSLayoutConstraint.constraintsWithVisualFormat("V:[v4(14)]", options: [], metrics: nil, views: d),
        ].flatten().map { $0 })
    }
}

總結(jié)

經(jīng)過幾次項(xiàng)目的實(shí)踐，發(fā)現(xiàn)還是 Visual Format 最好用，簡潔直觀。

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容