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

来源：互联网发布：算法时代下载编辑：程序博客网时间：2024/05/21 17:32

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偏移值，数值与坐标一致    }];

0 0