适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
此篇文章是对上一篇文章(http://www.ifiero.com/index.php/archives/611)的进一步补充,主要说明如何适配Apple的最新三款手机iPhoneXs、iPhoneXs Max及iPhoneXr !!!
未适配前:Ball球超过屏幕的上下方
适配后:Ball球就在屏幕的可视范围内运动了
回顾:为何要把场景中的所有图片, 都按照屏幕大小为 2048 * 1536 来绘制。 也就是说, 我们的背景图的大小是 2048 * 1536, 其他图片也是依照这个比例来绘制。
为什么这样做呢?
我们知道 2048 * 1536 是iPad Retina 的分辨率。也是我们需要适配的设备里面分辨率最高的。 所以我们在游戏中都选择了这个大小,让它来兼容分辨率低的设备。 2048 * 1536 在iPad Retina上是完美显示的。 那在其他设备上呢? 先用 AspectFill来进行缩放,并应用相应的屏幕辨率高宽比值Ratio, 来适配各个不同的iPhone尺寸。AspectFill缩放的代码如下:
if let scene = GameScene(fileNamed: "GameScene") {scene.size = CGSize(width: 2048, height: 1536)scene.scaleMode = .aspectFill /// 缩放view.presentScene(scene)}
了解了用 AspectFill来进行缩放,那么我们现在就来看看iPhoneX的屏幕尺寸分辨率
iPhoneX的屏幕尺寸分辨率(上图中 高度812 = 2436缩小1/3):
设备 | 屏幕尺寸分辨率 | 图片存放对应的位置 |
---|---|---|
iPhoneX (1倍 @1x) | 375x812 | @1x |
iPhoneX (2倍 @2x) | 750x1624 | @2x |
iPhoneX (3倍 @3x) | 1125x2436 | @3x |
iPhoneX/iPhoneXs/iPhoneXs Max/iPhoneXr的屏幕尺寸分辨率
iPhoneX系列的屏幕分辨率:
设备 | 屏幕分辨率 | 图片存放的位置 |
---|---|---|
iPhoneX (3倍 @3x) | 1125x2436 | @3x |
iPhoneXs (3倍 @3x) | 1125x2436 | @3x |
iPhoneXs Max (3倍 @3x) | 1242x2688 | @3x |
iPhoneXr (2倍 @2x) | 828x1792 | @2x |
根据以上iPhoneX系列的屏幕分辨率,得出高宽比Ratio都为2.16
橙色整体区域表示我们场景的真实大小, 用 AspectFill来进行缩放后,scene.scaleMode = .aspectFill,黑色线框内的区域表示场景展示在设备上的真实大小(即屏幕可视范围)。
iPad Retina:橙色区域和黑色线框内的区域是完美吻合的,也就是说在设备上能完整显示。
iPhone6/7/8/Plus:黑色线框内的区域是2048 * 1152,这边要注意的是,超出黑色框的内容看不见,设计游戏时,尽量不要把精灵的Position位置放在位于不可见的区域。
iPhoneX:黑色线框内的区域是2048 * 948(兰色为安全区域),其中948高度=2048 / 2.16(高宽比)。
不同尺寸的iPhone的屏幕尺寸比例及屏幕高宽比值
设备 | 屏幕比例 | 屏幕高宽比值 |
---|---|---|
iPad Retina | 4 / 3 | 1.33 |
iPhone 6/7/8 | 16 / 9 | 1.77 |
iPhone 6/7/8 Plus | 16 / 9 | 1.77 |
iPhone X/Xs/Xr/Xs Max | – | 2.16 |
再者我们主要是适配SpriteKit游戏开发,因此不需要计算Navigation导航栏的高度,也不需要TabBar状态栏的高度,只需要计算可视区域(屏幕可视范围),还有,注意要把需要交互的元素放在安全区域SafeArea,而不要放在危险区域 Danger Area就行了。
可视区域(屏幕可视范围)= 安全区域 Safe Area + 危险区域 Danger Area
了解了原理后,我们就开始来编写代码吧。
1.extension拓展UIDevice,判断设备是iPhone或者iPhoneX系列或iPad
import UIKit
import SpriteKit// iPhone X 375*812(H) @1x
// 竖屏
public let AREA_INSET_HEIGHT_TOP :CGFloat = (UIScreen.main.bounds.height == 812 || UIScreen.main.bounds.height == 896) ? 44.0 : 0
public let AREA_INSET_HEIGHT_BOTTOM:CGFloat = (UIScreen.main.bounds.height == 812 || UIScreen.main.bounds.height == 896) ? 34.0 : 0
// 横屏(安全区域)
public let AREA_INSET_WIDTH_LEFT :CGFloat = (UIScreen.main.bounds.width == 812 || UIScreen.main.bounds.width == 896) ? 44.0 : 0
public let AREA_INSET_WIDTH_RIGHT :CGFloat = (UIScreen.main.bounds.width == 812 || UIScreen.main.bounds.width == 896) ? 34.0 : 0extension UIDevice {/// 是不是iPhoneX ,如果是竖屏则 UIScreen.main.bounds.height == 812public func isPhoneX() -> Bool {if UIScreen.main.bounds.width == 812 || UIScreen.main.bounds.width == 896 { /// 横屏return true}return false}/// 是不是iPadpublic func isPad() -> Bool {return (UIDevice.current.userInterfaceIdiom == .pad) ? true : false;}}
2.检测是哪种设备
// MARK: - 检测是哪种设备func initCheckDevice(){if UIDevice.current.isPhoneX() {maxAspectRatio = 2.16 /// iPhoneX || iPhoneXs || iPhoneXs Max || iPhoneXr 2.16 高/宽比 ratio}else {maxAspectRatio = UIDevice.current.isPad() ? (4.0 / 3.0) : (16.0 / 9.0) /// iPhone 16:9,iPad 4:3}/// 画出可视区域drawPlayableArea(size: self.size,ratio: maxAspectRatio)/// 画出安全区域drawSafeArea(size: self.size,ratio: maxAspectRatio)}
3.画出安全区域
// MARK: - 安全区域即用户交互的区域,非可视区域 (iPhoneX的安全区域 < 可视区域)func drawSafeArea(size:CGSize,ratio:CGFloat){playableHeight = size.width / ratioplayableMargin = (size.height - playableHeight ) / 2.0 /// P70let safeInsetLeft = AREA_INSET_WIDTH_LEFT * ratiolet safeInsetRight = size.width - safeInsetLeft - AREA_INSET_WIDTH_RIGHT * ratioplayableRect = CGRect(x: safeInsetLeft, y: playableMargin, width:safeInsetRight, height: playableHeight) /// 注意 scene的anchorPoint(0,0)原点的位置;let shapeFrame = SKShapeNode(rect: playableRect)shapeFrame.zPosition = 2shapeFrame.strokeColor = SKColor.greenshapeFrame.lineWidth = 6.0addChild(shapeFrame)}
4.画出可视区域并赋于可视区域的边届物理特性
// MARK: - 画出可视区域func drawPlayableArea(size:CGSize,ratio:CGFloat){playableHeight = size.width / ratioplayableMargin = (size.height - playableHeight ) / 2.0 /// P70playableRect = CGRect(x: 0, y: playableMargin, width: size.width, height: playableHeight) /// 注意 scene的anchorPoint(0,0)原点的位置;print("playable Margin",playableMargin)let shapeFrame = SKShapeNode(rect: playableRect)shapeFrame.zPosition = 1shapeFrame.strokeColor = SKColor.redshapeFrame.lineWidth = 5.0addChild(shapeFrame)/// 可视区域的物理状态let playableBody = SKPhysicsBody(edgeLoopFrom: playableRect)playableBody.friction = 0self.physicsBody = playableBodyplayableBody.categoryBitMask = PhysicsCategory.FrameplayableBody.contactTestBitMask = PhysicsCategory.BallplayableBody.collisionBitMask = PhysicsCategory.Ball/// 地板setupFloor()}
这样子Ball球就只在可视区域内(屏幕可视范围)运动了。
重要的一点就是要了解屏幕尺寸和安全区域的不同,通俗点讲就是,屏幕可视范围可以放任何元素,但所有的用户交互行为都要放在安全区域内(兰色框内)。
即可视区域(屏幕可视范围)= 安全区域 Safe Area + 危险区域 Danger Area
源码传送门: https://github.com/apiapia/BreakOutGameVansVTutorial
更多游戏教程: http://www.iFIERO.com
适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域相关推荐
- Android 适配18:9 和 16:9 屏幕尺寸比例的问题
1.问题: 在华为Mate 9 中,1080X1920分辨率,480dpi,XXhdpi, 1dp = 3px; 按照设计的尺寸去做,最后出来的跟UI 的图,竖向上差距很大,因为我的竖向上同样70dp ...
- css iohone手机端适配,【css】适配iphoneX
Web App适配iPhoneX 前言 Iphone每次退出新尺寸的手机都会掀起一番适配风波,这次没有下巴但有刘海的iPhoneX更是如此,网传横屏下的适配动画更是令不少人汗颜. 其实对于Native ...
- SpriteKit游戏开发适配iPad/iPhone6/7/8/Plus及iPhoneX的尺寸及安全区域
未适配前:Ball球超过屏幕的上下方 适配后:Ball球就在屏幕的可视范围内运动了 一.那么如何适配不同的iPhone.iPhoneX及iPad的屏幕尺寸呢? 我们开发一个App的时候, 通常希望它在 ...
- 苹果屏幕尺寸_苹果推出今年最小和最大的手机:12 mini和Pro max
iPhone 12 和12 Pro是苹果公司推出的"正常"大小的智能手机.但苹果还推出了今年旗舰手机产品中最小的手机和最大的智能手机:iPhone 12 mini 和iPhone ...
- 关于android屏幕尺寸适配的整理以及思考
一直以来android屏幕尺寸相关的东西我都很薄弱,什么dpi, ppi, 英寸我都比较疑惑,本文主要是理清概念,理解头条的屏幕适配原理,以为目前我工作是如何做UI适配的. 一些基础概念 屏幕尺寸 屏 ...
- 适配iPhoneX全系详解,更新Xcode10爬坑
前言 熬夜看了WWDC2018, 为了坚决响应苹果号召, 迅速贯彻落实iOS12的新系统, 公司组织决定让我作为一个排头兵, 更新Xcode10, 看看苹果的新思想, 新作为. 更新Xcode10带来 ...
- android ui布局适配,Android适配全面总结(一)----屏幕适配
前言 Android适配是一个老生常谈的问题,很多程序员觉得很恶心,不愿意做适配,但是又不得不做.然后老板说,这位兄弟,做好了,今天晚饭给你加个鸡腿,然后程序员开始找各种资料,忙活起来了,最终在苦逼的 ...
- android屏幕适配:一个很棒的屏幕适配文章
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 Android的屏幕适配一直以来都在折磨着我们这些开发者,本篇文章以Google的官方文档为基础,全面而深入 ...
- Android适配全面总结(一)----屏幕适配
版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载.https://www.jianshu.com/p/7aa34434ad4d 转载请标明出处: https:// ...
- 【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI )
文章目录 一.Android 与 iOS 屏幕宽高比种类 二.屏幕像素密度 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一.Android 与 iOS 屏幕宽高 ...
最新文章
- 对话科大讯飞刘聪:深度学习在中国是否“过火”?
- 条形压电陶瓷执行器件和高压驱动器
- 关于泛泛而谈和刻意练习的思考
- 《统计学习方法》代码更新了-(github的star数5300+)
- Builder 模式
- 不当败家子的原因......
- IOS高级编程之二:IOS的数据存储与IO
- 扫盲贴|如何评价一款App的稳定性和质量?
- dedecms织梦仿麦站网模板源码下载站源码
- Java怎么避免重复订单_javaEE高并发之如何产生唯一不重复订单号
- 2018四川高考文科21题
- bzoj3744: Gty的妹子序列 (BIT 分块)
- 通过PMP认证考试的心得分享
- 台式计算机模拟软件,仿真软件 计算机仿真模拟常用软件有那些?
- 计算机类专业本科学生成长四阶段必读四本书推荐
- P3376 (最大流 dinic)
- 对于刺头,怎么办?9个套路支招
- 如何使用project制定项目计划?(附详细步骤截图)
- 《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录
- U3D Shader基础
热门文章
- Python地理数据处理 一 :地理空间数据入门
- nmos导通流向_技术参数详解,MOS管知识全录!
- 数据分析-SQL练习
- 论文翻译:(BMVC 2022)You Only Need 90K Parameters to Adapt Light:a Light Weight Transformer
- 生活中的逻辑谬误06.德克萨斯神枪手
- R语言使用rgl包的plot3d函数可视化可以交互旋转的3D散点图(Rotating 3D scatter plot produced by the plot3d functio in rgl)
- 大数据算法-重复率计算 ICardinality
- SpatialDB |单细胞空间转录组数据分析可视化平台
- php5.6.40 在 win10下安装全过程 ( 图文教程、附官方下载链接 )
- java突然无法加载主类_Java 找不到或无法加载主类的修复方法