自動布局之a(chǎn)utoresizingMask使用詳解(Storyboard&Code)

原文地址:http://www.cocoachina.com/ios/20141216/10652.html?

前言:現(xiàn)在已經(jīng)不像以前那樣只有一個尺寸,現(xiàn)在最少的iPhone開發(fā)需要最少需要適配三個尺寸。因此以前我們可以使用硬坐標去設(shè)定各個控件的位置,但是現(xiàn)在的話已經(jīng)不可以了,我們需要去做適配,也許你說可以使用兩套UI或兩套以上的UI,但那樣不高效也不符合設(shè)計。iOS有兩大自動布局利器:autoresizing 和autolayout(autolayout是IOS6以后新增)。autoresizing是UIView的屬性,一直存在,使用也比較簡單,但是沒有autolayout那樣強大。如果你的界面比較簡單,要求的細節(jié)沒有那么高,那么你完全可以使用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

自動調(diào)整view與父視圖左邊距,以保證右邊距不變

UIViewAutoresizingFlexibleWidth

自動調(diào)整view的寬度,保證左邊距和右邊距不變

UIViewAutoresizingFlexibleRightMargin

自動調(diào)整view與父視圖右邊距,以保證左邊距不變

UIViewAutoresizingFlexibleTopMargin

自動調(diào)整view與父視圖上邊距,以保證下邊距不變

UIViewAutoresizingFlexibleHeight

自動調(diào)整view的高度,以保證上邊距和下邊距不變

UIViewAutoresizingFlexibleBottomMargin

自動調(diào)整view與父視圖的下邊距,以保證上邊距不變

在這里說明一下,如果是經(jīng)常使用Storyboard/Xib設(shè)置autoresizing,那么轉(zhuǎn)變使用代碼設(shè)置autoresizing的話,容易出現(xiàn)理解錯誤問題。比如說UIViewAutoresizingFlexibleTopMargin,也許會被誤認為是頂部距離不變,其實是底部距離不變。這個解決辦法也很簡單,只需要把使用代碼和使用Storyboard設(shè)置autoresizing,它們是相反的,只需要這樣去記就可以了。

autoresizing組合使用:

也就是枚舉中的值可以使用|隔開,同時擁有多個值的功能,可以針對不同的場景作不同的變化。例如:

UIViewAutoresizingFlexibleWidth?|?UIViewAutoresizingFlexibleBottomMargin

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

其它的組合類似,我這里就不一一列舉了。

注意:

1)view的autoresizesSubviews屬性為yes時(默認為yes),autoresizing才會生效。

2)從XCODE6開始,Storyboard&Xib默認是自動布局,因此我們需要手動調(diào)整,才能使用autoresizing。

具體操作如圖(打開Storyboard文件,你就會看到下面圖的界面):

下面會寫一個簡單的例子以給予你們更直觀的理解,并會在本文最后附上Demo下載地址,請繼續(xù)往下觀看噢。

Demo:

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

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

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

一、使用代碼(Code)控制autoresizingMask

下面是項目用到的宏:

#define?topSpace?64#define?kMargin?20#define?kTopViewHeight?44#define?kTopViewWidth?300#define?kTextLabelWidth?200#define?kTextLabelHeight?30

沒有做適配之前的代碼:

//?以Iphone4(320,?480)為基礎(chǔ),設(shè)置各控件的位置//?注意:必須所有控件都按照Iphone4(320,?480)為基礎(chǔ)初始化一次,不然按比例縮放時會發(fā)生錯誤!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)];//?設(shè)置文字及居中[textLabel?setText:@"Garvey"];[textLabel?setTextAlignment:NSTextAlignmentCenter];//?分別設(shè)置樣式[topView?setBackgroundColor:[UIColor?redColor]];[textLabel?setTextColor:[UIColor?whiteColor]];//?添加視圖[topView?addSubview:textLabel];[self.view?addSubview:topView];

它將會顯示:

使用autoresizing進行界面適配:

補充:你可以先按其它的設(shè)備尺寸為界面上的控件初始化,因為autoresizing是會以父視圖的改變而改變。

//?以Iphone4(320,?480)為基礎(chǔ),設(shè)置各控件的位置//?注意:必須所有控件都按照Iphone4(320,?480)為基礎(chǔ)初始化一次,不然按比例縮放時會發(fā)生錯誤!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)];//?設(shè)置文字及居中[textLabel?setText:@"Garvey"];[textLabel?setTextAlignment:NSTextAlignmentCenter];//?分別設(shè)置樣式[topView?setBackgroundColor:[UIColor?redColor]];[textLabel?setTextColor:[UIColor?whiteColor]];//?設(shè)置文字控件的寬度按照上一級視圖(topView)的比例進行縮放[textLabel?setAutoresizingMask:UIViewAutoresizingFlexibleWidth];//?設(shè)置View控件的寬度按照父視圖的比例進行縮放,距離父視圖頂部、左邊距和右邊距的距離不變[topView?setAutoresizingMask:UIViewAutoresizingFlexibleWidth?|?UIViewAutoresizingFlexibleBottomMargin?|?UIViewAutoresizingFlexibleRightMargin?|?UIViewAutoresizingFlexibleLeftMargin];//?添加視圖[topView?addSubview:textLabel];[self.view?addSubview:topView];//?注意:重新設(shè)置topView位置的代碼,必須要寫在添加視圖的后面,不然autoresizing的位置計算會出錯!CGFloat?topViewWidth?=?kUIScreen.size.width?-?kMargin?*?2;[topView?setFrame:CGRectMake(kMargin,?kTopSpace,?topViewWidth,?kTopViewHeight)];

最后顯示:

二、在Storyboard控制autoresizingMask

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

如果我們不做任何的適配方案,它將會顯示:

默認是是貼近左上方,在Autoresizing上可以看到:

其實要做到目標顯示那樣也是非常簡單的,兩個控件如下設(shè)置:

意思是:

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

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

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

最后顯示:

小結(jié):

對比以上兩個使用方法,是不是覺得使用代碼去進行autoresizing的控制,會相對于比較麻煩。

如果是使用Stroyboard/Xib的話就會非常簡單,只需要點擊幾個地方就可以了,看大家選擇哪種方法。

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 前言 iPhone自誕生以來,隨著其屏幕尺寸不斷的多樣化,屏幕適配的技術(shù)一直在發(fā)展更新。目前,iOS系統(tǒng)版本已經(jīng)更...
    VV木公子閱讀 15,470評論 24 170
  • 1.尺寸適配1.原因 iOS7中所有導(dǎo)航欄都為半透明,導(dǎo)航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,143評論 1 4
  • 屏幕適配 本章節(jié)主要還是說明如何讓應(yīng)用程序能夠適配在蘋果不同的屏幕和如何讓應(yīng)用中的內(nèi)容在不同的屏幕下能夠正常的放置...
    AlanGe閱讀 733評論 0 2
  • 翻譯自“Auto Layout Guide”。 1 入門 1.1 理解自動布局 自動布局根據(jù)視圖層級結(jié)構(gòu)中視圖上的...
    lakerszhy閱讀 3,721評論 3 26
  • 在這些天我會和我的隊友們彼此留下這輩子永遠也忘記不了的羈絆,在他們的身上留下我永遠的足跡。載著這樣的思索,我開始了...
    乄鎭鈊愛妳_d484閱讀 277評論 0 0