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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Rindew的iOS技术分享

iOS初来乍到,你如何开始第一个封装类?

1934
来自专栏xx_Cc的学习总结专栏

iOS-控制器View的创建和生命周期

2986
来自专栏WindCoder

基于touchSwipe微信手机端微场景HTML5页面特效(适用于PC端)

491
来自专栏从零开始学 Web 前端

CSS相关知识点

4、如果给了定位,但是没有给left,top等值,默认会腾出行内元素、padding的位置,有的时候我们可以使用这些特性,有的时候我们不熟悉的话可能产生bug。

654
来自专栏吴老师移动开发

【iOS开发】Responder Chain做事件传递

像商品详情这种有各种各样的cell,cell里面又有各种不同的按钮事件等。cell里面可能还有几层UI,如何将这种层级很多很复杂的UI页面的事件传递到Contr...

823
来自专栏一“技”之长

iOS开发中的手势体系——UIGestureRecognizer分析及其子类的使用

        在iOS系统中,手势是进行用户交互的重要方式,通过UIGestureRecognizer类,我们可以轻松的创建出各种手势应用于app中。关于UI...

632
来自专栏mukekeheart的iOS之旅

ios学习——键盘的收起

  在开发过程中,我们经常会用到UITextField、UITextView等文本框,然后这些文本框在点击之后会自动成为第一响应者(FirstResponder...

3206
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

2843
来自专栏TechBox

iOS开发之UICollectionViewController系列(三) :使用UICollectionView自定义瀑布流

1853
来自专栏小壮和前端

手写贪吃蛇

1093

扫码关注云+社区