比如我們要做一個如下的界面。
如果按照以前的frame的方式的話，大概代碼如下
- 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的時候我們需要使用如下代碼來實現。
- 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;
最後對於向下兼容的時候我們可以通過
- 1 if([myview respondsToSelector:@selector(addConstraints:)]){
- 2
- 3 //支持auto layout
- 4
- 5 }else{
- 6
- 7 //不支持
- 8
- 9 }
隨着iphone 5的推出，在開發應用程序的時候我們不得不開始很認真的考慮關於屏幕大小的問題了，在iphone 5之前，我們在開發iphone應用程序的時候我們只需要考慮Retina屏幕就可以了，這個很簡單基本是要準備一個[email protected]圖片就可以了。應用程序在運行的時候會自動判斷屏幕的大小來選擇不同的圖片來顯示。然而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像素居中的位置，不會發生變化
廢話不多了，直接通過實例來說一下，如何使用autoLayout。
首先打開xcode（4.5版本），創建一個新的項目。
給項目取個名字就叫做【Autolayout】吧。
下面來看一看Storyboard文件，會發現已經默認把use Autolayout打上對號了
這樣我們就可以使用autolayou的佈局方式來設置了。（如果不想使用autolayout的話，可以將這個對號去掉。這樣就使用以前的frame的方式了）
在xcode4.5的interface builder裏會發現多出來幾個按鈕。
下面直接拖拽一個view到storyboard裏
續前一篇，繼續來說一說AutoLayout。我只是一個小菜鳥有什麼不對大的大家請多多指教。自己最不擅長的就是寫東西了。如果有什麼讀起來很不明白的。請多多原諒啊。
隨着iphone 5的推出，在開發應用程序的時候我們不得不開始很認真的考慮關於屏幕大小的問題了，在iphone 5之前，我們在開發iphone應用程序的時候我們只需要考慮Retina屏幕就可以了，這個很簡單基本是要準備一個[email protected]圖片就可以了。應用程序在運行的時候會自動判斷屏幕的大小來選擇不同的圖片來顯示。然而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。
下面通過這個代碼來實現讓綠色小方塊向下移動的動畫
- 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 }
點擊之後
