AutoLayout - VFL

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

 

AutoLayout，顾名思义，是自动布局，自动布局的实现有不少种，我以前在开发过程当中比较多用到的是VFL和Mansory；可是通常状况下，不是很复杂的布局控件会直接使用frame进行计算，因此事实上也不是整个项目都在使用VFL，并且不少时候VFL 也有其局限性，好比我要设置一个比例的高度，就要本身写NSLayoutConstraint，也挺复杂，而通常状况下，我都会先实现UIView的分类，简化对于frame进行操做的方法，这样能够直接获取或者设置height，而不须要从view.frame...的一层层去取，因此若是在这种状况下，会有一些布局即便使用了VFL也并无简化多少（也有多是我对VFL尚未精深到必定境界吧）；可是不少复杂一些的布局，VFL和Mansory的使用确实会节省不少时间。

 

一、VFL的语法含义：

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

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

 

二、VFL的示例解释：

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

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

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

 

     V:|[aView(>=60@900)]-50-[bView(>=400@899)]-30@901-|

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

 

 

三、使用步骤

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

 

四、代码示例：

 
        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(>=60@900)]-50-[label_04(>=400@899)]-30@901-|"
        let vCons3 = NSLayoutConstraint.constraintsWithVisualFormat(vVFL3, options: NSLayoutFormatOptions.AlignAllLeft, metrics: nil, views: ["label_03":label_03, "label_04":label_04])
        superView.addConstraints(vCons3)

 

 

______________________________________________________________________________________________________________

12.15补充：
 其实若是一个布局中使用VFL，不可避免的整个布局约束的语句甚至比布局还要多，由于要对不一样的布局关系进行处理和限制，而涉及到动态修改就会更加麻烦；在个人项目中，不多再用到VFL了，可是有些场景不得不说VFL更方便；现在，个人作法是扩展了UIView的方法，用一些基本的方法作布局，虽然理论上仍是使用frame进行的，可是若是可以有一个清晰的视图层次和便于使用的分类方法，即使是很复杂的设计图，也能够很清晰的进行排布，由于注释以及策略选用得当，一者维护起来也并不会困难，两者仍可以适配各类机型，最主要我不须要去写不少的约束代码，以及去备注各个相关约束间的关系； 但自动布局也并非就毫无用武之地，怎么说呢，这个应该是哪种使用更加熟练，哪种就更为适用，固然是以维护和知足设计要求的前提下。