在UIScrollView中使用Auto Layout中的VFL(Visual format language)

上一篇VFL(Visual format language)的文章中講了一些基本用法.傳送門http://www.cnblogs.com/wupei/p/4150626.html.

　　這篇簡單的講解下UIScrollView下的自動佈局.UIScrollView有一個contentSize因此，他跟其餘的view不同。其餘的view你只須要指定他的四個邊距，或者能固定他的大小就行。可是UIScrollView不行，約束寫很差可能會致使滾動不了，或者報錯或一堆警告。可是理解了他的原理就很容易去作到了。

　　1、首先實現一個水平滾動

　　水平滾動最多見的就是一個廣告循環了(此處不講解循環),之前一般是直接用寬度乘以幾就是contenSize的寬度。這裏就用自動佈局來實現指定contenSize的寬度.代碼以下:

UIScrollView *scrollview=[[UIScrollView alloc]init];
    scrollview.translatesAutoresizingMaskIntoConstraints=NO;
    [self.view addSubview:scrollview];
    scrollview.pagingEnabled=YES;
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollview]|"
                                                                    options:0
                                                                    metrics:nil
                                                                    views:NSDictionaryOfVariableBindings(scrollview)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollview]|"
                                                                      options:0
                                                                      metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(scrollview)]];
    
    
    UIView *view1=[[UIView alloc]init];
    view1.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view1];
    view1.backgroundColor=[UIColor redColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view1(==width)]"
                                                                       options:0
                                                                       metrics:@{@"width":@(self.view.frame.size.width)}
                                                                       views:NSDictionaryOfVariableBindings(view1)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view1(==200)]"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view1)]];
    
    UIView *view2=[[UIView alloc]init];
    view2.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view2];
    view2.backgroundColor=[UIColor grayColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1][view2(==view1)]"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view2,view1)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view2(==view1)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view2,view1)]];
    
    UIView *view3=[[UIView alloc]init];
    view3.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view3];
    view3.backgroundColor=[UIColor blackColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view2][view3(==view2)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view3,view2)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view3(==view1)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view3,view1)]];
    

 　　這在段代碼裏，我給scrollview初始化了三個子view.而這三個子view在水平方向一字排開。咱們來看一下這三個子view的水平約束

 

[scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view1(==width)]"
                                                                       options:0
                                                                       metrics:@{@"width":@(self.view.frame.size.width)}
                                                                       views:NSDictionaryOfVariableBindings(view1)]];

[scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1][view2(==view1)]"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view2,view1)]];

[scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view2][view3(==view2)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                       views:NSDictionaryOfVariableBindings(view3,view2)]];

 　　從這三個語句來看，很容易看出，這三個view，寬度是相等的。並且下一個view緊跟着上一個view的最右邊。

　　在第一個view的約束中H:|[view1(==width)],這裏的H:|就是代表這個view緊貼在它的spuerview的最左邊。

　　第三個view的約束中H:[view2][view3(==view2)]|,後面有一個|，說明了view3在superview的最右邊緊貼着。換句話說，這個view3的maxX就是contentSize的width.在這裏也就起來一個約束他的滾動範圍的做用。正是由於若是，咱們的scrollview就能夠愉快的滾動起來了。

　　

　　2、實現一個垂直方向滾動

　　看過了水平方向的代碼，咱們知道，只要知道何時它的子view貼到最邊上就能夠肯定它的滾動範圍了。同理垂直方向也是同樣。

　　

UIScrollView *scrollview=[[UIScrollView alloc]init];
    scrollview.translatesAutoresizingMaskIntoConstraints=NO;
    [self.view addSubview:scrollview];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollview]|"
                                                                      options:0
                                                                      metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(scrollview)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollview]|"
                                                                      options:0
                                                                      metrics:nil
                                                                      views:NSDictionaryOfVariableBindings(scrollview)]];
    
    
    UIView *view1=[[UIView alloc]init];
    view1.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view1];
    view1.backgroundColor=[UIColor redColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view1(==width)]|"
                                                                       options:0
                                                                       metrics:@{@"width":@(self.view.frame.size.width)}
                                                                       views:NSDictionaryOfVariableBindings(view1)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view1(==300)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view1)]];
    
    UIView *view2=[[UIView alloc]init];
    view2.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view2];
    view2.backgroundColor=[UIColor grayColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view2(==view1)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view2,view1)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1][view2(==400)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view2,view1)]];
    
    UIView *view3=[[UIView alloc]init];
    view3.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view3];
    view3.backgroundColor=[UIColor purpleColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view3(==view2)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view3,view2)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2][view3(==500)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view3,view2)]];
    

 　　咱們再次把這三個view的垂直方向約束抽出來：

[scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view1(==300)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view1)]];

[scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1][view2(==400)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view2,view1)]];

[scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view2][view3(==500)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view3,view2)]];

 　　這三個約束，很明顯看出view1高度爲300,view2高度爲400,view3高度爲500,並且它們都緊跟在着上一個view。

　　在view1的約束中能夠看出來，它是最上面的，換句話說他的座標就是(0,0).

　　而view3的約束是[view3(==500)]|,那它的maxY就是contenSize的height了.這樣就能夠肯定他能在垂直方向滾動了。

　　

　　3、兩個方法均可以滾動(相信這一步已經不難了)

UIScrollView *scrollview=[[UIScrollView alloc]init];
    scrollview.translatesAutoresizingMaskIntoConstraints=NO;
    [self.view addSubview:scrollview];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollview]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:NSDictionaryOfVariableBindings(scrollview)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollview]|"
                                                                      options:0
                                                                      metrics:nil
                                                                        views:NSDictionaryOfVariableBindings(scrollview)]];
    
    
    UIView *view1=[[UIView alloc]init];
    view1.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view1];
    view1.backgroundColor=[UIColor redColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view1(==width)]"
                                                                       options:0
                                                                       metrics:@{@"width":@(self.view.frame.size.width)}
                                                                         views:NSDictionaryOfVariableBindings(view1)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view1(==200)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view1)]];
    
    UIView *view2=[[UIView alloc]init];
    view2.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view2];
    view2.backgroundColor=[UIColor grayColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1][view2(==view1)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view2,view1)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view2(==view1)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view2,view1)]];
    
    UIView *view3=[[UIView alloc]init];
    view3.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view3];
    view3.backgroundColor=[UIColor blackColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view2][view3(==view2)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view3,view2)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view3(==view1)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view3,view1)]];
    
    UIView *view4=[[UIView alloc]init];
    view4.translatesAutoresizingMaskIntoConstraints=NO;
    [scrollview addSubview:view4];
    view4.backgroundColor=[UIColor yellowColor];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view4(==200)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view4)]];
    [scrollview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1][view4(==800)]|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:NSDictionaryOfVariableBindings(view4,view1)]];
    

 　　這裏只要知道了兩個方法何時是到底了，就能夠肯定他的contenSize了，因此，作起來也不會很麻煩。第三個就再也不說一次了。

　　最後總結:在UIScrollView中使用自動佈局，若是要想滾動，就要知道他的contenSize，這是你們都知道的。在自動佈局中（VFL方式），你只須要知道你的H方向的範圍，以及V方向的範圍就能夠實現效果。也就是知道|[view]|這個約束中的兩個"|"的位置。有一點要注意的是，你的view的寬度你得知道，並且約束沒有錯。不然就不會算出來你的contenSize。若是H|[view]|這樣是沒法得知的，由於contenSize是沒有範圍的，他只知道這個view跟左右兩這沒有距離，可是沒法得知具體width是多少。由於contenSize它本身也不知道它的width是多少。因此你這麼寫它就會對了H|[view(==x)]|,至於X值是多少，就看你實際狀況了.

　　轉載註明出處：http://www.cnblogs.com/wupei/p/4428164.html , http://zhiwupei.sinaapp.com/?p=64

　　Demo源碼：https://github.com/zhiwupei/VFL/