Unity-UI适配

redhat9i · 发表于 2022-1-5 16:33

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;

[RequireComponent(typeof(RectTransform))]
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开关是否打开。
以上基本解决了分辨率适配的问题，有什么疑问欢迎评论留言。

		自动登录	找回密码
密码			立即注册

Unity-UI适配

本帖子中包含更多资源