iOS開發－自動佈局之autoresizingMask使用詳解（Storyboard&Code）

前言：如今已經不像之前那樣只有一個尺寸，如今最少的IPHONE開發須要最少須要適配三個尺寸。所以之前咱們可使用硬座標去設定各個控件的位置，可是如今的話已經不能夠了，咱們須要去作適配，也許你說可使用兩套UI或兩套以上的UI，但那樣不高效也不符合設計。IOS有兩大自動佈局利器：autoresizing 和 autolayout（autolayout是IOS6之後新增）。autoresizing是UIView的屬性，一直存在，使用也比較簡單，可是沒有autolayout那樣強大。若是你的界面比較簡單，要求的細節沒有那麼高，那麼你徹底可使用autoresizing去進行自動佈局。如下會針對autoresizing進行討論。

 

0、autoresizing使用前的解釋：

UIViewAutoresizing是一個枚舉類型，默認是UIViewAutoresizingNone，也就是不作任何處理。

typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
    UIViewAutoresizingNone                 = 0,
    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
    UIViewAutoresizingFlexibleWidth        = 1 << 1,
    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
    UIViewAutoresizingFlexibleHeight       = 1 << 4,
    UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};

 

各屬性解釋：

UIViewAutoresizingNone	不會隨父視圖的改變而改變
UIViewAutoresizingFlexibleLeftMargin	自動調整view與父視圖左邊距，以保證右邊距不變
UIViewAutoresizingFlexibleWidth	自動調整view的寬度，保證左邊距和右邊距不變
UIViewAutoresizingFlexibleRightMargin	自動調整view與父視圖右邊距，以保證左邊距不變
UIViewAutoresizingFlexibleTopMargin	自動調整view與父視圖上邊距，以保證下邊距不變
UIViewAutoresizingFlexibleHeight	自動調整view的高度，以保證上邊距和下邊距不變
UIViewAutoresizingFlexibleBottomMargin	自動調整view與父視圖的下邊距，以保證上邊距不變

 

 

 

 

 

 

 

 

 

 

 

 

 

 

在這裏說明一下，若是是常用Storyboard/Xib設置autoresizing，那麼轉變使用代碼設置autoresizing的話，容易出現理解錯誤問題。好比說UIViewAutoresizingFlexibleTopMargin，也許會被誤認爲是頂部距離不變，實際上是底部距離不變。這個解決辦法也很簡單，只須要把使用代碼和使用Storyboard設置autoresizing，它們是相反的，只須要這樣去記就能夠了。

 

autoresizing組合使用：

也就是枚舉中的值可使用|隔開，同時擁有多個值的功能，能夠針對不一樣的場景做不一樣的變化。例如：

UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin

意思是：view的寬度按照父視圖的寬度比例進行縮放，距離父視圖頂部距離不變。

其它的組合相似，我這裏就不一一列舉了。

 

注意：

1）view的autoresizesSubviews屬性爲yes時（默認爲yes），autoresizing纔會生效。

2）從XCODE6開始，Storyboard&Xib默認是自動佈局，所以咱們須要手動調整，才能使用autoresizing。

具體操做如圖（打開Storyboard文件，你就會看到下面圖的界面）：

 

下面會寫一個簡單的例子以給予大家更直觀的理解，並會在本文最後附上Demo下載地址，請繼續往下觀看噢。

Demo：

1）頂部距離父視圖距離不變

2）寬度按父視圖比例進行拉伸 

3）view與父視圖的左邊距和右邊距不變

 

1、使用代碼（Code）控制autoresizingMask

下面是項目用到的宏：

#define topSpace 64
#define kMargin 20

#define kTopViewHeight 44
#define kTopViewWidth 300

#define kTextLabelWidth 200
#define kTextLabelHeight 30

 

沒有作適配以前的代碼：

// 以Iphone4（320， 480）爲基礎，設置各控件的位置
// 注意：必須全部控件都按照Iphone4（320， 480）爲基礎初始化一次，否則按比例縮放時會發生錯誤！
UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(kMargin, topSpace, kTopViewWidth, kTopViewHeight)];
CGFloat textLabelTop = (topView.frame.size.width - kTextLabelWidth) / 2;
CGFloat textLabelWidth = (topView.frame.size.height - kTextLabelHeight) / 2;
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(textLabelTop, textLabelWidth, kTextLabelWidth, kTextLabelHeight)];

// 設置文字及居中
[textLabel setText:@"Garvey"];
[textLabel setTextAlignment:NSTextAlignmentCenter];

// 分別設置樣式
[topView setBackgroundColor:[UIColor redColor]];
[textLabel setTextColor:[UIColor whiteColor]];// 添加視圖
[topView addSubview:textLabel];
[self.view addSubview:topView];

 

它將會顯示：

使用autoresizing進行界面適配：

補充：你能夠先按其它的設備尺寸爲界面上的控件初始化，由於autoresizing是會以父視圖的改變而改變。

// 以Iphone4（320， 480）爲基礎，設置各控件的位置
// 注意：必須全部控件都按照Iphone4（320， 480）爲基礎初始化一次，否則按比例縮放時會發生錯誤！
UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(kMargin, kTopSpace, kTopViewWidth, kTopViewHeight)];
CGFloat textLabelTop = (topView.frame.size.width - kTextLabelWidth) / 2;
CGFloat textLabelWidth = (topView.frame.size.height - kTextLabelHeight) / 2;
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(textLabelTop, textLabelWidth, kTextLabelWidth, kTextLabelHeight)];

// 設置文字及居中
[textLabel setText:@"Garvey"];
[textLabel setTextAlignment:NSTextAlignmentCenter];

// 分別設置樣式
[topView setBackgroundColor:[UIColor redColor]];
[textLabel setTextColor:[UIColor whiteColor]];

// 設置文字控件的寬度按照上一級視圖（topView）的比例進行縮放
[textLabel setAutoresizingMask:UIViewAutoresizingFlexibleWidth];
// 設置View控件的寬度按照父視圖的比例進行縮放，距離父視圖頂部、左邊距和右邊距的距離不變
[topView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin];

// 添加視圖
[topView addSubview:textLabel];
[self.view addSubview:topView];

// 注意：從新設置topView位置的代碼，必需要寫在添加視圖的後面，否則autoresizing的位置計算會出錯！
CGFloat topViewWidth = kUIScreen.size.width - kMargin * 2;
[topView setFrame:CGRectMake(kMargin, kTopSpace, topViewWidth, kTopViewHeight)];

 

最後顯示：

  

2、在Storyboard控制autoresizingMask

Storyboard上只有兩個控件，View 和 Label。

 

若是咱們不作任何的適配方案，它將會顯示：

默認是是貼近左上方，在Autoresizing上能夠看到：

 

其實要作到目標顯示那樣也是很是簡單的，兩個控件以下設置：

意思是：

1）頂部距離父視圖距離不變

2）寬度按父視圖比例進行拉伸 

3）view與父視圖的左邊距和右邊距不變

 

最後顯示：

 

小結：

對比以上兩個使用方法，是否是以爲使用代碼去進行autoresizing的控制，會相對於比較麻煩。

若是是使用Stroyboard/Xib的話就會很是簡單，只須要點擊幾個地方就能夠了，看你們選擇哪一種方法。

 

Demo下載：http://pan.baidu.com/s/1qWnxsZU

 

官方自帶預告：將來會進行autolayout的研究，會把研究後所獲得的收穫會和你們分享，請你們關注一下咯，謝謝。

 

---

博文做者：GarveyCalvin

博文出處：http://www.cnblogs.com/GarveyCalvin/

本文版權歸做者和博客園共有，歡迎轉載，但須保留此段聲明，並給出原文連接，謝謝合做！