iOS 8 UI布局 AutoLayout及SizeClass(二)

來源:互聯網
上載者:User

iOS 8 UI布局 AutoLayout及SizeClass(二)
一、新特性Size Class介紹

隨著iOS8系統的發布,一個全新的頁面UI布局概念出現,這個新特性將顛覆包括iOS7及之前版本的UI布局方式,這個新特性就是Size Class。Size Class配合Auto Layout可以解決所有(包括iPhone及iPad)iOS裝置螢幕尺寸及旋轉螢幕時候的UI適配問題 。

 

二、為什麼要使用Size Class

直到iPhone6發布後,目前iOS裝置的螢幕尺寸已經有4種了,

 

iPhone6沒出現之前,還可以通過代碼來適配兩種尺寸的UI,但iPhone6發布後,漸漸的發現以前的方式可能真的要淘汰了,因為以後可能還要面對更多的螢幕尺寸。顯然寫入程式碼UI的Frame的時代要過去了,要使用Auto Layout了。

自從iOS6開始就引入了Auto Layout,但一直沒用推廣使用,原因有很多(例如:Auto Layout本身不是很成熟、寫入程式碼可以解決iPhone僅有兩種螢幕尺寸的UI適配、iPhone項目和iPad項目分開來進行等)。

Size Class是配合Auto Layout來使用的,讓Auto Layout方式變得不那麼複雜。

 

三、該如何使用Size Class

要使用Size Class,首先要安裝最新的Xcode6,建立一個Single View Application template項目,選擇Main.storyboard-> View,查看Inspector屬性:

 

預設Size Classes就已經使用了,當然如果不想使用它也可以關掉,然後使用舊的布局方式。但如果選擇使用Size Class,然後關掉Auto Layout,Xcode會彈出一個警告框:(稍後就會明白為什麼!)

選擇cancel,因為接下來要使用Size Classes。

 

Size Classes其實就是將iOS裝置螢幕的Size進行分類,如何分類的呢?

對於iOS裝置(無論iPhone還是iPad),寬度和高度都各分為3種情況:緊湊(Compact)、規則(Regular)、任何(Any)

 

其中“任何”(Any)包含緊湊(Compact)、規則(Regular)類型。如果螢幕寬度用w表示,高度用h表示,那麼w(Regular)/h(Regular)組合就是iPad螢幕尺寸(size)的類別(class),無論iPad橫屏還是豎屏,螢幕尺寸類別都是w(Regular)/h(Regular),可以很清楚的表達。

 

官網也列舉了一些:

 

 

到這裡應該明白了,Size Classes是將螢幕尺寸的種類做了進一步的抽象。那有一個問題,分類的有什麼用?該怎麼用啊?

以前為不同的iOS裝置尺寸或者同尺寸橫豎屏不同適配UI,都要根據實際情況而去計算frame。使用Size Classes是根據當前的螢幕size類型而使用Auto Layout方式進行布局了,要摒棄之前計算frame的思路,而改用相對布局的思維去思考(實際上還是要計算frame)。

而且Xcode6最大的突破也是這裡,不在需要建立不同尺寸的storyboard了,只要建立一個,然後修改其view的size就可以做各種螢幕尺寸的適配,如下:

 

例如我要做iPad頁面設計,就設定成w (Regular)/h(Regular)

 

然後同樣的工程,又要相容橫屏的iPhone6 plus,就可以把view的size class設定成:w (Regular)/h(Compact),然後繼續適配

 

然後當程式跑在不同的裝置上,或者裝置橫屏和豎屏切換,就能顯示相應的UI了。

 

說了這麼多,還是動手實驗一下吧:

適配iPhone6,在RootViewController的view上添加一個新的view,讓這個新的view無論螢幕橫屏還是豎屏時候都距離其superview的邊緣50點寬,並且橫屏時候為綠顏色,豎屏時候為紅顏色。

1、建立項目(剛剛已經建立了一個AL8的項目,不重複步驟了)

2、切換size class為wCompact/hRegular模式

 

並且添加一個view,不用管其frame,並設定其背景色為紅色

 

接下來選中紅色的view,然後點擊Xcode頂部工具列的Editor-Pin,然後分別添加紅色view相對superview邊框的約束(上下左右)

 

添加約束的過程中會看到約束的線是黃顏色,表明當前的約束還不能確定view的frame,需要繼續添加,當添加完4個約束後,約束線的顏色是藍色的,表明當前約束是正確的。

 

然後選中約束,設定約束的值(我們不是想讓新的view距離其superview邊界50點寬嗎!),4個約束都要設定。

 

設定完後點擊下view會自動更新frame,應該是這樣的:

 

3、切換size class為wRegular/hCompact模式,然後重複第二步中的設定,區別是新添加的view背景顏色設定為綠色。

 

4、大功告成,用模擬器運行下吧,模擬器要選擇iPhone6 plus哦!然後旋轉螢幕看看是不是我們想要的效果!

思考:把模擬器切換為iPhone6、iPhone5、iPhone4s、iPad會有什麼現象!下一篇會解釋!

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.