AutoLayout - VFL

Posted 2020-08-18

其实很早就像整理出一份VFL的总结出来，觉得有很多东西可以写，但是真正去总结的时候发现，VFL也并没有很多东西，其实应该是在布局的过程中直接用VFL语句思考的过程比较难以形成，多数布局问题其实是在实际操作中才会有越来越深的体会，关键在用。可能有些词不达意，不多说了，以下将VFL的基本表达列出。

 

AutoLayout，顾名思义，是自动布局，自动布局的实现有很多种，我在开发过程中比较多用到的是VFL和Mansory；但是一般情况下，不是很复杂的布局控件会直接使用frame进行计算，所以事实上也不是整个项目都在使用VFL，而且很多时候VFL也有其局限性，比如我要设置一个比例的高度，就要自己写NSLayoutConstraint，也挺复杂，而一般情况下，我都会先实现UIView的分类，简化对于frame进行操作的方法，这样可以直接获取或者设置height，而不需要从view.frame...的一层层去取，所以如果在这种情况下，会有一些布局即使使用了VFL也并没有简化多少（也有可能是我对VFL还没有精深到一定境界吧）；但是很多复杂一些的布局，VFL和Mansory的使用会节省很多时间。

 

1、VFL的语法含义：

               H:  ->  水平方向；
                V:  ->  竖直方向；
           [aaa]  ->  views参数中key值为aaa的view控件；
                  |  ->  父视图的边界；
   >=,==,<=  ->  关系；
                  -  ->  间隔，当设置30的间隔时为 -30- ，不设置时会显示默认间隔；而当使用matrics来设置数值时，30这个数值也可以直接使用matrics中设置的key值；

           @100  ->  优先级，优先级最高为1000，数值越高约束的优先级越高；

 

2、VFL的示例解释：

     H:|-10-[aView(60)]-40-[bView]-30-|   

               第一个"|"表示左边距，"-10-"表示距左边距10像素，"[aView(60)]"表示aView对应的控件宽度为60，"-40-"表示aView和bView的间隔为40，"-30-"则表示距离右边距30，其中,bView并未设置宽度，会有已有条件剩余的部分作为宽度来显示；

        事实上，在理解VFL的语句时，倒不妨就把语句当成屏幕，只不过把控件的水平方向的排布分离出来用一种格式化的方式表示而已。

 

     V:|[aView(>[email protected])]-50-[bView(>[email protected])][email protected]|

               @后面的表示优先级，当多个条件有冲突时，会确保高优先级的条件；

 

 

3、使用步骤

           创建VFL语句  ->  创建约束(NSLayoutConstraint.constraintsWithVisualFormat)  ->  将约束添加到父视图；

 

4、代码示例：

 
        self.view.backgroundColor = UIColor.greenColor()
    
        let superView = UIView(frame: CGRect(x: 20, y: 100, width: 300, height: 400))
        superView.backgroundColor = UIColor.blueColor()
        self.view.addSubview(superView)
        
        let label_01 = UILabel()
        label_01.text = "label_01"
        label_01.backgroundColor = UIColor.redColor()
        superView.addSubview(label_01)
        
        let label_02 = UILabel()
        label_02.text = "label_02"
        label_02.backgroundColor = UIColor.grayColor()
        superView.addSubview(label_02)
        
        let label_03 = UILabel()
        label_03.text = "label_03"
        label_03.backgroundColor = UIColor.brownColor()
        superView.addSubview(label_03)
        
        let label_04 = UILabel()
        label_04.text = "label_04"
        label_04.backgroundColor = UIColor.cyanColor()
        superView.addSubview(label_04)

        
        label_01.translatesAutoresizingMaskIntoConstraints = false
        label_02.translatesAutoresizingMaskIntoConstraints = false
        label_03.translatesAutoresizingMaskIntoConstraints = false
        label_04.translatesAutoresizingMaskIntoConstraints = false

        
        //当屏宽大于两个按钮的宽度时，两个按钮的间隔的优先级会降低；
        //使用AlignAllLeft会提示Options mask required views to be aligned on a horizontal edge, which is not allowed for layout that is also horizontal.； 也就是说当我写水平方向时的布局时，其实只能使用水平相关的NSLayoutFormatOptions限定，否则会因为VFL语句解析出错；
        //设置了左右边距、间隔与宽度；则左右边距和宽度优先；
        let hVFL = "H:|-10-[label_01(60)]-40-[label_02]-30-|"
        let hCons = NSLayoutConstraint.constraintsWithVisualFormat(hVFL, options: NSLayoutFormatOptions.AlignAllTop, metrics: nil, views: ["label_01":label_01, "label_02":label_02])
        superView.addConstraints(hCons)
        
        let vVFL1 = "V:|-80-[label_01]"
        let vCons1 = NSLayoutConstraint.constraintsWithVisualFormat(vVFL1, options: NSLayoutFormatOptions.AlignAllTop, metrics: nil, views: ["label_01":label_01, "label_02":label_02])
        superView.addConstraints(vCons1)
        


        
        
        
        //水平方向如果指定了上边距与下边距 和高度  则以上边距和高度为优先；
        //水平方向只是简单居中
        let hVFL2 = "H:|-[label_03]-|"
        let hCons2 = NSLayoutConstraint.constraintsWithVisualFormat(hVFL2, options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["label_03":label_03])
        superView.addConstraints(hCons2)
        
        
        let hVFL3 = "H:|-[label_04(==label_03)]-|"
        let hCons3 = NSLayoutConstraint.constraintsWithVisualFormat(hVFL3, options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["label_03":label_03, "label_04":label_04])
        superView.addConstraints(hCons3)

        
        let vVFL3 = "V:|[label_03(>[email protected])]-50-[label_04(>[email protected])][email protected]|"
        let vCons3 = NSLayoutConstraint.constraintsWithVisualFormat(vVFL3, options: NSLayoutFormatOptions.AlignAllLeft, metrics: nil, views: ["label_03":label_03, "label_04":label_04])
        superView.addConstraints(vCons3)