UI AutoLayer 自动布局-->约束

来源：互联网发布：基于tp框架的cms 编辑：程序博客网时间：2024/05/16 17:48

AutoLayer 自动布局-->约束

// ViewController.m

// Tank_UI_05

// Created by ibokan on 16/1/11.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

AutoLayout 由来

iOS6之后出现的一种新的布局方式,用于取代原先的Autoresizing系统的布局方式,

AutoLayout是指定视图和父视图或视图和兄弟视图的关系来布局

在AutoLayout当中,我们使用约束来描述视图与视图之间的关系

OC专门为开发者封装了一个类NSLayoutConstraint来帮助开发者描述布局

// [NSLayoutConstraint constraintWithItem:<#(nonnull id)#> attribute:<#(NSLayoutAttribute)#> relatedBy:<#(NSLayoutRelation)#> toItem:<#(nullable id)#> attribute:<#(NSLayoutAttribute)#> multiplier:<#(CGFloat)#> constant:<#(CGFloat)#>

以上参数的意义:

WithItem:约束中两个视图对象其中之一()

第一个attribute:描述视图的对齐特征

relatedBy:描述两个视图attribute关系

toItem:被约束的视图对象(之二)

第二个attribute:跟第一个一样

multiplier:缩放比例

constant:偏移量

公式:

视图1.属性关系视图2.属性 *缩放比例 + 偏移量

(如果注意是属性是哪个)

视图1.左边 ==视图2.左边 * 1 +0 //左对齐

[NSLayoutConstraint constraintWithItem:视图1 attribute:左边 relatedBy:等于 toItem:视图2 attribute:左边 multiplier:1 constant:0];

视图1.宽度 == 100 //(大小并无约束)

[NSLayoutConstraint constraintWithItem:视图1 attribute:宽度 relatedBy:等于 toItem:nil (不需要与其他视图对比,所以写nil)attribute:等于宽度 (因为是枚举,所以不能写nil) multiplier:1 constant:100];

UIView *view1 = [UIViewnew];

view1.backgroundColor = [UIColorredColor];

//启动autoLayout布局

view1.translatesAutoresizingMaskIntoConstraints =NO; //要使用autolay的话一定要这句

[self.viewaddSubview:view1]; //self.view 是屏幕,在下面的toItem里面有

NSLayoutConstraint *constraint1 = [NSLayoutConstraintconstraintWithItem:view1 attribute:NSLayoutAttributeCenterXrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeCenterXmultiplier:1constant:0];

[self.viewaddConstraint:constraint1];

NSLayoutConstraint *constraint2 = [NSLayoutConstraintconstraintWithItem:view1 attribute:NSLayoutAttributeCenterYrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeCenterYmultiplier:1constant:0];

[self.viewaddConstraint:constraint2];

NSLayoutConstraint *constraint3 = [NSLayoutConstraintconstraintWithItem:view1 attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:nilattribute:NSLayoutAttributeWidthmultiplier:1constant:100];

[self.viewaddConstraint:constraint3];

NSLayoutConstraint *constraint4 = [NSLayoutConstraintconstraintWithItem:view1 attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:nilattribute: NSLayoutAttributeHeightmultiplier:1constant:100];

[self.viewaddConstraint:constraint4];

/*--------------------------*/

UIView *view2 = [UIViewnew];

view2.backgroundColor = [UIColorblackColor];

view2.translatesAutoresizingMaskIntoConstraints =NO;

[self.viewaddSubview:view2];

NSLayoutConstraint *constranint5 = [NSLayoutConstraintconstraintWithItem:view2 attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeRightmultiplier:1constant:0];

[self.viewaddConstraint:constranint5];

NSLayoutConstraint *constranint6 = [NSLayoutConstraintconstraintWithItem:view2 attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeBottommultiplier:1constant:0];

[self.viewaddConstraint:constranint6];

// NSLayoutConstraint *constranint7 = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeWidth multiplier:0.5 constant:50];

// [self.view addConstraint:constranint7]; toItem:如果是nil的话就是无约束,自己设置自己的偏移量

NSLayoutConstraint *constranint7 = [NSLayoutConstraintconstraintWithItem:view2 attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeWidthmultiplier:0.5constant:0];

[self.viewaddConstraint:constranint7];//如果toItem后面是对象的话就是根据这个对象来约束自己的缩放量

// NSLayoutConstraint *constranint8 = [NSLayoutConstraint constraintWithItem:view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1 constant:100];

// [self.view addConstraint:constranint8];

NSLayoutConstraint *constranint8 = [NSLayoutConstraintconstraintWithItem:view2 attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeHeightmultiplier:1constant:0];

[self.viewaddConstraint:constranint8];

UIView *view3 = [UIViewnew];

view3.backgroundColor = [UIColorcolorWithRed:97/255.0green:192/255.0blue:245/255.0alpha:1]; //如果/255后没有.0,则取整数,这时为黑色,有.0时,这时可以取小数,所以颜色会不同,因为这里是CGPoint,所以这里要取.0

view3.translatesAutoresizingMaskIntoConstraints =NO;

[self.viewaddSubview:view3];

NSLayoutConstraint *constraint9 = [NSLayoutConstraintconstraintWithItem:view3 attribute:NSLayoutAttributeBottomrelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeTopmultiplier:1constant:0];

[self.viewaddConstraint:constraint9];

NSLayoutConstraint *constraint10 = [NSLayoutConstraintconstraintWithItem:view3 attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeRightmultiplier:1constant:0];

[self.viewaddConstraint:constraint10];

NSLayoutConstraint *constraint11 = [NSLayoutConstraintconstraintWithItem:view3 attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:view1 attribute:NSLayoutAttributeWidthmultiplier:1.5constant:0];

// view3 的宽度 == view1 的宽度的缩放量的1.5倍,偏移量为 0 ;

[self.viewaddConstraint:constraint11];

NSLayoutConstraint *constraint12 = [NSLayoutConstraintconstraintWithItem:view3 attribute:NSLayoutAttributeHeightrelatedBy:0toItem:nilattribute:NSLayoutAttributeHeightmultiplier:1constant:100];

// view3 的高度 == nil(没有对比,那就跟自己对比)自己的高度的缩放量的1倍,偏移量为从y位置偏移100;但一般不写在偏移量,偏移量一般写在位置上,说大小时一般写缩放量.

[self.viewaddConstraint:constraint12];

}

- (void)didReceiveMemoryWarning {

[superdidReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

如果是在main.storyBoard操作的话如下图:

0 0