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

推荐阅读更多精彩内容