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