iOS8 Size Classes的理解与使用
2016-01-11 14:18
435 查看
http://joywii.github.io/blog/2014/09/24/ios8-size-classesde-li-jie-yu-shi-yong/
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进行判断,并进行重新布局以及动画。代码看起来大概会是这个样子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | - (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]; } |
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编辑效果如下:
相关文章推荐
- Github上的热门iOS开源项目:AFNetworking、MagicalRecord、BlocksKit以及XVim
- IOS第三方框架集合
- iOS蓝牙连接外设
- IOS利用SDWebImage来下载头像图片
- 关于 NSURLSession 的上传和下载
- iOS Xcode 7 缺少*.dylib库的解决方法
- ios开发必备第三方库
- iOS中判断
- iOS崩溃调试的使用和技巧总结
- iOS 数组越界 Crash处理经验
- IOS4期考核题
- IOS-0812-图片浏览&Tom 猫(笔记)
- iOS 安全
- iOS 安全
- IOS-常用第三方开源框架介绍
- iOS如何转换十三位的时间戳
- iOS应用之间的跳转和传值
- IOS 沙盒路径的机制
- iOS录音功能开发
- 《从零开始自学iOS》_01