AutoLayout自動布局,NSLayoutConstraint視圖約束使用

2019-11-14 18:28:34

字體：大中小

供稿：網(wǎng)友

一.方法

 NSLayoutConstraint *constraint =  [NSLayoutConstraint constraintWithItem:<#(id)#> attribute:<#(NSLayoutAttribute)#> relatedBy:<#(NSLayoutRelation)#> toItem:<#(id)#> attribute:<#(NSLayoutAttribute)#> multiplier:<#(CGFloat)#> constant:<#(CGFloat)#>]

Item:要約束的控件

attribute:要約束的控件約束的類型（做怎樣的約束）

relatedBy:與參照控件之間的關(guān)系

toItem:參照的控件

attribute:參照的控件約束的類型（做怎樣的約束）

multiplier:約束的控件和參照的控件關(guān)系倍數(shù)

constant:常量

最后兩個參數(shù)計算關(guān)系：

view1.PRoperty1 =（view2.property2 * multiplier）+ constant

二.Autolayout的常見警告和錯誤

1.警告

控件的frame不匹配所添加的約束, 比如:約束控件的寬度為150, 而控件現(xiàn)在的寬度是160

2.錯誤

缺乏必要的約束, 比如:只約束了寬度和高度, 沒有約束具體的位置

兩個約束沖突,比如:1個約束控件的寬度為150, 1個約束控件的寬度為160

三.例子

1.代碼實現(xiàn)：

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     //創(chuàng)建添加blueview12     UIView *blueView=[[UIView alloc] init];13     blueView.backgroundColor = [UIColor blueColor];14     blueView.translatesAutoresizingMaskIntoConstraints = NO;//禁止Autoresizing15     [self.view addSubview:blueView];16     17     //創(chuàng)建添加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 相當于 高度設(shè)置成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