AutoLayout

作者: 黄穆斌 | 来源:发表于2016-08-13 10:36 被阅读183次

    这是一篇我关于 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, 作为后期动画变动使用。

    更新记录

    相关文章

      网友评论

      • CD826:为何不直接用SnapKit?如果想重新发明轮子的话也可以参考它的语法方式,个人觉得更简洁
        黄穆斌:@CD826 刚看了一下,确实很有启发呢。我得好好研究研究。非常感谢你的提醒哈。

      本文标题:AutoLayout

      本文链接:https://www.haomeiwen.com/subject/ylwesttx.html