首页 > 代码库 > iOS Xcode6 AutoLayout跟Size Classes(4)size classes 的应用

iOS Xcode6 AutoLayout跟Size Classes(4)size classes 的应用

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

要知道Size Classes并不能帮我们自动布局,而是帮助我们来管理不同类型的IB

但是我们看到图中的宽度和高度都是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)

这是下列苹果给出的尺寸

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)


//我们来实验一下

技术分享

新建一个工程我们可以看到xib的下方有一个w Any hAny(这样指的是宽  跟高),我们对照那个上边的尺寸表就知道这个应该是适合所有尺寸,我们来将它变为手机的尺寸

如下

技术分享

我们往上来拖几个控件,作为登录也自动布局不知道的可以看前一篇博文

如下:

技术分享

设置了距离上边邻居40左右20宽度为30(那么它的位置是不是确定了,仔细想想也许不是呢)。

我们来看下效果

在4上:

技术分享

在6 plus上

技术分享

这样看来我们这个是没有问题的

接下来如何来做一个平板的尺寸呢?

如下

技术分享

我们将长跟宽都设置为Regular这就是一个Ipad的尺寸了

我们来还原刚才的那一个页面,在Ipad中我们多添加一个第三方登录按钮

如下:

技术分享

嗯差不多就是这样了,我们来看看效果

在手机上

技术分享

在平板上

技术分享

总体来说size classes就是一个xib管理器,他用来管理我们所有尺寸的xib,并且根据设备的变化而自动来获取这个设备的xib并刷新控件的fram,这样的话, 你一个代码就能适配所有的机型啦。这样是不是很棒呢= =


iOS Xcode6 AutoLayout跟Size Classes(4)size classes 的应用