iOS 6 Auto Layout NSLayoutConstraint 界面布局

终于ios 6推出了正式版本，同时也随之iphone5的面试，对于ios开发者来说，也许会感觉到一些苦恼。那就是原本开发的程序，需要大量的修改了。为了适应最新的iphone5的屏幕。

在WWDC2012里苹果推出了，Auto Layout的概念。我们可以通过Auto Layout来适应屏幕的改变。

比如我们要做一个如下的界面。



如果按照以前的frame的方式的话，大概代码如下

[csharp] view
plaincopy

01 UIView *myview = [[UIView alloc] init];

02 myview.backgroundColor = [UIColor greenColor];

03 UIView *redView = [[UIView alloc] init];

04 redView.backgroundColor = [UIColor redColor];

05 UIView *blueView = [[UIView alloc] init];

06 blueView.backgroundColor = [UIColor blueColor];

07 [myview addSubview:redView];

08 [myview addSubview:blueView];

09 redView.frame = CGRectMake(50, 80, 100, 30);

10 blueView.frame = CGRectMake(180, 80, 100, 30);

11 self.view = myview;

通过上面的代码我们就能很简单的实现上面的布局效果了，但是使用auto layout的时候我们需要使用如下代码来实现。

[csharp] view
plaincopy

01 UIView *myview = [[UIView alloc] init];

02

03 myview.backgroundColor = [UIColor greenColor];

04

05 UIView *redView = [[UIView alloc] init];

06

07 redView.backgroundColor = [UIColor redColor];

08

09 UIView *blueView = [[UIView alloc] init];

10

11 blueView.backgroundColor = [UIColor blueColor];

12

13 [myview addSubview:redView];

14

15 [myview addSubview:blueView];

16

17 [myview setTranslatesAutoresizingMaskIntoConstraints:NO];

18

19 [redView setTranslatesAutoresizingMaskIntoConstraints:NO];

20

21 [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];

22

23 NSMutableArray *tmpConstraints = [NSMutableArray array];

24

25 [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"|-50-[redView(==100)]-30-[blueView(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)]];

26

27 [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];

28

29 [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[blueView(==redView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView,redView)]];

30

31 [myview addConstraints:tmpConstraints];

32

33 self.view = myview;

最后对于向下兼容的时候我们可以通过

[csharp] view
plaincopy

1 if([myview respondsToSelector:@selector(addConstraints:)]){

2

3 //支持auto layout

4

5 }else{

6

7 //不支持

8

9 }

随着iphone 5的推出，在开发应用程序的时候我们不得不开始很认真的考虑关于屏幕大小的问题了，在iphone 5之前，我们在开发iphone应用程序的时候我们只需要考虑Retina屏幕就可以了，这个很简单基本是要准备一个xxx@2x.png图片就可以了。应用程序在运行的时候会自动判断屏幕的大小来选择不同的图片来显示。然而iphone
5出来之后发现屏幕变高了。现在屏幕的高度变为568px了。所以不得不从新考虑一下如何才能应对屏幕大小的问题了。

目前可以解决的方法，似乎有俩种方法。

Autoresizing Mask

[csharp] view
plaincopy

01 enum {

02 UIViewAutoresizingNone = 0,

03 UIViewAutoresizingFlexibleLeftMargin = 1 << 0,

04 UIViewAutoresizingFlexibleWidth = 1 << 1,

05 UIViewAutoresizingFlexibleRightMargin = 1 << 2,

06 UIViewAutoresizingFlexibleTopMargin = 1 << 3,

07 UIViewAutoresizingFlexibleHeight = 1 << 4,

08 UIViewAutoresizingFlexibleBottomMargin = 1 << 5

09 };

10 typedef NSUInteger UIViewAutoresizing

通过autoresizing来调整这个页面的布局。或者也可以通过storyboard来调整布局。



对于，这个方法我相信大家一定都很了解了。所以不多说了。

AutoLayout



AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化

废话不多了，直接通过实例来说一下，如何使用autoLayout。

首先打开xcode（4.5版本），创建一个新的项目。



给项目取个名字就叫做【Autolayout】吧。



下面来看一看Storyboard文件，会发现已经默认把use Autolayout打上对号了



这样我们就可以使用autolayou的布局方式来设置了。（如果不想使用autolayout的话，可以将这个对号去掉。这样就使用以前的frame的方式了）

在xcode4.5的interface builder里会发现多出来几个按钮。



下面直接拖拽一个view到storyboard里



续前一篇，继续来说一说AutoLayout。我只是一个小菜鸟有什么不对大的大家请多多指教。自己最不擅长的就是写东西了。如果有什么读起来很不明白的。请多多原谅啊。

随着iphone 5的推出，在开发应用程序的时候我们不得不开始很认真的考虑关于屏幕大小的问题了，在iphone 5之前，我们在开发iphone应用程序的时候我们只需要考虑Retina屏幕就可以了，这个很简单基本是要准备一个xxx@2x.png图片就可以了。应用程序在运行的时候会自动判断屏幕的大小来选择不同的图片来显示。然而iphone
5出来之后发现屏幕变高了。现在屏幕的高度变为568px了。所以不得不从新考虑一下如何才能应对屏幕大小的问题了。

目前可以解决的方法，似乎有俩种方法。

Autoresizing Mask

01

enum {

02	UIViewAutoresizingNone = 0,

03	UIViewAutoresizingFlexibleLeftMargin = 1 << 0,

04	UIViewAutoresizingFlexibleWidth = 1 << 1,

05	UIViewAutoresizingFlexibleRightMargin = 1 << 2,

06	UIViewAutoresizingFlexibleTopMargin = 1 << 3,

07	UIViewAutoresizingFlexibleHeight = 1 << 4,

08	UIViewAutoresizingFlexibleBottomMargin = 1 << 5

09

};

10	typedef NSUInteger UIViewAutoresizing

通过autoresizing来调整这个页面的布局。或者也可以通过storyboard来调整布局。



对于，这个方法我相信大家一定都很了解了。所以不多说了。

AutoLayout



AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。使用AutoLayout的话，就变为了使用约束条件来定义view的位置和尺寸。这样的最大好处是一举解决了不同分辨率和屏幕尺寸下view的适配问题，另外也简化了旋转时view的位置的定义，原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad或者iPhone5或者以后可能出现的mini
iPad）的时候，始终还在底部之上10像素居中的位置，不会发生变化。—转至http://www.onevcat.com/2012/09/autoayout/

废话不多了，直接通过实例来说一下，如何使用autoLayout。

首先打开xcode（4.5版本），创建一个新的项目。



给项目取个名字就叫做【Autolayout】吧。



下面来看一看Storyboard文件，会发现已经默认把use Autolayout打上对号了



这样我们就可以使用autolayou的布局方式来设置了。（如果不想使用autolayout的话，可以将这个对号去掉。这样就使用以前的frame的方式了）

在xcode4.5的interface builder里会发现多出来几个按钮。



下面直接拖拽一个view到storyboard里



会发现左侧多出了一个constraints的选项了。这个就是autolayout里的约束了。自己观察会发现，他分别约束了对于添加的view相对于他的superview的关系。

这里分别是横向相对于左侧43px,右侧98px,垂直相对于顶部33px,底部252px。

通过这4个约束就能设定添加的view与superview的关系了。

通过模拟器运行一下，看看是什么效果。



下面旋转一下屏幕看看会出现什么样的效果



发现高度发生了变化，为什么会发生这样的变化呢，原因很简单因为在storyboard设置设置约束的时候，相对于底部252px,所以现在屏幕旋转之后绿色的view的高度会变小。

说到这里我想大家已经知道他的工作原理了，那么怎么样才能让他旋转屏幕也可以保持原来的大小呢。回到storyboard里选择如下



在这里选着height，这样就给这个view设置一个了固定高度。



在看看约束发生了什么变化



在添加的绿色view里多出了约束，设置的是这个绿色的view的高度。

接下来在添加一个width的约束，之后把原来的相对于底部和相对于右边的约束给删除了。最后修改之后的效果应该是如下



下面在通过模拟器运行一下，看看会发生什么变化。



旋转屏幕



通过以上操作，我们做到想要的效果了。

我这里主要想说一下，关于动画的问题。通过拖拽的方式给viewcontroller创建一个

NSLayoutConstraint的IBoutlet



之后在添加一个按钮，并且实现IBAction。

下面通过这个代码来实现让绿色小方块向下移动的动画

[csharp] view
plaincopy

1 - (IBAction)buttonClicked:(id)sender {

2 [UIView animateWithDuration:3 animations:^{

3 [self.view removeConstraint:self.topSpace];//先删除原有的对于顶部的约束

4 //接下来通过代码添加一个约束

5 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.greenView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100]];

6 [self.view layoutIfNeeded];//最后使用layoutifneeded方法来从新定义约束，并且产生动画

7 }];

8 }

点击之后





DEMO

转载自：http://blog.csdn.net/eqera/article/details/8137527