• 适配----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]];

        }

  • 相关阅读:
    【Android】11.2 通过重写对应的方法保存和恢复实例的状态
    【Android】11.1 Activity的生命周期和管理
    【Android】11.0 第11章 活动和片段--本章示例主界面
    【Android】10.5 滚动视图(RecyclerView)
    【Android】10.4 卡片视图
    【Android】10.3 网格视图(GridView)
    【Android】10.2 使用Android Support Library增强组件功能
    【Android】10.1 扩展组件库和其他视图--本章示例主界面
    【Android】9.3 自定义列表视图的外观
    【Android】9.2 内置行视图的分类和呈现效果
  • 原文地址:https://www.cnblogs.com/popper123/p/4799982.html
Copyright © 2020-2023  润新知