迷糊 RectTransform PosX、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 个问题：

1. 代码中动态更换 icon 时大量用到了 Image.SetNativeSize() 方法，运行起来那些换过高清Icon的图片肯定会被放大。

   
   通过点击 Image 组件的 SetNativeSize,可以获取并设置 Rect 真实尺寸
2. 如果前期代码中所有对UI位置进行变更的逻辑都没考虑 Canvas.localScale , 那UI位移操作一定会错位的很离谱，就比如 UI 的拖拽。

解决

笔者总觉得 UI 素材因该按真实的尺寸铺开，而不是容纳在原来小一号的 Rect 中，然后再被放大（也许出于是对于未知的执着）。
所以，笔者决定放大每一个 RectTransform 的 Rect 。

分析

我们发现想要把 UI Rect 等比放大且还要保持其在 Canvas 位置保持不变，只需要把 RectTransform 这个区域的值等比放大就行了。

下面就教大家怎么用代码动态修改：

1. 想要修改 PosX 、PosY ，修改 RectTransform.anchoredPosition 即可
2. 想要修改 Left 、Right ，分别修改 RectTransform.offsetMax.x 和 RectTransform.offsetMin.x
3. 想要修改 Top 、Bottom，分别修改 RectTransform.offsetMax.y 和 RectTransform.offsetMin.y
4. 想要修改 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 赋值呢？

1. 当 AnchorsMax.x = AnchrosMin.x 时，对 PosX 、Width 赋值 ，否则对 Left、Right 赋值
2. 当 anchorMax.y = AnchorMin.y 时，对 PosY、Height 赋值，否则对 Top 、 Bottom 赋值

有必要说说上面的规律是怎么找到的，毕竟授人以渔嘛：

1. 通过调整 Anchors 的值 ，观察PosX、PosY、Left 、Right 、 Top 、Bottom 的值穷举绘制规律。

2. 看 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:

1. UI 等比放大，文字字号也要同比放大。
2. 需要对一系列的布局组件进行特别关照。
3. 如果UI上挂载自己写的脚本，需要留意是否有需要等比扩大的参数。

效果：

动画简要说明

1. UI原先设计适配最大分辨率 1920*1080
2. 当改分辨率为 4k 后，UI 位置发生变化，尺寸在屏幕占比缩小。
3. 使用本文脚本处理后，4K 分辨率下得到和 1920*1080 一样的位置和屏幕占比效果。

仓库

https://github.com/Bian-Sh/SmartRectTransformSizeHandler