iOS系统自带的自动布局--NSLayoutContraint

前言

自动布局，我们一般可以直接使用Storyboard和xib完成，但在一个真正的项目中，单纯地使用故事版和xib是远远不够的，在很多地方都需要纯代码的参与，为了更好地满足项目的需求，就需要要我们手工实现了。然，纯代码的自动布局有好几种方式，iOS系统自带的NSLayoutContraint, 还有现在有名的第三方屏幕适配的自动布局的第三方开源框架Masonry，今天，让我们先学习系统自带的NSLayoutContraint, 后面再接着来学习Masonry。

1 一般而言，如果我们使用系统的自动布局NSLayoutContraint，就不需要给View添加frame属性了，因为两者在某些程度上会产生冲突。

创建一个红色的View：

UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];

2 需要注意的是，我们使用NSLayoutContraint自动布局的时候，还需要同时设置属性 translatesAutoresizingMaskIntoConstraints = NO：

redView.translatesAutoresizingMaskIntoConstraints = NO;

因为这是系统默认提供的自动定制大小布局约束的属性，比如我们直接在Storyboard上拖拽一个View，不用设置任何自动布局，run之后依然会显示在屏幕（模拟器）上，也就是说系统会默认给我们添加一些简单的约束，默认为 YES。如果不设置，则会和我们用NSLayoutContraint自动布局产生冲突，这样的情况下，视图或将不显示，或者run eruption。

3 直接上代码，注释在其中

//红色视图距离左边=当前视图（父视图）的左边*1.0+20
NSLayoutConstraint *leftContraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftContraint];

//红色视图距离右边=当前视图（父视图）的右边*1.0-20
NSLayoutConstraint *rightContraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
[self.view addConstraint:rightContraint];

//红色视图的高=100
NSLayoutConstraint *heightContraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
[redView addConstraint:heightContraint];

//红色视图距离顶部 = 当前的视图（父视图）的顶部*1.0+状态栏的高
CGFloat topDistance = [[UIApplication sharedApplication] statusBarFrame].size.height;
NSLayoutConstraint *topContraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:topDistance];
[self.view addConstraint:topContraint];

/*  青色视图的创建与布局  */
UIView *cyanView = [[UIView alloc] init];
cyanView.backgroundColor = [UIColor cyanColor];
[self.view addSubview:cyanView];

cyanView.translatesAutoresizingMaskIntoConstraints = NO;

NSLayoutConstraint *cyanWidthContraint = [NSLayoutConstraint constraintWithItem:cyanView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:cyanWidthContraint];

NSLayoutConstraint *cyanHeightContraint = [NSLayoutConstraint constraintWithItem:cyanView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
[cyanView addConstraint:cyanHeightContraint];

NSLayoutConstraint *centerXContraint = [NSLayoutConstraint constraintWithItem:cyanView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
[self.view addConstraint:centerXContraint];

NSLayoutConstraint *cyanTopContraint = [NSLayoutConstraint constraintWithItem:cyanView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:cyanTopContraint];

要注意的是，在创建NSLayoutContraint的时候，里面的参数需要注意：

[NSLayoutConstraint constraintWithItem:需要布局的视图 attribute:需要布局视图的属性（上、左、下、右） relatedBy:比较（=、>=、<=) toItem:参照的视图（可以是父视图，也可以是兄弟关系的视图） attribute:参照的视图的属性（上、左、下、右） multiplier:倍数 constant:需要加的数]；

//另外，如果所参照的视图为父视图或者兄弟视图的时候，则约束要添加到父视图上，如：

//父子视图关系
NSLayoutConstraint *leftContraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:leftContraint];

//兄弟视图关系

NSLayoutConstraint *cyanTopContraint = [NSLayoutConstraint constraintWithItem:cyanView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
[self.view addConstraint:cyanTopContraint];

效果图：



这样，一个简单的自动布局就完成了，虽然原理很简单，通俗易懂。但是，我们都发现，为什么简单的确定一个视图的大小和位置，就需要如此的“兴师动众”,写了如此多的代码，那如果在一个项目中我们也这样去做的话，那很多视图都需要我们亲自去自动布局，那不得累死了？？所以，下一节我们将探讨先进一个牛逼的自动布局的第三方开源框架——Masonry, 使用它可以为我们节省很多时间，而且由于它的链式语法使得它的使用方便、灵活，GitHub下载地址：https://github.com/SnapKit/Masonry。

未完待续… … 如有疏漏之处， 望多多指教。