Unity-UI适配
UI适配主要包含一下两点[*]不同分辨率大小的处理
[*]在异形屏的处理
一. 分辨率适配
1. 布局适配
以1920x1080的画布作为基础，对于现有CanvasScaler，在ScaleWithScreenSize下能满足我们大部分需求。
如果只需适配手机，即更细长的屏幕（长边大于1920），我们希望高度不变，宽度变大。
把Match设置1即可：
如果只需适配平板，即更方的屏幕（短边大于1080），我们希望高度不变，宽度变大。
这时只需把Match设置0即可：
那如果我手机和平板都需要满足，是不是Match设置为0.5即可？答案是可能不太行：
对于2340x1080的挖孔手机，宽被拉长了，而高度被压缩了：
这样的结果就是像下图一样（图中上半部分是1920x1080的效果），左侧的区域有可能会挤到一起了：
解决方案：
可以改一下CanvasScaler中Match的值，让它在不同设备上分别设置为0或者1就行了，上代码：
using UnityEngine;
using UnityEngine.UI;
public class CanvasScalerEx : CanvasScaler
{
protected override void HandleScaleWithScreenSize()
{
if (Screen.width / m_ReferenceResolution.x < Screen.height / m_ReferenceResolution.y)
matchWidthOrHeight = 0f;
else
matchWidthOrHeight = 1f;
base.HandleScaleWithScreenSize();
}
}
2. 背景适配
原画背景大图没什么好说的，一般是不希望被拉伸的，只能被裁剪，所以做大点就行。
部分界面里的背景图是可以做到二方连续或者四方连续的，这样也是没问题的
二. 刘海处理
iPhoneX刚出的时候，大家也没什么经验，简单做法是单独为iPhoneX设置一个左右的偏移，很不优雅。
后来安卓机型也推出了很多刘海屏，水滴屏，讨论的人反而没有太多，这要归功于一个ProjectSettings中的一个开关 - Render outside safe area。这个选项被关闭的时候，所有的刘海/挖孔区域都是不算屏幕大小的。（而iOS平台是没有这个设置的，相当于默认打开）
解决的思路和之前是一样的，拿到不同设备上除刘海/挖孔区域之外的安全区域，然后在一个根节点设置好偏移。
好消息是这个偏移信息是不用我们自己维护的，Unity引擎自带现成的接口：
using UnityEngine;
public class SafeAreaHelper : MonoBehaviour
{
public RectTransform trans;
Rect LastSafeArea = new Rect(0, 0, 0, 0);
void Update()
{
RefreshSafeArea();
}
void RefreshSafeArea()
{
Rect safeArea = Screen.safeArea;
if (safeArea != LastSafeArea)
{
LastSafeArea = safeArea;
Vector2 anchorMin = safeArea.position;
anchorMin.x /= Screen.width;
anchorMin.y = 0; // anchorMin.y /= Screen.height;
trans.anchorMin = anchorMin;
Vector2 anchorMax = safeArea.position + safeArea.size;
anchorMax.x /= Screen.width;
anchorMax.y = 1;// anchorMax.y /= Screen.height;
trans.anchorMax = anchorMax;
}
}
}
iOS
对于iOS设备，安全区域不包括刘海、四周圆角、底部StatusBar。
如果不想让底部的StatusBar影响UI布局，我们anchorMin.y/anchorMax.y我们可以默认为0和1
Android
对于Android设备，开启Render outside safe area之后也需要和iOS一样处理。
值得一提的是，底部的圆角也被算到了安全区内，这个可以根据需要自行调整：
三. 其他
分辨率在Game中可以设置预览，这个我就不多说了。
其实Unity官方也给了刘海的预览工具，PackageMnager中搜索安装DeviceSimulator即可。搜不到的话，可以检查下Show preview packages开关是否打开。
以上基本解决了分辨率适配的问题，有什么疑问欢迎评论留言。
页:
[1]