你的位置:首页 > 操作系统

[操作系统]AutoLayout自动布局 NSLayoutConstraint 视图约束(代码和storyboard )使用


1.代码实现:

ViewController.m

 1 #import "ViewController.h" 2  3 @interface ViewController () 4  5 @end 6  7 @implementation ViewController 8  9 - (void)viewDidLoad {10   [super viewDidLoad];11   //创建添加blueview12   UIView *blueView=[[UIView alloc] init];13   blueView.backgroundColor = [UIColor blueColor];14   blueView.translatesAutoresizingMaskIntoConstraints = NO;//禁止Autoresizing15   [self.view addSubview:blueView];16   17   //创建添加redView18   UIView *redView=[[UIView alloc] init];19   redView.backgroundColor = [UIColor redColor];20   redView.translatesAutoresizingMaskIntoConstraints = NO;21   [self.view addSubview:redView];22   23   // 1.0父View左边 约束 blueView左边 3024   NSLayoutConstraint *blueLeftCon=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30.0];25   [self.view addConstraint:blueLeftCon];26   27   // 1.1父View顶部 约束 blueView顶部 3028   NSLayoutConstraint *blueTopCon=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30.0 ];29   [self.view addConstraint:blueTopCon];30   31   // 1.2父View右边 约束 blueView右边 3032   NSLayoutConstraint *blueRightCon= [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30 ];33   [self.view addConstraint:blueRightCon];34   35   // 1.3 blueView 相当于 高度设置成5036   NSLayoutConstraint *blueHeightCon=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0 constant:50];37   [blueView addConstraint:blueHeightCon];38 39   //2.0 redView 顶部 和 blueView 底部 间距2040   NSLayoutConstraint *redTopCon=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];41   [self.view addConstraint:redTopCon];42 43   //2.1 redView 左边 和 blueView 水平中心线对齐44   NSLayoutConstraint *redLeftCon=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual  toItem:blueView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];45   [self.view addConstraint:redLeftCon];46   47   //2.2 redView 右边 参照 blueView 右边对齐48   NSLayoutConstraint *redRightCon = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];49   [self.view addConstraint:redRightCon];50 51   //2.3 redView 高度 参照 blueView 高度相等52   NSLayoutConstraint *redHeightCon=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];53   [self.view addConstraint:redHeightCon];54   55 }56 57 @end

View Code

 

2.storyboard实现:  

效果: