UI基础__控件布局的几种方法总结

最新推荐文章于 2024-04-10 22:05:44 发布

xiao_yuly

最新推荐文章于 2024-04-10 22:05:44 发布

阅读量446

点赞数

分类专栏： OC基础文章标签： iOS VFL 布局

本文链接：https://blog.csdn.net/jacob_ios/article/details/49914579

版权

OC基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.自动布局的几个注意点：

设置行高拥有自动变化的属性
为最底部的控件连接线，设置为属性在代码里控制变化的情况

    //让tableView的行高拥有高度自动变化属性
    self.tableView.rowHeight=UITableViewAutomaticDimension;
    //设置预估行高
    self.tableView.estimatedRowHeight=20;

2.代码布局控件

    UIView *redView=[[UIView alloc] init];
    redView.backgroundColor=[UIColor redColor];
    [self.view addSubview:redView];

    UIView *blueView=[[UIView alloc] init];
    blueView.backgroundColor=[UIColor blueColor];
    [self.view addSubview:blueView];

    //禁用控件的autoresizing
    redView.translatesAutoresizingMaskIntoConstraints=NO;
    blueView.translatesAutoresizingMaskIntoConstraints=NO;

    //代码添加约束
    //添加高度约束：高度只是设置一个值，与其它的控件没有任何的参照关系
    NSLayoutConstraint *cHeight=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:40];
    //添加顶部约束
    NSLayoutConstraint *cTopMargin=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView.superview attribute:NSLayoutAttributeTop multiplier:1 constant:40];
    //添加左边外边距
    NSLayoutConstraint *cLeftMargin=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:redView.superview attribute:NSLayoutAttributeLeading multiplier:1 constant:10];
    //添加右边外边距
    NSLayoutConstraint *cRightMargin=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:redView.superview attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10];

    //添加约束到控件
    [redView.superview addConstraint:cHeight];
    [redView.superview addConstraint:cTopMargin];
    [redView.superview addConstraint:cLeftMargin];
    [redView.superview addConstraint:cRightMargin];

3.使用VFL控件布局

 UIView *redView=[[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor=[UIColor redColor]; 

  redView.translatesAutoresizingMaskIntoConstraints=NO;

    NSString *conH=@"H:|-padding-[redView]-padding2-|";
    NSDictionary *dicmetrics=@{@"padding":@"10",@"padding2":@"30"};
    NSDictionary *dicViews=@{@"redView":redView};

    NSArray *vflH=[NSLayoutConstraint constraintsWithVisualFormat:conH //可视化的字符串
              options:0
              metrics:dicmetrics//字符串的所有表示数值的变量
              views:dicViews]; //字符串中所有的view,指定分别是那一些view对象

    NSString *conTop=@"V:|-padding2-[redView(44)]";

    NSArray *vflV=[NSLayoutConstraint constraintsWithVisualFormat:conTop options:0 metrics:dicmetrics views:dicViews];

    //添加约束到控件
    [redView.superview addConstraints:vflH];
    [redView.superview addConstraints:vflV];

4.使用第三方框架

UIView *redView=[[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor=[UIColor redColor];

    UIView *blueView=[[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor=[UIColor blueColor];
    //去除autoresizing属性
    redView.translatesAutoresizingMaskIntoConstraints=NO;
    blueView.translatesAutoresizingMaskIntoConstraints=NO;

    //添加约束
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(40); //离顶部的距离为40
        make.height.mas_equalTo(44); //设置高度为40
        make.leading.mas_equalTo(10);//设置离左边的边距为10
        make.trailing.mas_equalTo(-10);//设置离右边的边距为10
    }];
//添加约束too
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.trailing.mas_equalTo(redView); //如果省略属性，就是前面的trailing
        make.leading.mas_equalTo(redView.mas_centerX);
        make.height.mas_equalTo(redView);//如果省略属性，就是前面的height
        make.top.mas_equalTo(redView.mas_bottom).mas_offset(40); //mas_offset偏移值，数值与坐标一致
    }];