Size Classes是什麼

轉自：http://www.cnblogs.com/zhw511006/p/3998534.html

Size Classes是什麼

iOS 8在應用界面的可視化設計上添加了一個新的特性-Size Classes，對於任何設備來說，界面的寬度和高度都只分爲兩種描述：正常和緊湊。這樣開發者便可以無視設備具體的尺寸，而是對這兩類和它們的組合進行適配。這樣不論在設計時還是代碼上，我們都可以不再受限於具體的尺寸，而是變成遵循尺寸的視覺感官來進行適配。在Xcode中的具體體現如下圖：

但是我們看到圖中的寬度和高度都是Any,Any是什麼意思呢？如果weight設爲Any，height設置爲Regular，那麼在該狀態下的界面元素在只要height爲Regular，無論weight是Regular還是Compact的狀態中都會存在。這種關係應該叫做繼承關係，具體的四種界面描述與可繼承的界面描述如下：

• 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)

我們知道了iOS 8下面設備界面可以描述爲4種，但是這麼多設備(iPhone4S,iPhone5/5s,iPhone6,iPhone6 Plus,iPad,Apple Watch)具體對應什麼描述呢？經過查看官方文檔和具體實踐得知具體對應關係如下:

• 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)
• Apple Watch(猜測)
  • 豎屏：(w:Compact h:Compact)
  • 橫屏：(w:Compact h:Compact)

Size Classes手寫代碼

爲了表徵Size Classes，Apple在iOS8中引入了一個新的類，UITraitCollection。這個類封裝了像水平和豎直方向的Size Class等信息。iOS8的UIKit中大多數UI的基礎類(包括UIScreen,UIWindow,UIViewController和UIView)都實現了UITraitEnvironment這個接口，通過其中的traitCollection這個屬性，我們可以拿到對應的UITraitCollection對象，從而得知當前的Size Class，並進一步確定界面的佈局。和UIKit中的響應者鏈正好相反，traitCollection將會在view hierarchy中自上而下地進行傳遞。對於沒有指定traitCollection的UI部件，將使用其父節點的traitCollection。這在佈局包含childViewController的界面的時候會相當有用。在UITraitEnvironment這個接口中另一個非常有用的是-traitCollectionDidChange:。在traitCollection發生變化時，這個方法將被調用。在實際操作時，我們往往會在ViewController中重寫-traitCollectionDidChange:或者-willTransitionToTraitCollection:withTransitionCoordinator:方法(對於ViewController來說的話，後者也許是更好的選擇，因爲提供了轉場上下文方便進行動畫；但是對於普通的View來說就只有前面一個方法了)，然後在其中對當前的traitCollection進行判斷，並進行重新佈局以及動畫。代碼看起來大概會是這個樣子：

<span class="line-number" style="margin: 0px; padding: 0px;">1 <span class="line-number" style="margin: 0px; padding: 0px;">2 <span class="line-number" style="margin: 0px; padding: 0px;">3 <span class="line-number" style="margin: 0px; padding: 0px;">4 <span class="line-number" style="margin: 0px; padding: 0px;">5 <span class="line-number" style="margin: 0px; padding: 0px;">6 <span class="line-number" style="margin: 0px; padding: 0px;">7 <span class="line-number" style="margin: 0px; padding: 0px;">8 <span class="line-number" style="margin: 0px; padding: 0px;">9 <span class="line-number" style="margin: 0px; padding: 0px;">10 <span class="line-number" style="margin: 0px; padding: 0px;">11 <span class="line-number" style="margin: 0px; padding: 0px;">12 <span class="line-number" style="margin: 0px; padding: 0px;">13 <span class="line-number" style="margin: 0px; padding: 0px;">14 <span class="line-number" style="margin: 0px; padding: 0px;">15 </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator { [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator]; [coordinator animateAlongsideTransition:^(id <UIViewControllerTransitionCoordinatorContext> context) { if (newCollection.verticalSizeClass == UIUserInterfaceSizeClassCompact) { //To Do: modify something for compact vertical size } else { //To Do: modify something for other vertical size } [self.view setNeedsLayout]; } completion:nil]; }

在兩個To Do處，我們要手寫代碼針對不同的狀態做調整。

Size Classes與Interface Builder

Xcode6中Interface Builder對Size Class有了很強大的支持，xib中可以開啓Size Classes如下圖：

在不同的Size Classes描述下，界面元素可以選擇安裝還是不安裝，具體操作如圖：

Size Classes與Image Asset

Xcode6中Image Asset也支持了Size Class,也就是說,我們可以對不同的Size Class指定不同的圖片了。在Image Asset的編輯面板中選擇某張圖片，Inspector裏現在多了一個Width和Height的組合，添加我們需要對應的Size Class，然後把合適的圖拖上去，這樣在運行時SDK就將從中挑選對應的Size的圖進行替換了。支持Size Class的Image Asset編輯效果如下：