AutoLayout

这是一篇我关于 AutoLayout 的使用以及学习的总结文章。持续更新。
2016-08-22 更新，修复了少许 Bug. 变更了函数名。重写了一下文档。

---

AutoLayout.swift

Github 传送门

AutoLayout 封装库。
使用函数式编程简化纯代码 AutoLayout 的编写过程，并保持代码的简洁。
纯 Swift 编写，轻量，易用。
觉得好用的话，给我点个星星，谢谢。

代码调用示例图

// 上述示例图的代码实现
func useAutoLayout() {
    let SView: UIView = UIView()
    let AView: UIView = UIView()
    let BView: UIView = UIView()
    SView.addSubview(AView)
    SView.addSubview(BView)
    
    // 1
    AutoLayout(SView, AView).centerSize()
    
    // 2 
    AutoLayout(SView, AView).centerSize(0, 0.5)
    
    // 3
    AutoLayout(SView, AView).leadingTopTrailing().width(0, 0.5)
    
    // 4 
    AutoLayout(SView, BView).leadingTopTrailing()
    AutoLayout(SView, AView).topTrailingBottom()
        .second(BView).width().horizontal(10)
    
    // 5
    AutoLayout(SView, AView).size(AView, 50, 50).centerX().centerY(0, 0.5)
    AutoLayout(SView, BView).size(BView, 50, 50).centerX().centerY(0, 1.5)
    
    // 6
    AutoLayout(SView, AView)
        .width(AView, 50)
        .aspectRatio(AView)
        .add(.CenterX, SEdge: .CenterX, constant: 0, multiplier: 1)
        .add(.CenterY, SEdge: .CenterY, constant: 0, multiplier: 0.5)
    AutoLayout(SView, BView)
        .width(BView, 50)
        .aspectRatio(BView)
        .add(.CenterX, SEdge: .CenterX, constant: 0, multiplier: 1)
        .add(.CenterY, SEdge: .CenterY, constant: 0, multiplier: 1.5)
}

Api

Api 设计规则

• 属性：必须使用的视图对象以及其设置方法，以及设置之后的 layout 对象。
• 方法
  • 全自定义方法：可完全自定义 Layout 的方法。
  • 单边，多边... 按边数定义的 Layout 方法，函数名称即为要设置对齐的边。
    参数基本上都设置了默认值，并省略外部参数名。

• 属性
  • Views
    • weak var view: UIView! /// 父视图
    • weak var first: UIView! /// 添加约束的视图
    • weak var second: UIView? /// 作为对比的视图
  • 初始化，设置对象
    • init(_ view: UIView, _ first: UIView, _ second: UIView? = nil)
    • func first(view: UIView) -> AutoLayout
    • func second(view: UIView?) -> AutoLayout
    • func views(first: UIView, _ second: UIView?) -> AutoLayout
  • Constraints
    • var _constrants: [NSLayoutConstraint] /// 约束存放数组
    • func clearConstrants() -> AutoLayout
    • func constrants(block: ([NSLayoutConstraint]) -> Void) -> AutoLayout
• 全自定义方法
  • func add(FEdge: NSLayoutAttribute, SEdge: NSLayoutAttribute, constant: CGFloat = 0, multiplier: CGFloat = 1, priority: Float = 1000, related: NSLayoutRelation = .Equal) -> AutoLayout
  • func layout(FEdge: NSLayoutAttribute, SEdge: NSLayoutAttribute, constant: CGFloat = 0, multiplier: CGFloat = 1, priority: Float = 1000, related: NSLayoutRelation = .Equal) -> NSLayoutConstraint
• 宽高方法
  • func width(view: UIView, _ constant: CGFloat, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func height(view: UIView, _ constant: CGFloat, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func aspectRatio(view: UIView, _ constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func size(view: UIView, _ width: CGFloat, _ height: CGFloat, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
• 单边对比方法
  • func top(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func bottom(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func leading(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func trailing(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func centerX(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func centerY(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func width(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func height(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
• 距离
  • func horizontal(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
  • func vertical(constant: CGFloat = 0, _ multiplier: CGFloat = 1, _ related: NSLayoutRelation = .Equal, priority: Float = 1000) -> AutoLayout
• 双边对比方法
  • 常用
    • func center(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
    • func size(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
    • func leadingTrailing(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
    • func topBottom(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
  • 角落
    • func leadingTop(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
    • func topTrailing(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
    • func trailingBottom(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
    • func bottomLeading(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
• 三边对比方法
  • func bottomLeadingTop(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
  • func leadingTopTrailing(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
  • func topTrailingBottom(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
  • func trailingBottomLeading(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout
• 四边对比方法
  • func centerSize(constant: CGFloat = 0, _ multiplier: CGFloat = 1, priority: Float = 1000) -> AutoLayout
  • func edge(constant: CGFloat = 0, priority: Float = 1000) -> AutoLayout

设计思路

来源

对苹果 NSLayoutConstraint 类进行封装。并提供链式编程方法，简洁调用代码。

NSLayoutConstraint
convenience init(item view1: AnyObject,
            attribute attr1: NSLayoutAttribute,
         relatedBy relation: NSLayoutRelation,
               toItem view2: AnyObject?,
            attribute attr2: NSLayoutAttribute,
      multiplier multiplier: CGFloat,
                 constant c: CGFloat)

注意要点：

• 除了自身宽高设置以外，layoutContraint 都需要添加到父视图当中。
• 所有添加 Autolayout 的视图都需要把 translatesAutoresizingMaskIntoConstraints 设置为 false.
• priority 优先度需要额外进行设置。
• multiplier 倍数，在第一次设置之后就无法进行更改。
• constant 差额，可进行后期变更。
• 计算公式：

view1.att1 relation view2.attr2 * multiplier + constant
或者
view1.att1 (==, >=, <=) view2.attr2 * mulitiplier + constant

设计原则

• 调用模式为链式调用，可一次性添加多个约束。
• 函数调用使用默认值参数，方便使用时减少常用参数的重复设置。
• 调用之后可获取 layoutContraint, 作为后期动画变动使用。

更新记录

• 2016-08-19 创建。
  我的 GitHub 空间