关闭

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

标签: iOSVFL布局
169人阅读 评论(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偏移值,数值与坐标一致
    }];
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:35756次
    • 积分:1118
    • 等级:
    • 排名:千里之外
    • 原创:80篇
    • 转载:3篇
    • 译文:0篇
    • 评论:4条
    文章分类