iOS8开发~UI布局(二)storyboard中autolayout和size class的使

1、Xcode6中增加了size class,在storyboard中如何使用?

2、auto layout该如何与size class配合来进行UI布局?

二、了解一件新事物的最好的办法就是实践,让我们揭开那神秘的面纱:

例子1、新建一个Single View Application template项目Demo1,拖拽一个newView到rootView上,并设置背景色为绿色, 然后不做任何其他修改,运行项目,模拟器选择iPhone6,运行效果如图:

横屏:

竖屏:

把模拟器更改为iPad、iPhone4s等,然后再旋转屏幕,发现绿色的newView的位置几乎没有变化。查看Document Outline发现没有任何constraint(约束)作用于绿色view上,理论上如果一个view没有任何constraint,那么view将没有位置及大小,但目前来看是没问题的,何解?

查看view的size inspector,发现秘密了:

原来如果不给一个view添加任何constraint,系统会自动给view添加左、上、宽、高四个约束,就是说新绿色的view会有固定的宽和高,然后以屏幕左上角为参考点,有一个系统添加的默认位置。(如果我们向绿色view添加任何其他约束,那么系统自动添加的约束将实效)

还有一个问题是,刚刚切换了很多不同类型的模拟器,相当于切换了不同的size class,但显示绿色view都正常,而size class的存在的目的就是为了区分不同的size class(例如:iPhone4s横屏wCompact/hCompact,iPhone4s竖屏wCompact/hRegular,iPad横竖屏都是wRegular/hRegular),然后来做不同的UI布局,何解?

查看当前的size class:

当前的size class为wAny/hAny,也就是说在size class为wAny/hAny的时候添加constraint,在其他size class的时候也生效。其实从字面上也可以看出,Any就是任何的意思,Compact和Regular是Any的子类。

例子2、基于iPhone适配界面,添加三个view到rootView上,然后无论横屏还是竖屏,新添加的三个view之间及与屏幕边框的距离都保持不变的间距20点宽,效果如图:

新建一个Single View Application template项目Demo2,因为要适配iPhone横竖屏,所以修改size class为wCompact/hRegular来适配竖屏:

拖拽3个view到rootView上,并设置其背景颜色

为了满足设计要求,要添加如下constraint:

(1)设定绿色view距离superview左边距和上边距;

(2)设定黄色view距离superview右边距和上边距,相对绿色view的的左边距;

(3)设定蓝色view的左边距和右边距和下边距,上边距离绿色view下边的距离;

(4)设定绿色view与黄色view等宽

(5)设定蓝色view与绿色view等高

现在开始动手吧:选中绿色view,Eidtor->Pin->Leading Space to Superview给绿色view添加相对其superview的左边距,然后选中constraint,修改约束的值为20,其他constraint以此类推:

添加完如图:

其中红色框部分清晰的表达了所添加的constraint;

到尽头,也许快乐,或有时孤独,如果心在远方,

iOS8开发~UI布局(二)storyboard中autolayout和size class的使

相关文章:

你感兴趣的文章:

标签云: