实例说明SizeClass在Xcode9上的使用

简介: 在ios8的时候,苹果推出了SizeClass这种针对不同屏幕的手机进行适配的方案。一直也没怎么关注过,最近因为业务需要,需要适配手机横屏,才发现原来使用SizeClass是如此的简单方便。

在ios8的时候,苹果推出了SizeClass这种针对不同屏幕的手机进行适配的方案。一直也没怎么关注过,最近因为业务需要,需要适配手机横屏,才发现原来使用SizeClass是如此的简单方便。

先看效果图:


img_c68fb65c3e2edb26d82a934029367fcc.gif
video.gif

横屏:


img_0082456c773ee4fec93829064d79d798.png
image.png

竖屏:

img_cf0d1c4e8a4951ae30ff692547e02d8c.png
image.png

观察发现,竖视频上多了声音按钮,评论列表和底部的操作栏。

当然了,也可以做成两个vc,一个竖屏vc,一个横屏vc,但是这样的话,动画做起来就稍微有点麻烦,两个页面之间传递值也容易出错。也算是抱着学习的态度使用sizeclass解决问题吧。

进入正题:

由于项目中有些公司信息,不方便放出来,还是以demo为例进行说明吧。

demo中实现的效果图:

img_b55bee34916bf93939cd901ca7cf598b.png
image.png
img_df31fcd2177ec731e0bd99ec82a25f0e.png
image.png

横屏和竖屏下,中间显示了不同的控件,左右两边的label位置不同。

实现步骤:

1.打开xcode,新建一个项目,进入storyBoard,先添加顶部的两个label:

img_8a43bca727ce54b8ae9f1b7ca55a7b1c.png
image.png

2.打开底部的

img_6ac922279ef826d638286faec410da1e.png
image.png

3.点击 vary for Traits,选中width,height,因为我们要适配所有手机的竖屏。


img_fabf626dabf1909d6e601b02dfe83381.png
image.png

4.现在vary for Traits变成了 Done Varying 。

img_f7fc375f8ad6c2c34b3c7328c6ad2e43.png
image.png

5.开始添加约束

img_0f63c6480f19e51665c39cf8f66b1543.png
image.png

6.再添加一个竖屏才显示的按钮,居中显示:

img_1d2b05ab821bff3897451ac8c051573a.png
image.png

7.现在可以点击Done Varying按钮了。

运行一下,竖屏下显示:


img_8b799aa2223ce29e15e30953c0b876ab.png
image.png

是我们设置的效果,再来看下横屏:


img_41cf9d04f6b0834d8c4e8d61a1299281.png
image.png

并不是我们想要的效果。别着急,横屏还没设置呢,接下来要设置横屏效果。

8.点击设备的横屏状态:


img_641f84bba9673b8918d8328fe870bb73.png
image.png

这个时候约束报错,别担心,我们一会儿就处理。

9.点击vary for Traits,选中width,height,因为我们要适配所有设备的横屏。

img_04dd5b85d7b3df583c698b0ab9dbe633.png
image.png

10.设置label的约束

注意,这里的约束与竖屏状态下的约束没有任何关系,不要删除竖屏状态的任何约束。

注意观察,就会发现,横屏状态下,竖屏的约束和竖屏才显示的控件变成了灰色,这是正常的。


img_83f5928b3db9675c06b98894a34d9dc2.png
image.png

设置横屏约束:

img_b860bd8f8df6388b9f7b465be7d031ab.png
image.png

11.添加横屏状态下才显示的控件,居底部显示:

img_9e37447d72f39905312bef550eafe602.jpe
111.png

12.点击 Done Varying

现在开始运行,看看效果吧

竖屏:

img_dc3a34067d271e0e7555e1a0f8d312aa.png
image.png

横屏:

img_e814c62a8cb224e16da2d228c2cf7c69.png
image.png

动态效果:

img_886b8ebf4f6c5f27559bf1abf5c245c0.gif
sizeClass.gif

demo下载地址:

https://github.com/weiman152/SizeClassDemo

目录
相关文章
|
7月前
|
jenkins Unix 持续交付
个人记录jenkins编译ios过程 xcode是9.4.1
个人记录jenkins编译ios过程 xcode是9.4.1
102 2
|
7月前
|
Linux 数据安全/隐私保护 iOS开发
如何使用 Xcode 打包导出 IPA 文件并进行 iOS 应用内测,无需支付苹果开发者账号费用?
如何使用 Xcode 打包导出 IPA 文件并进行 iOS 应用内测,无需支付苹果开发者账号费用?
|
4月前
|
iOS开发 MacOS Perl
解决Xcode运行IOS报错:redefinition of module ‘Firebase‘和could not build module ‘CoreFoundation‘
解决Xcode运行IOS报错:redefinition of module ‘Firebase‘和could not build module ‘CoreFoundation‘
152 4
|
4月前
|
iOS开发 开发者
解决xcode doesn‘t support iphone’s ios 14.6 (18f72)
解决xcode doesn‘t support iphone’s ios 14.6 (18f72)
272 3
|
4月前
|
缓存 iOS开发
如何在Xcode删除某个版本的IOS模拟器
如何在Xcode删除某个版本的IOS模拟器
607 1
|
4月前
|
iOS开发
mac不通过Xcode直接打开IOS模拟器
mac不通过Xcode直接打开IOS模拟器
238 2
|
6月前
|
iOS开发
技术好文:xcode动态图,ios实现动态图,iosgif,暂停和继续播放
技术好文:xcode动态图,ios实现动态图,iosgif,暂停和继续播放
58 1
|
7月前
|
存储 定位技术 iOS开发
XCode8升级到Xcode9(操作系统为iOS11)后原来的工程中遇到的问题
XCode8升级到Xcode9(操作系统为iOS11)后原来的工程中遇到的问题
110 0
|
7月前
|
Linux 数据安全/隐私保护 iOS开发
Xcode8.1如何支持iOS8.0以下版本
Xcode8.1如何支持iOS8.0以下版本
46 0
|
iOS开发
iOS Xcode 意外退出 打不开工程
iOS Xcode 意外退出 打不开工程
169 0