实例说明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

目录
相关文章
|
1月前
|
jenkins Unix 持续交付
个人记录jenkins编译ios过程 xcode是9.4.1
个人记录jenkins编译ios过程 xcode是9.4.1
29 2
|
1月前
|
Linux 数据安全/隐私保护 iOS开发
如何使用 Xcode 打包导出 IPA 文件并进行 iOS 应用内测,无需支付苹果开发者账号费用?
如何使用 Xcode 打包导出 IPA 文件并进行 iOS 应用内测,无需支付苹果开发者账号费用?
|
2天前
|
iOS开发
技术好文:xcode动态图,ios实现动态图,iosgif,暂停和继续播放
技术好文:xcode动态图,ios实现动态图,iosgif,暂停和继续播放
|
1月前
|
存储 定位技术 iOS开发
XCode8升级到Xcode9(操作系统为iOS11)后原来的工程中遇到的问题
XCode8升级到Xcode9(操作系统为iOS11)后原来的工程中遇到的问题
23 0
|
1月前
|
Linux 数据安全/隐私保护 iOS开发
Xcode8.1如何支持iOS8.0以下版本
Xcode8.1如何支持iOS8.0以下版本
22 0
|
10月前
|
iOS开发
iOS Xcode 意外退出 打不开工程
iOS Xcode 意外退出 打不开工程
126 0
|
8月前
|
iOS开发 芯片 MacOS
[Xcode 12, building for iOS Simulator, but linking in object file built for iOS, for architecture...
[Xcode 12, building for iOS Simulator, but linking in object file built for iOS, for architecture...
210 0
|
8月前
|
iOS开发 开发者
Xcode7.2真机调试iOS 9.3的设备
Xcode7.2真机调试iOS 9.3的设备
121 0
|
11月前
|
iOS开发
Xcode 12.3 编译提示Building for iOS Simulator, but the linked and embedded framework
Xcode 12.3 编译提示Building for iOS Simulator, but the linked and embedded framework
|
Linux 数据安全/隐私保护 iOS开发
如何使用 Xcode 打包导出 IPA 文件并进行 iOS 应用内测,无需支付苹果开发者账号费用?
苹果开发者账号认证需要支付 688 元,对于初学 iOS 开发的同学来说,仅仅是为了进行内测而不需要上架 App Store,这样的费用是不必要的。