iOS6+AutoLayout使用教程

標籤：ios   autolayout   

為了適配iPhone6 Plus,必須學會AutoLayout了，研究了兩天，記得一下心得650) this.width=650;" src="http://img.baidu.com/hi/jx2/j_0005.gif" alt="j_0005.gif" />。

Autolayout類似於安卓裡的layout,或者說類似於web開發中的html css，簡單來說就是用相對布局來代替絕對成局（這是我的理解）。

使用Autolayout有兩種方式，1.用xib配置，2.用代碼寫。

無論用xib還是代碼，需要遵循的一個原則是，一個視圖你必須包含以下兩個限制：1.position，設定x,y座標、上下左右間隙、置中等這些條件都能確定位置，但這幾個是相互衝突的，只能用其一；2.size, 必須設定尺寸，可以設定固定值的寬高，也可以通過設定寬高比例來等比縮放。

1.用xib配置

這種方式比較直觀，開啟xib進行配置即可，具體的使用方法網路上有很多介紹，這裡就不細說了

2.用代碼寫

用xib配置應該能完成大部分需要，不過還是會有要用代碼寫的時候，下面是我寫的一個例子，包含了option, metric的用法。

這個例子的效果是：xib裡放置了兩個水平置中的butt1,butt3,然後用代碼建立了butt2,butt2與butt3水平置中對齊，最後建立了view1,view1隻與根視圖進行布局，與不受其他視圖影響

  //butt2

    {

        UIButton *butt = [UIButton buttonWithType:UIButtonTypeCustom];

        butt.backgroundColor = [UIColor redColor];

        [butt setTitle:@"2" forState:UIControlStateNormal];

        butt.translatesAutoresizingMaskIntoConstraints = NO;

        butt.frame = CGRectMake(0, 0, 100, 100);    //這個frame其實是不需要的

        [self.view addSubview:butt];

        butt2 = butt;

        

        //寬:高 = 1:1

        [butt2 addConstraint:[NSLayoutConstraint constraintWithItem:butt2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:butt2 attribute:NSLayoutAttributeHeight multiplier:1 constant:0]];

        

        //butt2與butt3水平對齊，豎直間隙20， 寬定為50

        NSDictionary *viewsDict = NSDictionaryOfVariableBindings(butt3,butt2);

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[butt3]-20-[butt2(==50)]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:viewsDict]];

    }

    

    //A new view，相對於根視圖布局

    {

        UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];

        view1.translatesAutoresizingMaskIntoConstraints = NO;

        view1.backgroundColor = [UIColor blueColor];

        [self.view addSubview:view1];

        

        //1.寬高比1:1.5

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view1 attribute:NSLayoutAttributeWidth multiplier:1.5f constant:0]];

        

        //2.固定高度150

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:0.f constant:150.f]];

        

        //3.水平置中 (3和4只能選其一，因為這兩個限制是衝突的)

        //    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

        

        //4.右邊對齊,保留10間隙

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10]];

        

        //5.上下間隔，這裡要的效果是保持頂部間隙為100，所以底部間隙要是可變的>=100,試試下面6的效果對比一下

CGFloat hMargin = 100.f;

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-hmar-[view1]-(>=hmar)-|" options:0 metrics:@{@"hmar":@(hMargin)} views:NSDictionaryOfVariableBindings(view1)]];

        

        //6.上下間隔,頂部間隙可變

        //[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=100)-[view1]-(==100)-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1)]];

    }

關於VFL，請參考蘋果官方文檔： Visual Format Language

本文出自 “idanal” 部落格，請務必保留此出處http://danal.blog.51cto.com/3353275/1617595

iOS6+AutoLayout使用教程