iOS 8 AutoLayout與Size Class自悟

前言

iOS8和iPhone6發(fā)布已經(jīng)過去蠻久了,廣大的果粉終于迎來了大屏iPhone,再也不用糾結(jié)為大屏買三星舍蘋果了…但是對(duì)于iOS開發(fā)人員來說,迎來了和Android開發(fā)開發(fā)一樣的問題—>各種屏幕的適配(是不是可以要求加工資的節(jié)奏).對(duì)于適配,網(wǎng)傳各種有關(guān)Size Class的論點(diǎn),前段時(shí)間太忙,一直沒去研究,套用+總的話,蘋果在適配方面提供的方法做的比安卓好太多了.自己實(shí)測(cè)之后,確實(shí)很方便0.0(不過,還是想說,適配的核心始終是AutoLayout)

概念初探

iOS8之前,公司在開發(fā)項(xiàng)目時(shí),先做的iPhone版,然后要求開發(fā)iPad版本,其實(shí)內(nèi)容是完全一樣的,只是UI變化了,但是我們就需要建立2個(gè)工程來分別對(duì)應(yīng)實(shí)現(xiàn).iOS8推出的Size Class,可以讓我們?cè)谝粋€(gè)工程的storyboard中進(jìn)行所有尺寸屏幕的適配,不僅是iPhone 4s-5/5s-6-6 Plus,還包括iPad界面.它引入了一種新的概念,拋棄傳統(tǒng)意義上我們適配時(shí)所謂的具體寬高尺寸,把屏幕的寬和高分別分成兩種情況:Compact-緊湊, Regular-正常(Any-任意,其實(shí)就是這2種的組合,所以我沒分成3種情況).搭配起來是3*3,也就是無論如何變化,加起來也就9種,如上圖. 

1.實(shí)際應(yīng)用中,這Compact,Any,Regular如何運(yùn)用呢?

w:Any h:Any 是我們剛建立工程時(shí)候默認(rèn)選擇的,算是一切描述的父類.其他的種類描述都是在此基礎(chǔ)上變化的,比如:如果weight設(shè)為Any，height設(shè)置為Regular，那么在該狀態(tài)下的界面元素在只要height為Regular，無論weight是Regular還是Compact的狀態(tài)中都會(huì)存在.于是:

w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)

w:Regular h:Compact - (w:Any h:Compact , w:Regular h:Any , w:Any h:Any)

w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)

w:Regular h:Regular - (w:Any h:Regular , w:Regular h:Any , w:Any h:Any) 

2. 再來看一組數(shù)據(jù)和一張圖(國外一位博主給出的,很形象):

iPhone4S,iPhone5/5s,iPhone6

豎屏：(w:Compact h:Regular)

橫屏：(w:Compact h:Compact)

iPhone6 Plus

豎屏：(w:Compact h:Regular)

橫屏：(w:Regular h:Compact)

iPad

豎屏：(w:Regular h:Regular)

橫屏：(w:Regular h:Regular)

3.可以總結(jié)為: 

• 如果項(xiàng)目不支持橫屏顯示,使用w:Compact h:Regular(或者直接取消使用Size Class) 

• 如果項(xiàng)目支持橫屏顯示,使用w:Compact h:Regular+w:Any h:Compact 

• 對(duì)于一些公有的約束(任意組合中都適用),一般放在w:Any h:Any中設(shè)置 

• iPad同理

所以,我覺得Size Class最大的幫助是,解決橫屏適配和iPhone iPad共享一個(gè)設(shè)計(jì)板…(個(gè)人意見) 

試驗(yàn)反饋一

1.首先,先建立一個(gè)工程,展開如下頁面

PS:這是iOS8的新特性,真的用到項(xiàng)目里需要等放棄兼容iOS7 。。。顯然,目前還是不行的 

2.在Any Any情況下,放置一個(gè)Label,并設(shè)置約束上-左-下-右為0-0-20-0

 

3.在Compact Any情況下,又放置一個(gè)Label,并設(shè)置約束上為20

 

4.繼續(xù)在Compact Any情況下,來看看橫屏狀態(tài)下的變化

 

5.最后切換到Regular Any下,完成6 Plus 的橫屏顯示

 

試驗(yàn)反饋二

試驗(yàn)一里面,驗(yàn)證了一下概念中所列舉的各個(gè)屏幕適用的組合,接下來,算是Size Class 解決橫屏的妙用

 

PS:運(yùn)用于,橫屏適配,重新排版豎屏?xí)r候的UI布局 

除了改動(dòng)不同組合下約束,也能改動(dòng)控件在不同組合下是否顯示

試驗(yàn)反饋三

AutoLayout這里不給具體如何設(shè)置,因?yàn)椴恢廊绾螌?感覺還是大家多動(dòng)手去寫,去試,最有效了

下面給出AutoLayout設(shè)置的圖解

簡答測(cè)試Demo結(jié)果圖:

如果不橫屏,也可以直接取消Size Classes(圖不一樣,不同時(shí)間寫的…囧)

 

最終Demo

Demo的Github地址:https://github.com/ConanMTHu/Size-Classes-Demo/tree/master

 

總結(jié)

直接說以后都應(yīng)該使用storyboard＋autolayout感覺是不負(fù)責(zé)的說法，但是深入思考autolayout是很有必要的!

如下情況使用autolayout會(huì)有幫助: 

• 當(dāng)需要展示的內(nèi)容很多并且尺寸不固定; 

• 程序需支持屏幕旋轉(zhuǎn)（主要是iPad程序，iPhone程序橫屏的場景有點(diǎn)非主流,也不排除..手游..); 

• 程序通用于iPhone和iPad(最重要的吧). 

但storyboard中使用autolayout有利有弊，好處當(dāng)然是可視化，實(shí)現(xiàn)簡單功能很節(jié)省時(shí)間，但也有弊端，例如不小心移動(dòng)一個(gè)控件就會(huì)讓弄亂那些約束或者控件一多加上自定義的XXXXXXXX 

轉(zhuǎn)自http://conanmthu.github.io/2014/12/05/AutoLayout/