TAG

RSS订阅

收藏本站

设为首页

当前位置:主页 > 移动开发 > IOS开发 >

xcode6下使用autolayout+sizeclass适配方式

发布时间:2015-03-30 15:47 类别:IOS开发

转转:http://blog.csdn.net/mmoaay/article/details/42240949
、历史车轮滚滚向前,将autolayout配合sizeclass做布局的方式推上了主流,虽然有点晚,但最终还是进行了一次完整的实践,特此记录一下:

因为网上已经有很多博客介绍了autolayout配合sizeclass布局的原理,所以我着重记录一下自己实践的过程:(可能会有错误,大家多多指正)

先来看看最终效果:

 

iPhone竖屏

iPhone横屏

iPad竖屏

iPad横屏

首先我们对最终效果进行分析,得出如下结论:

1.该布局适应设备包括iPhone和iPad。

2.iPhone横屏,iPad横屏和竖屏的布局是一致的(方式1),iPhone竖屏的布局是单独的(方式2)。

3.方式1和方式2边距都是一致的(8px);红色方块和黄色方块并排,红色方块宽高固定(100px);黄色方块高度固定(100px),宽度自适应屏幕;绿色方块和蓝色方块高度固定(160px)。

4.方式1红色、黄色、绿色和蓝色方块的间距均为4px;绿色方块和蓝色方块并排,宽度相等且自适应屏幕。

5.方式2红色方块和黄色方块的间距为0px,其他各方块的间距均为4px;蓝色方块在绿色方块下方,宽度自适应屏幕。

分析完毕,我们开始一步步实现这些效果:

第一步:创建一个single view application项目,注意Devices选项选择Universal。

第二步:打开Main.stroyboard,创建相应的View并调整它们的位置如下图(调整的办法用过storyboard的人应该都知道):

注:红框中的部分是iOS8中新增的sizeclass特性。点击该区域会弹出如下的界面:

中间的九宫格控制了布局适应哪些设备的横屏和竖屏。具体原理参考这个博客:http://blog.csdn.net/lihuiqwertyuiop/article/details/39271887(ps:我就是看这个看明白原理的,所以我自己就不废话了)。

在之前的分析中我们得到了iPhone横屏、iPhone竖屏、iPad横屏和iPad竖屏下布局的几个共性。对于这些共性的东西,我们在wAny hAny这种模式下编辑,因为wAny hAny模式下的布局对所有设备在横屏和竖屏的情况下都有效。

首先设置红色方块的属性,如下图:

宽度和高度约束为100px,居上0px,居左-8px(截图和文字不一样是因为博主傻逼了,忘了改……因为默认对齐边界是-16px,所以如果需要边距为8px则输入-8px即可,至于为什么默认对齐边界是-16px,博主也不知道)。

然后设置黄色方块的属性,如下图:

高度约束为100px,居上0px,居左-8px(博主继续傻逼)。

注:这里我们没有设置红色方块和黄色方块的间距,因为在iPhone竖屏的情况下它们之间的间距为0px,其他情况为4px,所以我们需要在不同情况对应的布局模式下面去设置间距。

然后设置绿色方块和蓝色方块的属性,如下图:

因为在iPhone竖屏情况下它们不是并排排列的,所以这两个方块在wAny hAny 模式下只约束高度为160px。

接下来开始编辑iPad横屏和竖屏模式下的布局,对九宫格的模式进行切换,如下图:

wRegular hRegular模式,下面有提示:iPad横屏和竖屏下有效,刚好是我们需要的。

但是你会发现布局有些问题,没关系,我们在重新调整各个View的位置和宽度来达到下面这个效果:

然后继续为各个View添加约束,首先是红色和黄色方块的间距,如下图:

在红色方块内按下鼠标右键并拖动鼠标到黄色方块内,然后松开鼠标就会弹出上图所示的菜单,选择Horizontal Spacing,然后在下图所示的界面内将间距修改为4px:

注:在上图所示界面删除约束的操作是:选中约束项,然后backspace删除(不是delete,好诡异的删除方式)

同样的方式可以设置绿色方块、蓝色方块和黄色方块互相的间距。

然后我们来设置蓝色方块和绿色方块宽度相等,如下图:

同时选中蓝色方块和绿色方块,然后点击下方的按钮,在弹出的界面选择Equal Widths即可(你会发现Equal Widths和Equal Widths只在选中两个View的情况下才可用,这是很自然的事情,一个View怎么宽度相等…)。

最后我们设置绿色方块居左-8px,蓝色方块居右-8px,如下图:

至此我们完成了iPad横屏和竖屏情况下的布局。

然后是iPhone横屏情况下的布局,因为布局和iPad竖屏、横屏情况下是一致的,所以具体过程不在描述,只需要将下方的九宫格切换到wAny hCompact模式然后重复上述过程即可。

最后是iPhone竖屏情况下的布局,首先我们把九宫格切换到wCompact hRegular模式,然后调整各个View的位置如下图:

然后用“右键拖线”的方式我们设置红色方块和黄色方块的间距为0px,绿色方块和红色方块的间距为4px,蓝色方块和绿色方块的间距为4px

最后再用下方的按钮设定绿色方块,蓝色方块的左右边距均为-8px,完成iPhone竖屏下的布局。

 

至此目标成功达成。当然实现该布局的方式还有很多,大家在理解之后可以自由发挥。争取用最少的约束来完成这个布局。

 

个人的一些理解:

1.一般的情况下用wAny hAny模式就可以满足业务上的需求

2.设置两个view间距的这种情况用“右键拖线”的方式来设置比较好(因为在view比较多的情况下直接用下方的按钮来设置间距的话,编辑器不知道你是相对哪个view的间距)

3.下图所示的菜单能让你快速查看加上约束后界面的效果、更新和删除约束:

注:慎用Reset to Suggested Constraints(现在系统还没这么智能,说不定就坑死你)

4.如果某个view要固定宽高,一定要设置约束,不设置的话autolayout认为其宽高为0px。

5.如果某个view要水平自动缩放,设定它居左和居右的像素即可。

6.如果界面元素很多,可以考虑分层,把一些view包含在一个父view内,这样可以隔离它们和其他view的关系,界面约束会更加清晰。

7.如果针对不同的设备横屏和竖屏的布局是不一样的,首先要做的就是找到它们布局约束上的共性,在包含设备范围较大模式下把这些约束加上(比如wAny hAny 模式能约束的设备类型就比wCompact wAny模式多),这样就不用在每个布局都加相同的约束,从而减少工作量。但是有时候相同的工作也难以避免(比如上面的例子,iPhone的横屏和iPad的横屏、竖屏分别在两个模式下,虽然它们的布局是一样的,但是还是不得不做两次同样的工作)

8.给每个view起单独的名字,不然约束一多,omg,你知道哪个是哪个么?

猜你会喜欢....

Copyright © 2015 www.wahenzan.com 哇!很赞 版权所有 浙ICP备14030256号-1 Power by DedeCms

浙公网安备 33010602005986号

声明:本站所有文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除 网站管理员:758763728

360网站安全检测平台