• xcode6下使用autolayout+sizeclass实践


    历史车轮滚滚向前,将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,你知道哪个是哪个么?

  • 相关阅读:
    一篇文章看懂mysql中varchar能存多少汉字、数字,以及varchar(100)和varchar(10)的区别
    SQL处理下划线分割的两边数字都分别增加值
    [LeetCode]Binary Tree Zigzag Level Order Traversal
    [LeetCode]Binary Tree Level Order Traversal
    [LeetCode]Candy
    [LeetCode]Single Number II
    [LeetCode]Single Number
    [LeetCode]Copy List with Random Pointer
    [LeetCode]Link List Cycle II
    [LeetCode]Link List Cycle
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/5611458.html
Copyright © 2020-2023  润新知