Autolayout自动布局实现的方法一：storyboard的实现和代码实现

Autolayout简介

• Autolayout是一种“自动布局”技术，专门用来布局UI界面的， Autolayout最初的引入是在IOS6当中，由于在Xcode 4中Autolayout自动布局当时是很不给力的，所以当时并没有得到大力推广

• 自iOS7（Xcode 5）开始，Autolayout的开发效率得到很大的提升，苹果官方也推荐开发者尽量使用Autolayout来布局UI界面，Autolayout当然也能很轻松地解决屏幕适配的问题

• Autolayout有2个核心概念：参照和约束

Autolayout自动布局方法之一：Main.storyboard的实现

顾名思义，在Main.storyboard拖入可视化的控件进行Autolayout自动布局约束，其实在storyboard拖入控件的Autolayout

• Autolayout常用约束面板之一

QQ20160407-2.jpg

• Autolayout常用约束面板之二

QQ20160407-3.jpg

• Autolayout常用约束面板之三

QQ20160407-4.jpg

Autolayout自动布局方法之二：代码的实现

• 在实际的IOS开发项目中，storyboard中添加的控件不是万能的，有一些功能这些拖拽的控件是无法实现的，那就避免不了需要用代码来添加控件，那么代码添加的控件又如何做Autolayout自动布局呢？实际上就是将storyboard的可视化控件转为代码形式。

UIView *redView = [[UIView alloc]init];
  
  redView.backgroundColor = [UIColor redColor];
  
  redView.translatesAutoresizingMaskIntoConstraints = NO;
  
  [self.view addSubview:redView];
  
  //添加约束，距离顶部20
  NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
  [self.view addConstraint:topConstraint];
  
  //添加约束，距离父控件左边10
  NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:redView.superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:10];
  [self.view addConstraint:leftConstraint];
  
  //添加约束，距离父控件右边10
  NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
  [redView.superview addConstraint:rightConstraint];
  
  //添加约束，固定高度50
  NSLayoutConstraint *widthContraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50];
  [redView addConstraint:widthContraint];
  /** **********************greenView************************ */
UIView *greenView = [[UIView alloc]init]; 
greenView.backgroundColor = [UIColor greenColor];
greenView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:greenView];
  //添加约束，距离顶部20
  NSLayoutConstraint *greenTopConstraint = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
  [self.view addConstraint:greenTopConstraint];
  //添加约束，保持在中间
  NSLayoutConstraint *greenLeftConstraint = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
  [self.view addConstraint:greenLeftConstraint];
  //添加约束，距离父控件右边10
  NSLayoutConstraint *greenRightConstraint = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:greenView.superview attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
  [redView.superview addConstraint:greenRightConstraint];
  //添加约束，固定高度50
  NSLayoutConstraint *greenWidthContraint = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50];
  [greenView addConstraint:greenWidthContraint];

这一段又臭又长的代码最终结果是怎样呢？

QQ20160407-5.jpg

QQ20160407-7.jpg