文档章节

自动布局(autoLayout)代码演练2

tb_engineer
 tb_engineer
发布于 2015/04/12 22:51
字数 499
阅读 73
收藏 1

 

代码效果:

 

 

 

 

 

 

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    
    //1.添加视图
    UIView *blueView =[[UIView alloc]init];
    blueView.backgroundColor =[UIColor blueColor];
    //要先禁止autoresizing功能
    blueView.translatesAutoresizingMaskIntoConstraints =NO;
    [self.view addSubview:blueView];
    
    UIView *redView =[[UIView alloc]init];
    redView.backgroundColor =[UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints =NO;
    [self.view addSubview:redView];
    
    
    //*************************************************2.蓝色约束*********************
    CGFloat margain =20;
    
      //2.1蓝色视图左边约束
    NSLayoutConstraint *blueLeft =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margain];
    [self.view addConstraint:blueLeft];
    
    //2.2蓝色视图右边约束
    NSLayoutConstraint *blueReight =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant: -margain];
    [self.view addConstraint:blueReight];
    
    //2.3蓝色视图顶部约束
    NSLayoutConstraint *blueTop =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margain];
    [self.view addConstraint:blueTop];
    
    //2.4蓝色视图高度约束
    NSLayoutConstraint *blueHeight =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:margain*2];
    [blueView addConstraint:blueHeight];
    
    ////////////////////////////////////////////////////////////////////////////////
    
    
    
  
    //*************************************************3.红色约束*********************
       //3.红色约束
     //3.1红色视图右边约束
     NSLayoutConstraint *RedRight =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight
     relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
     [self.view addConstraint:RedRight];
     
     //3.2红色视图高度边约束
     NSLayoutConstraint *RedHight =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
     [self.view addConstraint:RedHight];
     
     //3.3红色视图左边约束
     NSLayoutConstraint *RedLeft =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5  constant:0.0];
     [self.view addConstraint:RedLeft];
     
     //3.4红色视图顶部边约束
     NSLayoutConstraint *RedTop =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margain];
     [self.view addConstraint:RedTop];
    ////////////////////////////////////////////////////////////////////////////////
 
   }

其中 NSLayoutConstraint *blueLeft =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margain];
    [self.view addConstraint:blueLeft];


     这段代码:左边间距 =  self.view左边间距   x 1.0 +  margain

 

 

一个NSLayoutConstraint对象就代表一个约束

创建约束对象的常用方法

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

view1 :要约束的控件

attr1 :约束的类型(做怎样的约束)

relation :与参照控件之间的关系

view2 :参照的控件

attr2 :约束的类型(做怎样的约束)

multiplier :乘数

c :常量

自动布局有个核心公式

obj1.property1 =obj2.property2 * multiplier+ constant value

© 著作权归作者所有

tb_engineer
粉丝 8
博文 24
码字总数 6322
作品 0
广州
程序员
私信 提问
translatesAutoresizingMaskIntoConstraints 详解

translatesAutoresizingMaskIntoConstraints 把 autoresizingMask 转换为 Constraints 即:可以把 frame ,bouds,center 方式布局的视图自动转化为约束形式。(此时该视图上约束已经足够 不...

iOS_愛OS
2017/12/28
0
0
ios8 iOS Auto Layout

引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Auto Layout是一...

AK_47
2014/10/31
2.4K
0
iOS开发之Autolayout

非盈利无广告开发者专用网址导航:www.dev666.com 1、概述 在以前的iOS程序中,是如何设置布局UI界面的? (1)经常编写大量的坐标计算代码 (2)为了保证在3.5 inch和4.0 inch屏幕上都能有完...

feng_blog
2015/08/31
3.7K
5
iOS开发tips-UIScrollView的Autlayout布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jianxin160/article/details/57075059 UIScrollViewj尽管继承于UIView,但它是一个相对比较特殊的视图,特别是...

KenshinCui
2017/02/25
0
0
自动布局(autoLayout)演练2

那这一篇的练手的任务是: 如上图:红色记号代表间距都是20,两图片的高度都为40,最重要的一点:两图片的右边距(Trailing)对齐 1.添加两个uiview,我这是用的是storyboard拖的,两个uivie...

tb_engineer
2015/04/12
245
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部