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

xcode6下使用autolayout+sizeclass实践的更多相关文章

  1. Xcode6中自动布局autolayout和sizeclass的使用

    Xcode6中自动布局autolayout和sizeclass的使用   一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的, ...

  2. 《Node.js在CLI下的工程化体系实践》成都OSC源创汇分享总结

    背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同.常见的类型有组件类.活动类.基于React+redux的业务项目.RN项目.Node.j ...

  3. 读生产环境下go语言最佳实践有感

    最近看了一篇关于go产品开发最佳实践的文章,go-in-procution.作者总结了他们在用go开发过程中的很多实际经验,我们很多其实也用到了,鉴于此,这里就简单的写写读后感,后续我也争取能将这篇文 ...

  4. autolayout sizeclass 资料集锦

    http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2 Core Animation Programming Guid ...

  5. Ios8,Xcode6下 设置Launch Image 启动图片

    1x--320*480  2x--640*960  Retina 4--640*1136  Retina HD5.5--621*1104   Retina HD4.7--375*667

  6. xcode6 下 ios simulator 有 Home 键么?

    4s之前 ,现在,只能用command+shift+h来代替

  7. AutoLayout +Masonary

    1, Masonry介绍与使用实践(快速上手Autolayout) http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayou ...

  8. Xcode 6 AutoLayout Size Classes

    1.基本概念 在iPad和iPhone 5出现之前,iOS设备就唯独一种尺寸. 我们在做屏幕适配时须要考虑的唯独设备方向而已. 而非常多应用并不支持转向,这种话就全然没有屏幕适配的工作了. 随着iPa ...

  9. CI Weekly #5 | 微服务架构下的持续部署与交付

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

随机推荐

  1. Linux设备文件简介(转载)

    Linux 中的设备有2种类型:字符设备(无缓冲且只能顺序存取).块设备(有缓冲且可以随机存取).每个字符设备和块设备都必须有主.次设备号,主设备号相同的设 备是同类设备(使用同一个驱动程序).这些设 ...

  2. 【整理】Linux下中文检索引擎coreseek4安装,以及PHP使用sphinx的三种方式(sphinxapi,sphinx的php扩展,SphinxSe作为mysql存储引擎)

          一,软件准备 coreseek4.1 (包含coreseek测试版和mmseg最新版本,以及测试数据包[内置中文分词与搜索.单字切分.mysql数据源.python数据源.RT实时索引等测 ...

  3. [deviceone开发]-cnodejs论坛移动端App

    一. 简介 这个App是利用cnodejs.net的API来实现论坛的移动端,使用了deviceone的官方的js库(github.com/do-js). 从而使代码非常简洁,便于阅读和参考,值得推荐 ...

  4. Language Tool ,a plugin for TeXStudio

    Language Tool ,a plugin for TeXStudio TexStudio supports LanguageTool as an inline grammar checker. ...

  5. Win7精简成功后的总结

    vsax 发表于 2014-7-20 20:59:43  https://www.itsk.com/forum.php?mod=viewthread&tid=333816&highli ...

  6. 虚拟机Linux----Ubuntu1204----root登录设置

    说明:装好的ubuntu12.04登录时,默认是看不到root用户的,需要设置一下. 1.先用普通用户登录,打开终端,切换为root用户,如下: su root 2.修改 sudo gedit /et ...

  7. C使用FILE指针文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...

  8. NSTimer定时器的用法

    #import "ViewController.h" @interface ViewController () { NSTimer *countDownTimer; int cou ...

  9. Linux常用命令英文全称与中文解释Linux系统

    Linux常用命令英文全称与中文解释Linux系统(转)   Linux常用命令英文全称与中文解释Linux系统 man: Manual 意思是手册,可以用这个命令查询其他命令的用法. pwd:Pri ...

  10. mongodb 、nosql、 redis、 memcached 是什么?

    mongodb 是一个基于文档的数据库,所有数据是从磁盘上进行读写的.MongoDB善长的是对无模式JSON数据的查询.而Redis是一个基于内存的键值数据库,它由C语言实现的,与Nginx/ Nod ...