在ios8的时候,苹果推出了SizeClass这种针对不同屏幕的手机进行适配的方案。一直也没怎么关注过,最近因为业务需要,需要适配手机横屏,才发现原来使用SizeClass是如此的简单方便。
先看效果图:
横屏:
竖屏:
观察发现,竖视频上多了声音按钮,评论列表和底部的操作栏。
当然了,也可以做成两个vc,一个竖屏vc,一个横屏vc,但是这样的话,动画做起来就稍微有点麻烦,两个页面之间传递值也容易出错。也算是抱着学习的态度使用sizeclass解决问题吧。
进入正题:
由于项目中有些公司信息,不方便放出来,还是以demo为例进行说明吧。
demo中实现的效果图:
横屏和竖屏下,中间显示了不同的控件,左右两边的label位置不同。
实现步骤:
1.打开xcode,新建一个项目,进入storyBoard,先添加顶部的两个label:
2.打开底部的
3.点击 vary for Traits,选中width,height,因为我们要适配所有手机的竖屏。
4.现在vary for Traits变成了 Done Varying 。
5.开始添加约束
6.再添加一个竖屏才显示的按钮,居中显示:
7.现在可以点击Done Varying按钮了。
运行一下,竖屏下显示:
是我们设置的效果,再来看下横屏:
‘
并不是我们想要的效果。别着急,横屏还没设置呢,接下来要设置横屏效果。
8.点击设备的横屏状态:
这个时候约束报错,别担心,我们一会儿就处理。
9.点击vary for Traits,选中width,height,因为我们要适配所有设备的横屏。
10.设置label的约束
注意,这里的约束与竖屏状态下的约束没有任何关系,不要删除竖屏状态的任何约束。
注意观察,就会发现,横屏状态下,竖屏的约束和竖屏才显示的控件变成了灰色,这是正常的。
设置横屏约束:
11.添加横屏状态下才显示的控件,居底部显示:
12.点击 Done Varying
现在开始运行,看看效果吧
竖屏:
横屏:
动态效果:
demo下载地址: