swift下autolayout的实现笔记

swift相关的教程还是太少，很多东西都靠自己琢磨。今天研究了一下别人oc实现的autolayout，写篇笔记。

首先是正常的创建元素,为了熟悉实现的方式，我在学习过程中是完全放弃storyboard的。

1. var v1 = UILabel()
2. v1.backgroundColor = UIColor.redColor()
3. v1.text = "v1"
4. v1.setTranslatesAutoresizingMaskIntoConstraints(false)
5. //设置在约束布局系统中是否把自动布局转换为约束布局
6. self.view.addSubview(v1)

然后添加约束

1. self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
2. "H:|-1-[v1]-1-|",
3. options: .DirectionLeadingToTrailing,
4. metrics: nil,
5. views: ["v1":v1]))

constraintsWithVisualFormat:参数为NSString型，指定Contsraint的属性，是垂直方向的限定还是水平方向的限定，参数定义一般如下：

H:Expression 表示水平或者垂直（V）方向上相对于SuperView的位置

options：字典类型的值；这里的值一般在系统定义的一个enum里面选取

metrics：nil；一般为nil ，参数类型为NSDictionary，从外部传入

views：就是上面所加入到NSDictionary中的绑定的元素

表达式规则

|: 表示父视图 -: 表示距离 >= :表示视图间距、宽度和高度必须大于或等于某个值 <= :表示视图间距、宽度和高度必须小宇或等于某个值 == :表示视图间距、宽度或者高度必须等于某个值

比如我们要把上面创建的label设置为距离父视图左右都是10，那么表达式就是

1. "H:|-10-[v1]-10-|"

我们要让他高40，距离父视图顶部为10

1. "V:|-10-[v1(==40)]"

如果我们再创建V2,V3两个元素，让他们等宽排列在V1的下面

1. "H:|-1-[v2(v3)]-[v3]-1-|"

完整的代码就是

1. import UIKit
3. class ViewController: UIViewController {
4. override func viewDidLoad() {
5. super.viewDidLoad()
7. var v1 = UILabel()
8. v1.backgroundColor = UIColor.redColor()
9. v1.setTranslatesAutoresizingMaskIntoConstraints(false)
10. v1.textAlignment = NSTextAlignment.Center
11. v1.text = "v1"
12. self.view.addSubview(v1)
14. var v2 = UILabel()
15. v2.backgroundColor = UIColor.redColor();
16. v2.setTranslatesAutoresizingMaskIntoConstraints(false)
17. v2.textAlignment = NSTextAlignment.Center
18. v2.text = "v2"
19. self.view.addSubview(v2)
21. var v3 = UILabel()
22. v3.backgroundColor = UIColor.redColor();
23. v3.setTranslatesAutoresizingMaskIntoConstraints(false)
24. v3.textAlignment = NSTextAlignment.Center
25. v3.text = "v3"
26. self.view.addSubview(v3)
29. self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
30. "H:|-10-[v1]-10-|",
31. options: .DirectionLeadingToTrailing,
32. metrics: nil,
33. views: ["v1":v1]))
34. self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
35. "H:|-10-[v2(v3)]-[v3]-10-|",
36. options: .DirectionLeadingToTrailing,
37. metrics: nil,
38. views: ["v2":v2,"v3":v3]))
39. self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
40. "V:|-20-[v1(==40)]-10-[v2(==40)]",
41. options: .DirectionLeadingToTrailing,
42. metrics: nil,
43. views: ["v1":v1, "v2":v2,"v3":v3]))
44. self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
45. "V:[v1]-10-[v3(==40)]",
46. options: .DirectionLeadingToTrailing,
47. metrics: nil,
48. views: ["v1":v1, "v3":v3]))
51. }
53. override func didReceiveMemoryWarning() {
54. super.didReceiveMemoryWarning()
55. // Dispose of any resources that can be recreated.
56. }
57. }

效果如下图, 无论在什么宽度的设备下面，他们布局保持不变。

bbb