Unity懒人福利————— 一键搭UI工具

RoadLun原创，转载请声明

众所周知，搭UI是一件繁琐无聊枯燥乏味的事情，具本博主见闻，很多公司会招妹子程序员专门搭UI和UI相关的逻辑。设置每个UI的锚点和坐标真是一个繁重的工作。例如很多手游的某一个菜单栏下有许多子按钮，某天策划觉得这些按钮的间距太小，这时候就需要程序员挨个调整，十分头痛。博主在工作中也遇到这个问题，项目中的UI都是由旁边的妹子一个个修改，十分麻烦，所以博主写了一个一键搭UI的工具，效果如下：

 

可见，图中的panel下的按钮的位置十分杂乱，锚点也是参差不齐。用这个工具设置好各个属性，然后点击“放松泡杯茶”按钮，这时所有的按钮都规规矩矩，整齐划一，不论是RectTransform里的top、left、bottom、right属性，还是锚点的位置，都已经计算好了，规规矩矩的。节省下的时间可以伸个懒腰，泡杯茶。

想统一修改所有元素的间距、宽高比、按钮偏移等等？？  不要着急，只需设置好想要的参数，点击“放松泡杯茶”按钮，元素就自动设置完成。

 写这个小工具只需70行代码，核心代码只有10多行，可以说是非常简单了。下面讲实现方式

1.首先这是一个工具脚本，必须引用UnityEditor类，必须继承EditorWindow类，必须有指定的构造函数，必须用Attribute使按钮显示到Uinty面板上，实现OnGUI绘制面板。

2.在面板上绘制出各个输入框和按钮

3.按下按钮实现方法，遍历panel的子物体的RectTransform，计算出锚点的位置(RectTransform的anchorMin和anchorMax属性)，并统一设置偏移量（RectTransform的offsetMax和offsetMin属性）

源码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;

public class EasyUI : EditorWindow
{



    
    //需要布局的Panel
    GameObject panel;
    //上边界距离
    float upBorderDistance;
    //元素的高度
    float elementHight;
    //元素的间距
    float elementDistance;
    //所有元素与左边界距离
    float leftDistance;
    //所有元素与右边界距离
    float rightDistance;
    //所有panel子对象的left,top,right,bottom值
    float elementLeft;
    float elementRight;
    float elementTop;
    float elementBottom;

    //利用构造函数来设置窗口名称
    EasyUI()
    {
        titleContent = new GUIContent("UI雷驴---快速布局工具");
    }
    //添加菜单栏用于打开窗口
    [MenuItem("Tool/EasyUI")]
    static void ShowWindow()
    {
        EditorWindow.GetWindow(typeof(EasyUI));
    }
    //开始绘制编辑器窗口
    private void OnGUI()
    {

        GUILayout.BeginVertical();

        panel = (GameObject)EditorGUILayout.ObjectField("需要布局的panel", panel, typeof(GameObject), true);
        upBorderDistance = EditorGUILayout.FloatField("元素与上边界距离", upBorderDistance);
        elementHight = EditorGUILayout.FloatField("元素的高度", elementHight);
        elementDistance = EditorGUILayout.FloatField("各元素间距", elementDistance);
        leftDistance = EditorGUILayout.FloatField("元素左边距", leftDistance);
        rightDistance = EditorGUILayout.FloatField("元素右边距", rightDistance);

        elementLeft= EditorGUILayout.FloatField("left", elementLeft);
        elementRight= EditorGUILayout.FloatField("right", elementRight);
        elementTop= EditorGUILayout.FloatField("top", elementTop);
        elementBottom= EditorGUILayout.FloatField("bottom", elementBottom);
        
       
        //绘制按钮
        if (GUILayout.Button("放松泡杯茶"))
        {
            
            LayoutElement(); 

        }

    }
    Vector2 ancMin;
    Vector2 ancMax;
    void LayoutElement() {
        int i = 0;
        foreach (RectTransform child in panel.transform)
        {
            ancMin = new Vector2(leftDistance, 1 - (i * elementDistance + (i + 1) * elementHight + upBorderDistance));
            ancMax = new Vector2(1 - rightDistance, 1 - (i * (elementHight + elementDistance) + upBorderDistance));
            //if (!JudgeVector2(ancMin) || !JudgeVector2(ancMax))
            //{
            //    Debug.Log("错误：输入值错误————————元素的RectTransform.anchorMin或RectTransform.anchorMax越界");
            //    return;
            //}
            child.anchorMin = ancMin;
            child.anchorMax = ancMax;
            
            child.GetComponent<RectTransform>().offsetMax = new Vector2(elementRight, elementTop);
            child.GetComponent<RectTransform>().offsetMin = new Vector2(elementLeft, elementBottom);
            i++;
        }
    }
    //判断一个vector2是否在0-1的范围内
    bool JudgeVector2(Vector2 vec)
    {
        return vec.x >= 0 && vec.x <= 1 && vec.y >= 0 && vec.y <= 1;
    }
}

然后在uinty的工具栏找到EasyUI选项即可打开：

ok，这就是一个快速搭建UI的小工具，只能搭建竖直的panel，想搭建水平的Panel只需做些调整即可，更多的功能可以自己拓展。