适配----Autolayout

AutLayout 相对布局,根据参照视图的位置 来定义自己的位置。通过约束视图和视图之间的关系来分配屏幕上的位置,通常与VFL语言配合使用

VFL(visual format language)视觉格式化语言,通过字符串来约束字符和字符之间的关系

 使用AutLayout必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用frame  原点  自身的尺寸 来确定 自身位置。而autoLayout  根据参照视图的位置  来定义自己的位置

 

 

autoLayout是相对布局  约束视图和视图之间的关系 来分配 屏幕上的位置

 

     使用VFL(Visual Format Language  视觉格式语言)通过添加字符串 来约束视图和视图之间的关系

 

使用autoLayout 必须把translatesAutoresizingMaskIntoConstraints禁用才可以使用

相对布局是找一个参照物 拿参照物当做基础,设置他和参照物的相对距离 来设置自己的位置

 

 VFL 须有 横竖 两个方向的约束

 

 H:表示: 横向

 V: 表示:竖向

 | 表示他的父视图

 -50- 表示后面视图 与前面视图的距离 (后面视图是textField,前面视图是他的父视图)

 []表示是一个视图

 [textField(>=200)] 要约束视图的宽  (>=200)允许最小的宽度是200  如果是竖向  就是允许最小的高度

 

 @"H:|-50-[textField(>=200)]-50-|"

 距离坐边原点距离50   右边边界距离50    允许视图的最小宽度是200

 

 使用autoLayout适配的时候以最小尺寸设备 为基准

/*//    VFL  横向 竖向布局

 //    @"H:" 设置横向布局

 //    @"V:" 设置竖向布局

 

 //    设置横向布局 距离参照视图的左侧边距

 //    @"H:|-20-"

 //    @"H:[view]-20-"

 

 //    @"H:|-20-[view(200)]" view的宽  永远是200

 //    @"H:|-20-[view(otherView)]" view的宽  与otherView的宽相同

 //    @"H:|-20-[view(>=200)]" 设置横向布局 距离参照视图的左侧边距 设置view横向的尺寸 不能低于200

 

 //    @"H:|-20-[view(>=200)]-20-|" 设置横向布局 距离参照视图的左侧边距 设置view横向的尺寸 不能低于200 设置右侧与参照视图之间的间距

 */

//    视图 使用属性的时候   绑定key  需要绑定它真实的名字  _titleLable

//    self.titleLable = _titleLable

 下面是代码:

1.使用Autolayout布局一个视图

在viewDidLoad写入以下代码:

  UIView *view = [[UIView alloc]init];

//使用Autolayout必须禁用translatesAutoresizingMaskIntoConstraints

    view.translatesAutoresizingMaskIntoConstraints =NO;

    view.backgroundColor =[UIColor redColor];

    [self.view addSubview:view];

   NSDictionary *views =NSDictionaryOfVariableBindings(view);   

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|"  options:0 metrics:nil views:views]];

2.使用Autolayout布局两个视图:

 UIView *view = [[UIView alloc]init];

     view.translatesAutoresizingMaskIntoConstraints =NO;

    view.backgroundColor =[UIColor redColor];

    [self.view addSubview:view];

    UIView *view1 = [[UIView alloc]init];

    view1.translatesAutoresizingMaskIntoConstraints =NO;

    view1.backgroundColor =[UIColor yellowColor];

    [self.view addSubview:view1];

    NSDictionary *views = NSDictionaryOfVariableBindings(view,view1);

   [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];

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

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:  @"V:[view]-10-[view1(50)]" options:0 metrics:nil views:views]];

    

3.使用Autolayout布局多个视图

NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor],[UIColor greenColor]];

    for (int i=0; i<3; i++) {

        UIView *view =[[UIView alloc]init];

        view.backgroundColor = colorList[i];

        view.tag = 30+i;

        view.translatesAutoresizingMaskIntoConstraints = NO;

        [self.view addSubview:view];

    }

    UIView *redColorview = [self.view viewWithTag:30];

    UIView *yellowColorview = [self.view viewWithTag:31];

    UIView *greenColorview = [self.view viewWithTag:32];

    NSDictionary * views = NSDictionaryOfVariableBindings(yellowColorview,redColorview,greenColorview);

    NSArray * HList = @[@"H:|-20-[redColorview(>=200)]-20-|",@"H:|-20-[yellowColorview(>=100)]-10-[greenColorview(yellowColorview)]-20-|"];

//    红色视图与黄色视图竖向关系和红色视图和绿色视图竖向关系

    NSArray *VList = @[@"V:|-40-[redColorview(50)]-10-[yellowColorview(redColorview)]",@"V:|-40-[redColorview(50)]-10-[greenColorview(redColorview)]"];

     for (int i =0; i<VList.count; i++) {

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:HList[i] options:0 metrics:nil views:views]];

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VList[i] options:0 metrics:nil views:views]];

    }

 

你可能感兴趣的:(适配----Autolayout)