使用代码自动布局，需求还是有的，虽然很习惯了 IB 来做。参看 Programming iOS 9。
一共三个方法：
- Anchor notation
- Creating constraints in code
- Visual format notation
1. Anchor notation
感觉 anchor 一个折中的方案，语法比 constraints 简洁，符合 IB 设计和添加约束的思路。美中不足是仅支持 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.
具体的使用语法都很简单，贴一个书中的 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 以下的，但是超级啰嗦。
- 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
这个语法支持 iOS 6，而且语法最为简洁直观。也是
Programming iOS 9 书中推荐的方案。实际项目尝试了上面两种两种方法后，想要更短的代码量的话，还是 Visual format notation 最为合适。这里也推荐大家，还很容易理解其语法，而且 console debugging 也会优先显示该语法。
<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)]>"
当然这些都是不用 IB 和 View Debugging / Reveal 情况下的选择。
还有个优点就是类 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.
下面是一个 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 })
}
}
总结
经过几次项目的实践，发现还是 Visual Format 最好用，简洁直观。
参考
- UILayoutGuide – Auto Layout’s Invisible Helpers:
https://www.captechconsulting.com/blogs/uilayoutguide--auto-layouts-invisible-helpers - Programmatically Creating Constraints:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/uid/TP40010853-CH16-SW1
