1.3、Size classes
通用的storyboards
真的很棒,但是你也已經發現創立一個單一的layout
去顯示所有是優點挑戰。然而Adaptive Layout
有更多的工具和技巧來解決這些問題。
adaptive layout
中有一個核心概念叫size classes
,一個size classes
是一個屬性可以應用到任何視圖和視圖控制器 來代替一系列水平或垂直 來顯示的內容。在Xcode6
提供2種size classes
:Regular
和Compact
,儘管他們和視圖的physical
(物理)相關,他們也代碼了視圖大小。
下面是size classes
應用到不同的設備和方向情況:
這個是當前設備應用程序的一些size classes
,然而你可以在層次視圖上的每一個point
重載這些size classes
,注意point
是pt
:
這些size classes
在你在view controller
設置一些約束條件時特別在明顯小於screen
大小時非常有用。你會很快看到這點在這個章節裏。彆着急,小夥。
對你及怎麼設計你的應用程序,這意味這什麼呢?儘管你的應用程序知道size classes
, 但是你建立的佈局是未可知的size classes
——也就是說,你所有的size classes
的佈局都是一樣的。
這個在你的設計你自適應佈局階段是很重要的點。首先你得建立一個基類佈局,然後自定義每一個基於不同需求的特定大小的size classes
,不要把每一個size classes
作爲一個完全獨立的設計,想出一個自適應的佈局層次,把所有可以共享的設計爲父類,然後在子類的size classes
座任何必要的修改。
到目前爲止幾乎沒有提到具體的設備配置佈局。這是因爲自適應佈局的核心是 size classes
是脫離特定設備的。這也意味着一個視圖要支持自動佈局要可用於全屏的view controller
也要在包含view controller
有用,雖然它們是不同的外表。
這當然對Apple
也有利,這也擴大了設備在大小
和特性
的空間,而且沒有迫使開發者和設計師重新設計他們的應用程序。
你將使用size classes
來定製iPhone
當前的佈局來限制豎直時不好應付的佈局。
2014年11月10日19:28
處理size classes
點擊Interface Builder
下面欄的w Any h Any
,你會看到size classes
是這樣的:
你可以在九宮格中選擇一個cell
來確定size classes
來顯示storyboard
:你在水平和豎直方向有三種選擇(任意any,固定regular,緊湊compact),所以總共會有3x3=9鍾size class
組合。
注意:這一點在命名上會有輕微的差異,Size classes總是指的是 horzontal 和 vertical——在下一個章節你將學到底層的類:UITraitCollection。然而IB使用的是 width 和 height,其實這明顯是等值的(width = horizonral; height = vertical);這僅僅是兩組不同命名但是其實是一個概念
你目前的佈局是不能再緊湊height起作用的。爲了修護這點,選擇九宮格
爲Any Width | Compact Height
size class:
你會立即注意到在預覽助理編輯器中發現2個改變:
1.界面的形狀改變代表着這是新的size class
; 2.下面的bar顏色變成藍色,這表明新的size class
在特定的佈局起作用了。
爲了改變佈局,你需要暫時的改變一些約束條件。在自動佈局的術語中有installing
和uninstalling
兩種約束,一種是installing
表示正在使用中,另一個uninstalled
表示在當前的size class
不是激活的。
選中image,打開Size Inspector
你可以大概的看到那些約束條件是有效的:
單擊Align Center X to:Superview
,然後按下Delete
鍵在當前的size class
進行卸載該約束條件。這個約束條件會立刻在storyboard
消失然後變灰:
注意:你可以切換當前的size class 到 Size Inspector的All來看到 卸載的約束條件
雙擊
Size Inspector
中卸載的約束條件,這時會有額外的先會出現:
這表明該約束條件在基礎的佈局中是安裝好的,但是在Any Width | Compact Height
佈局中是卸載狀態的,很好,這就是我們現在接下來要做的。
按照相同的步驟來卸載image相關的其它三個約束條件。你的文檔大綱和image的Size Inspector
會像這樣的:
現在你要在這個size class
(Any Width | Compact Height
)添加必要的約束條件.使用Align
和Pin
菜單選擇Vertically Center in the Container
,設置left spacing
to nearest neighbor
爲10
:
Ctrl-drag
image到view controller's view
,在出現的菜單欄中選擇Equal Widths
。
選中image打開Size Inspector
,然後雙擊``Equal Widths to:Superview
約束條件來顯示它的屬性。如果First Item
不是cloud.Width
,則點擊First Item
選中出現的菜單中的Reverse
First and Second Item
,然後將Multiplier
更新爲0.45
。
image的約束條件現在在所有的size classes
都有了正確的設置,但是text container
依舊需要我們的注意。 你需要在這個size class
中改變約束條件使得label
顯示在右邊。(左邊圖片,右邊文本)(橫屏)
TextContainer
視圖內部約束的labels
位置條件在現在能正常工作,但是外部的三個約束條件——pinning left,right,bottom sides of the view
卻不能起作用了。你需要卸載left-hand
這個約束條件。
選中left-hand
約束條件,也可以像下面一樣選擇:
按下Cmd-Delete
來卸載該約束條件。在這之前,任何在文檔大綱會顯示卸載的約束條件會爲灰。
爲了適應這個size class
你需要添加兩個約束來正確的限制TextContainer
的位置。這個視圖的寬度需要設置主界面的一半,並且置頂。理論上,你僅僅需要像以前一樣:Ctrl-drag``TextContainer
到view controller's view
。
在文檔大綱中Ctrl-drag``TextContainer
到view controller's view
:
這時會出現一個菜單欄選擇Top Space to Top Lauyout Guide
和Equal Widths
:
打開TextContainer
的Size Inspector
,更新剛剛添加的兩個約束條件: 1、Top Space to: Top Layout Guide
設置Constant
爲0
; 2、Equal Width to: Superview
設置Multiplier
爲0.5
,注意你需要設置first
items
和second items
同上面所說的。雙擊約束條件選擇Reverse First and Second Item
。
選擇Resolve Auto Layout Issues
然後點擊All Views\Update frames
,故事版會立刻變成這樣:
現在的佈局完全改變了,你現在就要完成這個項目了。不要急,因爲還是有一些問題,比如字體大小問題,你會在下一節來解決這些。
2014年11月11日14:38