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

原创 2015年11月18日 23:02:18

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偏移值,数值与坐标一致
    }];
版权声明:本文为博主原创文章,未经博主允许不得转载。

【Android基础笔记02】 API Guide学习和常用布局及基本UI控件

Android API Guide学习和LinearLayout布局及基本UI控件 一、Android UI框架:【了解】         Android中所有的UI(用户界面)元素都...

【Android基础笔记03】 Android RelativeLayout相对布局和基本UI控件

一、RelativeLayout:【掌握】 (一)、概念:指按着控件之间的相对位置来进行布局。 (二)、RelativeLayout特有属性: 1、and...

UI基础控件综合案例之XML布局编写

UI基础控件综合案例之案例介绍及案例分析 XML
  • Rainary
  • Rainary
  • 2017年06月10日 22:53
  • 125

Android基础————UI布局之高级控件详解

UI高级控件: (1)SeekBar:可以拖动的进度条 (2)ProgressBar: 常用属性: style: style="?android:attr/progressBarStyle"默认的进度...

安卓UI控件拖拽的几种方法

上一篇简单的讲解了安卓listview控件的一些简单的用法,这一次我们按照群英传的思路看一看安卓UI控件拖拽的实现方法。 安卓控件的拖拽(这里用词可能不太专业)可归纳为一下几个动作:1.普通拖拽,改变...

Android开发-UI控件:选项卡切换时改变布局中内容的方法

文章转自: http://www.itstrike.cn/question/8a6e55b3-9dcf-4cb1-a867-49e1611f804b.html 界面 界面设计很简单...

安卓开发基础:给控件设置监听事件的几种方法

安卓给控件设置监听事件,给多个控件设置监听事件

UI阶段控件常用方法大全总结

  • 2016年05月23日 13:05
  • 769KB
  • 下载

C#子线程更新UI控件的方法实例总结

本文实例总结了C#子线程更新UI控件的方法,对于桌面应用程序设计的UI界面控制来说非常有实用价值。分享给大家供大家参考之用。具体分析如下: 一般在winform C/S程序中经常会在子线程中更新控件...
  • rattles
  • rattles
  • 2016年06月27日 20:34
  • 1096
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UI基础__控件布局的几种方法总结
举报原因:
原因补充:

(最多只允许输入30个字)