iOS8 Size Classes的理解与使用

小灰灰 2022-05-16 09:34 63阅读 0赞

原文地址为： [iOS8 Size Classes的理解与使用][iOS8 Size Classes]

### http://joywii.github.io/blog/2014/09/24/[ios][]8-size-[class][]esde-li-jie-yu-shi-yong/ ###

### Size Classes是什么 ###

iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes，对于任何设备来说，界面的宽度和高度都只分为两种描述：`正常`和`紧凑`。这样开发者便可以无视设备具体的尺寸，而是对这两类和它们的组合进行适配。这样不论在设计时还是代码上，我们都可以不再受限于具体的尺寸，而是变成遵循尺寸的视觉感官来进行适配。在Xcode中的具体体现如下图：

![Alt text][]

但是我们看到图中的宽度和高度都是`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部件，将[使用][Link 1]其父节点的`traitCollection`。这在布局包含`childViewController`的界面的时候会相当有用。在`UITraitEnvironment`这个接口中另一个非常有用的是`-traitCollectionDidChange:`。在`traitCollection`发生变化时，这个方法将被调用。在实际操作时，我们往往会在`ViewController`中重写`-traitCollectionDidChange:`或者`-willTransitionToTraitCollection:withTransitionCoordinator:`方法(对于`ViewController`来说的话，后者也许是更好的选择，因为提供了转场上下文方便进行动画；但是对于普通的View来说就只有前面一个方法了)，然后在其中对当前的`traitCollection`进行判断，并进行重新布局以及动画。代码看起来大概会是这个样子：

<table> 
 <tbody> 
 <tr> 
 <td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td> 
 <td><pre><code>- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection withTransitionCoordinator:(id &lt;UIViewControllerTransitionCoordinator&gt;)coordinator {
 [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator]; [coordinator animateAlongsideTransition:^(id &lt;UIViewControllerTransitionCoordinatorContext&gt; 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]; }</code></pre></td> 
 </tr> 
 </tbody> 
</table>

在两个To Do处，我们要手写代码针对不同的状态做调整。

### Size Classes与Interface Builder ###

Xcode6中`Interface Builder`对`Size Class`有了很强大的支持，xib中可以开启Size Classes如下图：

![Alt text][Alt text 1]

在不同的`Size Classes`描述下，界面元素可以选择安装还是不安装，具体操作如图：

![Alt text][Alt text 2]

### Size Classes与Image Asset ###

Xcode6中`Image Asset`也支持了`Size Class`,也就是说,我们可以对不同的`Size Class`指定不同的图片了。在`Image Asset`的编辑面板中选择某张图片，Inspector里现在多了一个`Width`和`Height`的组合，添加我们需要对应的`Size Class`，然后把合适的图拖上去，这样在运行时`SDK`就将从中挑选对应的`Size`的图进行替换了。支持`Size Class`的`Image Asset`编辑效果如下：

![Alt text][Alt text 3]

转载请注明本文地址： [iOS8 Size Classes的理解与使用][iOS8 Size Classes]

[iOS8 Size Classes]: http://www.itdaan.com/blog/2014/09/28/60c9f82bf49c0128871564352a913938.html
[ios]: http://www.javaxxz.com/thread-263708-1-1.html
[class]: http://www.javaxxz.com/thread-282609-1-1.html
[Alt text]: /images/20220516/dd569843cb534e1d9e224d23c366c09d.png
[Link 1]: http://www.javaxxz.com/thread-258488-1-1.html
[Alt text 1]: /images/20220516/da12287111b4431881b5ce0be7e6c936.png
[Alt text 2]: /images/20220516/c0c6e2c2eadc4cfd834a1860d1a8b520.png
[Alt text 3]: /images/20220516/6ba4e5489a224d16bf57f4369d171b14.png