Michael

写写代码,说说人生

您好,我是Michael,欢迎来到我的个人家园。
代码搬运工,目前就职于XX证券,努力修行中。


H5 / Java / Objc / Swift / Vue / RN

iOS 8 AutoLayout与Size Class自悟

前言

iOS8和iPhone6发布已经过去蛮久了,广大的果粉终于迎来了大屏iPhone,再也不用纠结为大屏买三星舍苹果了,但是对于iOS开发人员来说,迎来了和Android开发开发一样的问题—>各种屏幕的适配(是不是可以要求加工资的节奏)。对于适配,网传各种有关Size Class的论点,前段时间太忙,一直没去研究,套用+总的话,苹果在适配方面提供的方法做的比安卓好太多了。自己实测之后,确实很方便(不过,还是想说,适配的核心始终是AutoLayout)。

Size-CLass设置

概念初探

iOS8之前,公司在开发项目时,先做的iPhone版,然后要求开发iPad版本,其实内容是完全一样的,只是UI变化了,但是我们就需要建立2个工程来分别对应实现。iOS8推出的Size Class,可以让我们在一个工程的storyboard中进行所有尺寸屏幕的适配,不仅是iPhone 4s-5/5s-6-6 Plus,还包括iPad界面。它引入了一种新的概念,抛弃传统意义上我们适配时所谓的具体宽高尺寸,把屏幕的宽和高分别分成两种情况:Compact-紧凑Regular-正常(Any-任意,其实就是这2种的组合,所以我没分成3种情况)。搭配起来是3*3,也就是无论如何变化,加起来也就9种,如上图。

1. 实际应用中,这Compact、Any、Regular如何运用呢?

w:Any h:Any 是我们刚建立工程时候默认选择的,算是一切描述的父类。其他的种类描述都是在此基础上变化的,比如:如果weight设为Anyheight设置为Regular,那么在该状态下的界面元素在只要heightRegular,无论weightRegular还是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)

2. 再来看一组数据和一张图(国外一位博主给出的,很形象)

  • 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)

各种Size-Classes

3. 可以总结为:

  • 如果项目不支持横屏显示,使用w:Compact h:Regular(或者直接取消使用Size Class)
  • 如果项目支持横屏显示,使用w:Compact h:Regular+w:Any h:Compact
  • 对于一些公有的约束(任意组合中都适用),一般放在w:Any h:Any中设置
  • iPad同理

所以,我觉得Size Class最大的帮助是,解决横屏适配和iPhone iPad共享一个设计板(个人意见)

试验反馈一

  • 1. 首先,先建立一个工程,展开如下页面

实验反馈一

PS:这是iOS8的新特性,真的用到项目里需要等放弃兼容iOS7 。。。显然,目前还是不行的

  • 2. 在Any Any情况下,放置一个Label,并设置约束上-左-下-右为0-0-20-0

添加约束1

添加约束2

  • 3. 在Compact Any情况下,又放置一个Label,并设置约束上为20

添加约束3

  • 4. 继续在Compact Any情况下,来看看横屏状态下的变化

添加约束5

  • 5. 最后切换到Regular Any下,完成6 Plus 的横屏显示

添加约束6

试验反馈二

试验一里面,验证了一下概念中所列举的各个屏幕适用的组合,接下来,算是Size Class 解决横屏的妙用。

添加约束7

添加约束8

添加约束9

添加约束10

PS:运用于,横屏适配,重新排版竖屏时候的UI布局。

除了改动不同组合下约束,也能改动控件在不同组合下是否显示。

添加约束11

添加约束12

试验反馈三

AutoLayout这里不给具体如何设置,因为不知道如何写,感觉还是大家多动手去写,去试,最有效了。下面给出AutoLayout设置的图解:

添加约束13

添加约束14

简答测试Demo结果图:

简答测试Demo结果图

如果不横屏,也可以直接取消Size Classes(图不一样,不同时间写的…囧)

取消Size-Class

最终Demo

Demo的Github地址

最终Demo效果图1

最终Demo效果图2

最终Demo效果图3

总结

直接说以后都应该使用Storyboard+Autolayout感觉是不负责的说法,但是深入思考Autolayout是很有必要的!

如下情况使用Autolayout会有帮助:

  • 当需要展示的内容很多并且尺寸不固定;
  • 程序需支持屏幕旋转(主要是iPad程序,iPhone程序横屏的场景有点非主流,也不排除…手游…);
  • 程序通用于iPhone和iPad(最重要的吧)。

Storyboard中使用Autolayout有利有弊,好处当然是可视化,实现简单功能很节省时间,但也有弊端,例如不小心移动一个控件就会让弄乱那些约束或者控件一多加上自定义的XXXXXXXX

参考资料

最近的文章

关于 iOS8 Size Classes的理解与使用​

Size Classes是什么iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes,对于任何设备来说,界面的宽度和高度都只分为两种描述:正常和紧凑。这样开发者便可以无视设备具体的尺寸,而是对这两类和它们的组合进行适配。这样不论在设计时还是代码上,我们都可以不再受限于具体的尺寸,而是变成遵循尺寸的视觉感官来进行适配。在Xcode中的具体体现如下图:但是我们看到图中的宽度和高度都是Any,Any是什么意思呢?如果weight设为Any,height设置为Regular...…

iOS开发继续阅读
更早的文章

关于 Swift Error 的分类

在去年我应 IBM 编辑的邀请写过一篇关于 Swift 2 中 throws 的文章。现在回头看,Swift 2 其实是 Swift 语言发展的一个挺重要的节点:如果说 Swift 1 是一个更偏向于验证阶段的产品的话,Swift 2 中加入的特性为这门语言的基石进行了补足。在那篇文章里我们主要深入探索了新的 throw 关键字背后的事情,而同一时期其实 Swift 官方有过一次关于错误处理的讨论。随着 Swift 3 的开源,这些原始文档也被一同公开,展示了 Swift 设计的过程和轨迹...…

能工巧匠集继续阅读