天天看點

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

一、概要:前一篇初步的描述了size class的概念,那麼實際中如何使用呢,下面兩個問題是我們一定會遇到的:

1、xcode6中增加了size class,在storyboard中如何使用?

2、auto layout該如何與size class配合來進行ui布局?

二、了解一件新事物的最好的辦法就是實踐,讓我們揭開那神秘的面紗:

例子1、建立一個single view application template項目demo1,拖拽一個newview到rootview上,并設定背景色為綠色, 然後不做任何其他修改,運作項目,模拟器選擇iphone6,運作效果如圖:

橫屏:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

豎屏:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

把模拟器更改為ipad、iphone4s等,然後再旋轉螢幕,發現綠色的newview的位置幾乎沒有變化。檢視document outline發現沒有任何constraint(限制)作用于綠色view上,理論上如果一個view沒有任何constraint,那麼view将沒有位置及大小,但目前來看是沒問題的,何解?

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

檢視view的size inspector,發現秘密了:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

原來如果不給一個view添加任何constraint,系統會自動給view添加左、上、寬、高四個限制,就是說新綠色的view會有固定的寬和高,然後以螢幕左上角為參考點,有一個系統添加的預設位置。(如果我們向綠色view添加任何其他限制,那麼系統自動添加的限制将實效)

還有一個問題是,剛剛切換了很多不同類型的模拟器,相當于切換了不同的size class,但顯示綠色view都正常,而size class的存在的目的就是為了區分不同的size class(例如:iphone4s橫屏wcompact/hcompact,iphone4s豎屏wcompact/hregular,ipad橫豎屏都是wregular/hregular),然後來做不同的ui布局,何解?

檢視目前的size class:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

目前的size class為wany/hany,也就是說在size class為wany/hany的時候添加constraint,在其他size class的時候也生效。其實從字面上也可以看出,any就是任何的意思,compact和regular是any的子類。

例子2、基于iphone适配界面,添加三個view到rootview上,然後無論橫屏還是豎屏,新添加的三個view之間及與螢幕邊框的距離都保持不變的間距20點寬,效果如圖:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解
iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

建立一個single view application template項目demo2,因為要适配iphone橫豎屏,是以修改size class為wcompact/hregular來适配豎屏:

拖拽3個view到rootview上,并設定其背景顔色

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

為了滿足設計要求,要添加如下constraint:

(1)設定綠色view距離superview左邊距和上邊距;

(2)設定黃色view距離superview右邊距和上邊距,相對綠色view的的左邊距;

(3)設定藍色view的左邊距和右邊距和下邊距,上邊距離綠色view下邊的距離;

(4)設定綠色view與黃色view等寬

(5)設定藍色view與綠色view等高

現在開始動手吧:選中綠色view,eidtor->pin->leading space to superview給綠色view添加相對其superview的左邊距,然後選中constraint,修改限制的值為20,其他constraint以此類推:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

添加完如圖:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

其中紅色框部厘清晰的表達了所添加的constraint;

藍色框部分時添加的constraint,目前為黃色線,表明目前的constraint還不能定位view,當一個view的constraint正确的時候,constraint的顔色會變為藍色。

綠色線框的部分表達了constraint的數值,我們想讓邊距為20,是以設定數值為20 。wc

hr installed表明目前constraint适用于wc hr這種size class,不适合any any的size class。

添加綠色view與黃色view之前的距離時候,由于是設定兩個子view的constraint,是以要選中兩個view,然後editor->pin ->horizontal,設定值為20:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

同樣方法editor->pin ->width equally,設定綠色view與黃色view等寬度,藍色view與綠色view等高,結果如圖:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

但發現constraint顔色仍然後黃色,原因是目前view的位置和constraint希望的不一緻,更新下frame(要選中3個view,因為constraint關聯3個view)或者點選document

outline中的黃色小箭頭,然後會看到具體的constraint資訊來一步步調試,這個也是xcode6最有突破的地方:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

然後效果如圖:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

然後運作下項目吧,發現确實和預期的一樣。然後旋轉螢幕,是不是發現橫屏時候白了,螢幕什麼都沒有了?原因是我們僅僅适配的豎屏,橫屏還沒有适配啊!

修改size class,iphone4s橫屏的size class為wcompact/hcompact,而iphone6 plus為wreguage/hcompact,那我們不如設定為wany/hcompact吧!然後安裝上邊适配豎屏的方式适配橫屏。适配好後再次運作,橫豎屏都應該是我們想要的了。

<a target="_blank" href="http://download.csdn.net/detail/zfpp25_/8017107">完整項目下載下傳</a>

例子3、建立一個single view application template項目demo3,添加一個view,是這個view的寬度和高度都是100點寬,并且始終居中于superview,效果如圖:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

這個例子很簡單,也很容易實作,目的是補充以上兩個例子沒有提及到的一些細節。

在rootview上添加一個view,設定背景色為綠色:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

由于不打算區分是哪種ios裝置,是以size class選擇wany/hany,然後綠色的view随便放到superview上就可以,auto layout的理念就是不用去管具體view的frame,要注意的是這個view最終想如何的顯示,屬于基于目的設計的範疇。

這個例子要完成兩件事情:

(1)設定限制使view的寬和高為100點寬

(2)設定限制使view始終居中于superview

先做第(1)件事:選中view,然後editor-&gt;pin-&gt;width,設定為100,同樣方法設定height

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解
iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

然後第(2)件是讓view居中:還是選中view,然後editor -&gt;aligh -&gt;horizontal center in container,同樣方法設定垂直居中對齊:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

然後會發現document outline右上角有一個黃色小箭頭:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

點選黃色箭頭進入structure頁面,可以看到一些提示資訊,可以了解目前布局存在問題,指導下一步該做什麼。在view中看到一個黃色虛線框,這個框代表目前限制得到的view,在structure頁面有一個黃色的點,點選後會提示你如何修改:

iOS8開發~UI布局(二)storyboard中autolayout和size class的使用詳解

選擇update frame就是按照目前的限制去更新view,選擇update constains是按照拖拽進去view的frame更新限制。在這個例子中update frame是我們需要的。然後運作項目看看是不是我們想要的效果吧!

繼續閱讀