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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

FLAnimatedImage -ios gif图片加载框架介绍

简介 FLAnimatedImage 是 Flipboard 团队开发的在它们 App 中渲染 GIF 图片使用的库。 后来 Flipboard 将 FLAni...

4989
来自专栏韦弦的微信小程序

Swift 视图抖动扩展一

751
来自专栏青玉伏案

iOS开发之微信聊天页面实现

  在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写。在聊天页面中主要...

7407
来自专栏ios 技术积累

iOS中的事件的产生和传递

●发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中,为什么是队列而不是栈?因为队列的特点是FIFO,即先进先出,先产生的事件...

611
来自专栏iOS122-移动混合开发研究院

Pop–实现任意iOS对象的任意属性的动态变化

简介 Pop 是一个可扩展的动画引擎,可用于实现任意iOS对象的任意属性的动态变化,支持一般动画,弹性动画和渐变动画三种类型. 最新示例: 点击下载 注...

1907
来自专栏技术总结

教你如何自定义AlertView

2515
来自专栏服务端技术杂谈

【死磕iOS】处理不等高TableViewCell的小花招

地址://www.jianshu.com/p/a0342ee86431 嗨大家,好久不见~ 今天来和大家一起聊聊处理不等高TableViewCell的那些小花招...

3348
来自专栏谈补锅

Quartz2D复习(四) --- 图层CALayer和动画CAAnimation

1)、在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView

723
来自专栏mukekeheart的iOS之旅

iOS学习——核心动画

  Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。核心动画所在的位置如下图...

1054
来自专栏向治洪

FLAnimatedImage -ios gif图片加载框架介绍

简介 FLAnimatedImage 是 Flipboard 团队开发的在它们 App 中渲染 GIF 图片使用的库。 后来 Flipboard 将 FLAni...

2547

扫码关注云+社区