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只需做些调整即可,更多的功能可以自己拓展。