本文转自这里
适配来源：
按照苹果官方人机界面指南 ：
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
在iPhone X 异形屏幕上，苹果提出了Safe Area安全区的概念，这个安全区域的意思是，UI在Safe Area能够保证显示不会被裁切掉。
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目录中。
image.png
设计通用的适配component，哪些面板要适配，就直接添加这个脚本：
image.png
image.png
image.png
比如这样，给Panel加了Safe Area Panel这个组件，勾选Simulate_X模拟iPhone X运行。
image.png
运行时图（红色区域是UI主面板正常是全屏的，这里根据Safe Area，自动适配后调整锚点展示的左右边距下边距，最底层蓝色区域是场景或者UI背景图区域）。
image.png
添加一个812x375就可以模拟iPhoneX的效果
image.png
如果是旧项目是使用NGUI来开发的，原理一样，也得用到以上Safa Area.mm来获取安全区域，不同处在于修改NGUI的源码，而NGUI版本有好多。不要忘记把SafeArea.mm拷贝到项目的Plugins/iOS目录中。我提供思路和核心代码，需要你结合自己使用的NGUI来修改。
NGUI中UI Sprite、UILabel、UIPanel等等都是继承抽象类UIRect。
image.png
UIRect UI矩形包含4个锚点（每边一个），我们就是要控制锚点在安全区域显示。
在NGUITools.CS中增加代码：
image.png
锚点的适配最终都会调用NGUITools.GetSides这个方法，这个方法实际上是NGUI为Camera写的扩展方法。
找到NGUITools.cs的static public Vector3[] GetSides(this Camera cam,float depth,Transform relativeTo)。我们追加一个bool showInSafeArea, 默认false。
image.png
还需要改动UIRect和UIRectEditor的相关方法：
1.在UIRect.cs中添加
image.png
2.修改GetSides的调用
image.png
image.png
3.UIRectEditor.CS扩展下
image.png
4.GetSides的调用加上mShowInSafeArea。
补充：实际项目中，部分节点是UIAnchor来设置，所以这个脚本也要适配找到UIAnchor的UpDate。
image.png
5.这里都是直接使用Screen.width和Height，要改成安全区域Safe Area.width和Safe Area.height。
image.png
（完整代码请点阅读原文了解）
这样NGUI也就可以了。
image.png
添加一个812x375就只可以直接预览：
image.png
以上，因为我的两个上线项目恰好分别适配了UGUI和NGUI，所以根据经验，总结了高效的Unity3D适配iPhone X技术方案，希望大家能有收获。
网友评论