迷糊
RectTransformPosX、PosY、Left 、Right 、 Top 、Bottom 以及 AchorMax/AnchorMin 的，开卷有益哟~
背景
笔者开发的（PC）APP 之前都是按照 1920*1080 分辨率做的 UI ，工程都完工了，结果说要适配 4K 分辨率的屏幕，就挺突然的 。。。
痛点
如果 UI 设计的基准分辨率（本例1920*1080）小于 现有需求的 4K 分辨率, 那么为了UI界面清晰更换 UI 素材就是必然
可仅仅是换 UI 这么简单吗？
并不。
虽然一个 Canvas Scaler 脚本，一个 Scale With Screen Size 配置就完成了UI适配。
但是，这个组件只是通过简单的整体放大 Canvas 的尺寸实现的 2k 到 4K（或8k） 分辨率的适配，而不是修改每一个 UI 的 rect。
可以看到屏幕分辨率改变，变化的仅仅是画布尺寸
这样一来必然存在 2 个问题：
-
代码中动态更换 icon 时大量用到了 Image.SetNativeSize() 方法，运行起来那些换过高清Icon的图片肯定会被放大。
通过点击 Image 组件的 SetNativeSize,可以获取并设置 Rect 真实尺寸
- 如果前期代码中所有对UI位置进行变更的逻辑都没考虑 Canvas.localScale , 那UI位移操作一定会错位的很离谱，就比如 UI 的拖拽。
解决
笔者总觉得 UI 素材因该按真实的尺寸铺开，而不是容纳在原来小一号的 Rect 中，然后再被放大（也许出于是对于未知的执着）。
所以，笔者决定放大每一个 RectTransform 的 Rect 。
分析
我们发现想要把 UI Rect 等比放大且还要保持其在 Canvas 位置保持不变，只需要把 RectTransform 这个区域的值等比放大就行了。
下面就教大家怎么用代码动态修改：
- 想要修改 PosX 、PosY ，修改 RectTransform.anchoredPosition 即可
- 想要修改 Left 、Right ，分别修改 RectTransform.offsetMax.x 和 RectTransform.offsetMin.x
- 想要修改 Top 、Bottom，分别修改 RectTransform.offsetMax.y 和 RectTransform.offsetMin.y
- 想要修改 Width 、Height ，分别修改 RectTransform.sizeDelta 的 x 和 y
可是，聪明的你是不是发现这些值并不是全部都会在 Inspector 上绘制出来，Unity 通过这种防呆手段告诉我们，不同的 Anchor Max/Min 设置下，PosX、PosY、Left 、Right 、 Top 、Bottom 只需要选择性的赋值！
那不同的 Anchor Max/Min 设置 ，怎么选择性给：PosX、PosY、Left 、Right 、 Top 、Bottom 赋值呢？
- 当 AnchorsMax.x = AnchrosMin.x 时，对 PosX 、Width 赋值 ，否则对 Left、Right 赋值
- 当 anchorMax.y = AnchorMin.y 时，对 PosY、Height 赋值，否则对 Top 、 Bottom 赋值
有必要说说上面的规律是怎么找到的，毕竟授人以渔嘛：
- 通过调整 Anchors 的值 ，观察
PosX、PosY、Left 、Right 、 Top 、Bottom的值穷举绘制规律。 -
看 Unity 源码，直接在 RectTransformEditor 中找绘制到规制，从 OnInspectorGUI() → SmartPositionAndSizeFields() 看到如下逻辑
可以看到，立 flag 并通过 flag 分情况绘制，一目了然。
代码
整理规律成测试代码：
using UnityEngine;
using System;
using UnityEngine.UI;
#if UNITY_EDITOR
using UnityEditor;
[CustomEditor(typeof(RectTransformResizerHandler))]
class RectTransformResizerHandlerEditor : Editor
{
public override void OnInspectorGUI()
{
base.OnInspectorGUI();
if (GUILayout.Button("配置"))
{
var scr = target as RectTransformResizerHandler;
serializedObject.Update();
Undo.RecordObject(scr.gameObject, "RectTransformResizerHandlerRedo");
scr.Action();
}
GUILayout.Label(@"此脚本用于把 RectTransform 尺寸等比放大：
1. 已经考虑到自身及父节点的 Layout 组件。
2. 必须将 Game 视窗和CanvasScale 分辨率配置到你想要的，或者Scaler 设置成 Constant Pixel Size
3. 倍率是整型，1920 → 3840 → 7680 （2k→4k→8k）
4. 游戏对象以 ~ 号结尾的过滤掉不会被处理，可以使用此方式跳过处理
");
}
}
#endif
public class RectTransformResizerHandler : MonoBehaviour
{
[SerializeField] int factor = 2;
[SerializeField] bool needSetDirty = true; //RectTransform 会自动dirty 但是其他组件不会（具体哪些不会，不知道）
public void Action()
{
UpdateScale(null);
DestroyImmediate(this);
}
private void UpdateScale(Transform t)
{
if (!t) t = transform;
HandleThisRectTransform(t);
if (t.childCount > 0)
{
for (int i = 0; i < t.childCount; i++)
{
Transform tr = t.GetChild(i);
if (!tr.name.EndsWith("~"))
{
UpdateScale(tr);
}
}
}
}
private void HandleThisRectTransform(Transform item)
{
Action HandleRectTransformPose = () =>
{
var rt = item as RectTransform;
// 1 . 先确认自身 Size 和 Pose 是不是身不由己。
var layoutGroup = item.parent.GetComponent<LayoutGroup>();
var lele = item.GetComponent<LayoutElement>();
if (layoutGroup && layoutGroup.enabled && (!lele || (lele && lele.enabled && !lele.ignoreLayout)))
{
if (layoutGroup is GridLayoutGroup) return;
var group = layoutGroup as HorizontalOrVerticalLayoutGroup;
if (!group.childControlHeight)
{
var ds = rt.sizeDelta;
ds[1] *= factor;
rt.sizeDelta = ds;
}
if (!group.childControlWidth)
{
var ds = rt.sizeDelta;
ds[0] *= factor;
rt.sizeDelta = ds;
}
}
else
{
//2. 针对左侧的 PosX+Width 与 left + right 的分情况赋值
if (rt.anchorMax.x == rt.anchorMin.x) //只要他俩相等就需要对 PosX 和 Width 赋值
{
var pos = rt.anchoredPosition;
pos[0] *= factor;
rt.anchoredPosition = pos;
var ds = rt.sizeDelta;
ds[0] *= factor;
rt.sizeDelta = ds;
}
else //不相等的话，就对left 和 right 赋值
{
var max = rt.offsetMax;
var min = rt.offsetMin;
max.x *= factor;
min.x *= factor;
rt.offsetMin = min;
rt.offsetMax = max;
}
//3. 针对左侧的 PosY+Height 与 top + bottom 的分情况赋值，规律同上
if (rt.anchorMax.y == rt.anchorMin.y)
{
var pos = rt.anchoredPosition;
pos[1] *= factor;
rt.anchoredPosition = pos;
var ds = rt.sizeDelta;
ds[1] *= factor;
rt.sizeDelta = ds;
}
else
{
var max = rt.offsetMax;
var min = rt.offsetMin;
max.y *= factor;
min.y *= factor;
rt.offsetMin = min;
rt.offsetMax = max;
}
}
rt.ForceUpdateRectTransforms();
#if UNITY_EDITOR
if (needSetDirty) UnityEditor.EditorUtility.SetDirty(rt);
#endif
};
//0. 处理 LayoutElement
var ele = item.GetComponent<LayoutElement>();
if (ele)
{
if (!ele.ignoreLayout)
{
ele.minHeight *= factor;
ele.minWidth *= factor;
ele.preferredHeight *= factor;
ele.preferredWidth *= factor;
}
}
//1. 处理 RectTransform size 和 pose
HandleRectTransformPose();
//2. 处理LayoutGroup
LayoutGroup layout = item.GetComponent<LayoutGroup>();
if (layout)
{
if (layout is GridLayoutGroup)
{
var grid = layout as GridLayoutGroup;
if (grid)
{
grid.padding.top *= factor;
grid.padding.bottom *= factor;
grid.padding.left *= factor;
grid.padding.right *= factor;
grid.cellSize *= factor;
grid.spacing *= factor;
}
}
else
{
var horizontalOrVertical = layout as HorizontalOrVerticalLayoutGroup;
if (horizontalOrVertical)
{
horizontalOrVertical.padding.top *= factor;
horizontalOrVertical.padding.bottom *= factor;
horizontalOrVertical.padding.left *= factor;
horizontalOrVertical.padding.right *= factor;
horizontalOrVertical.spacing *= factor;
}
}
#if UNITY_EDITOR
if (needSetDirty) UnityEditor.EditorUtility.SetDirty(layout);
#endif
}
//3. 处理 Text 组件
Text text = item.GetComponent<Text>();
if (text)
{
text.fontSize *= factor;
if (text.resizeTextForBestFit)
{
text.resizeTextMaxSize *= factor;
text.resizeTextMinSize *= factor;
}
#if UNITY_EDITOR
if (needSetDirty) UnityEditor.EditorUtility.SetDirty(text);
#endif
}
}
}
Tips:
- UI 等比放大，文字字号也要同比放大。
- 需要对一系列的布局组件进行特别关照。
- 如果UI上挂载自己写的脚本，需要留意是否有需要等比扩大的参数。
效果：
动画简要说明
- UI原先设计适配最大分辨率 1920*1080
- 当改分辨率为 4k 后，UI 位置发生变化，尺寸在屏幕占比缩小。
- 使用本文脚本处理后，4K 分辨率下得到和 1920*1080 一样的位置和屏幕占比效果。
网友评论