iOS 8 by Tutorials(翻譯1.3)

1.3、Size classes

通用的storyboards真的很棒,但是你也已經發現創立一個單一的layout去顯示所有是優點挑戰。然而Adaptive Layout有更多的工具和技巧來解決這些問題。

adaptive layout中有一個核心概念叫size classes,一個size classes是一個屬性可以應用到任何視圖和視圖控制器 來代替一系列水平或垂直 來顯示的內容。在Xcode6提供2種size classesRegularCompact,儘管他們和視圖的physical(物理)相關,他們也代碼了視圖大小。

下面是size classes應用到不同的設備和方向情況: image

這個是當前設備應用程序的一些size classes,然而你可以在層次視圖上的每一個point重載這些size classes,注意pointpt: image

這些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是這樣的: image

你可以在九宮格中選擇一個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: image

你會立即注意到在預覽助理編輯器中發現2個改變: image

1.界面的形狀改變代表着這是新的size class; 2.下面的bar顏色變成藍色,這表明新的size class在特定的佈局起作用了。

爲了改變佈局,你需要暫時的改變一些約束條件。在自動佈局的術語中有installinguninstalling兩種約束,一種是installing表示正在使用中,另一個uninstalled表示在當前的size class不是激活的。

選中image,打開Size Inspector你可以大概的看到那些約束條件是有效的: image

單擊Align Center X to:Superview,然後按下Delete鍵在當前的size class進行卸載該約束條件。這個約束條件會立刻在storyboard消失然後變灰: image

注意:你可以切換當前的size class 到 Size Inspector的All來看到 卸載的約束條件

雙擊 Size Inspector中卸載的約束條件,這時會有額外的先會出現: image

這表明該約束條件在基礎的佈局中是安裝好的,但是在Any Width | Compact Height佈局中是卸載狀態的,很好,這就是我們現在接下來要做的。

按照相同的步驟來卸載image相關的其它三個約束條件。你的文檔大綱和image的Size Inspector會像這樣的: image

現在你要在這個size class(Any Width | Compact Height)添加必要的約束條件.使用AlignPin菜單選擇Vertically Center in the Container,設置left spacing to nearest neighbor10: image

Ctrl-dragimage到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約束條件,也可以像下面一樣選擇: image

按下Cmd-Delete來卸載該約束條件。在這之前,任何在文檔大綱會顯示卸載的約束條件會爲灰。

爲了適應這個size class你需要添加兩個約束來正確的限制TextContainer的位置。這個視圖的寬度需要設置主界面的一半,並且置頂。理論上,你僅僅需要像以前一樣:Ctrl-drag``TextContainerview controller's view

在文檔大綱中Ctrl-drag``TextContainerview controller's view: image

這時會出現一個菜單欄選擇Top Space to Top Lauyout GuideEqual Widths: image

打開TextContainerSize Inspector,更新剛剛添加的兩個約束條件: 1、Top Space to: Top Layout Guide設置Constant0; 2、Equal Width to: Superview設置Multiplier0.5,注意你需要設置first itemssecond items同上面所說的。雙擊約束條件選擇Reverse First and Second Item

選擇Resolve Auto Layout Issues然後點擊All Views\Update frames,故事版會立刻變成這樣: image

現在的佈局完全改變了,你現在就要完成這個項目了。不要急,因爲還是有一些問題,比如字體大小問題,你會在下一節來解決這些。

2014年11月11日14:38


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章