神刀安全网

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

本文转自这里

适配来源:

按照苹果官方人机界面指南 :

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

在iPhone X 异形屏幕上,苹果提出了Safe Area安全区的概念,这个安全区域的意思是,UI在Safe Area能够保证显示不会被裁切掉。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

按照苹果的设计规范,要求我们把UI控件放在Safe Area内,而且不能留黑边。在Unity中就需要解决,怎么以更少的工作量把所有界面的控件停靠在Safe Area内,黑边的部分用场景或者背景图填充。

当我们横持iPhoneX的时候:

iPhone X整体像素为2436 x 1125像素;

整体SafeArea区域为2172 x 1062像素;

左右插槽(齐刘海和圆角,再加一个边距)各132像素;

底部边距(由于iPhoneX没有Home键,会有一个虚拟的主屏幕的指示条)主屏幕的指示条占用63像素高度,顶部没有边界是0像素。

一、技术方案

1.改相机ViewPort

直接把UI相机的视口改为Rect(132/2436, 0, 2172/2436, 1062/1125),然后把背景图设为另外一个相机。这样做的好处是,完全不用改原来的Layout。坏处是,多个UI的情况下,背景图和主UI之间的深度关系要重新设置。

2.缩放

把主UI的Scale设为0.9,背景图的Scale设为1.1,这样就能不留黑边。这个方法的好处是简单,坏处是会引起一些Tween已及Active/InActive切换之间的问题。

3.改锚点

分2种情况,NGUI和UGUI都有点不同。正好我都有2个项目的完整适配经验,所以才写了这个分享。

二、实现细节

首先我们拿到iPhone X 安全区域,Unity得开发插件OC代码来获取。SafeArea.mm拷贝到项目的Plugins/iOS目录中。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

设计通用的适配component,哪些面板要适配,就直接添加这个脚本:

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

比如这样,给Panel加了Safe Area Panel这个组件,勾选Simulate_X模拟iPhone X运行。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

运行时图(红色区域是UI主面板正常是全屏的,这里根据Safe Area,自动适配后调整锚点展示的左右边距下边距,最底层蓝色区域是场景或者UI背景图区域)。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

添加一个812×375就可以模拟iPhoneX的效果

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

如果是旧项目是使用NGUI来开发的,原理一样,也得用到以上Safa Area.mm来获取安全区域,不同处在于修改NGUI的源码,而NGUI版本有好多。不要忘记把SafeArea.mm拷贝到项目的Plugins/iOS目录中。我提供思路和核心代码,需要你结合自己使用的NGUI来修改。

NGUI中UI Sprite、UILabel、UIPanel等等都是继承抽象类UIRect。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

UIRect UI矩形包含4个锚点(每边一个),我们就是要控制锚点在安全区域显示。

在NGUITools.CS中增加代码:

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

锚点的适配最终都会调用NGUITools.GetSides这个方法,这个方法实际上是NGUI为Camera写的扩展方法。

找到NGUITools.cs的static public Vector3[] GetSides(this Camera cam,float depth,Transform relativeTo)。我们追加一个bool showInSafeArea, 默认false。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

还需要改动UIRect和UIRectEditor的相关方法:

1.在UIRect.cs中添加

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

2.修改GetSides的调用

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

3.UIRectEditor.CS扩展下

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

4.GetSides的调用加上mShowInSafeArea。

补充:实际项目中,部分节点是UIAnchor来设置,所以这个脚本也要适配找到UIAnchor的UpDate。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

5.这里都是直接使用Screen.width和Height,要改成安全区域Safe Area.width和Safe Area.height。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

(完整代码请点阅读原文了解)

这样NGUI也就可以了。

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

添加一个812×375就只可以直接预览:

高效的iPhone X适配技术方案(UGUI和NGUI)(转)

image.png

以上,因为我的两个上线项目恰好分别适配了UGUI和NGUI,所以根据经验,总结了高效的Unity3D适配iPhone X技术方案,希望大家能有收获。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 高效的iPhone X适配技术方案(UGUI和NGUI)(转)

分享到:更多 ()