Unity 蓝湖关于UI工作流优化的思考（二）

背景和历史版本在下面这篇博客中查看：

Unity & 蓝湖关于UI工作流优化的思考

最新版本：

本文旨在让不会使用Unity的其他人员在简单了解该工具后，可以帮助研发人员搭建Unity中的UI预制体，研发人员稍作调整即可用，以减轻研发人员的工作压力。

一个UI视图的预制体的制作步骤如下：

1.在蓝湖中下载该视图的所有相关切图

2.将下载的切图资源包解压缩后，拖入到Unity中Project窗口的Assets目录中的任一文件夹内

3.选中所有切图，在Inspector窗口修改Texture Type为Sprite类型，并点击右下角的Apply

4.在顶部菜单栏SKFramework中找到LanHu，打开窗口

5.点击浏览按钮选择该视图的切图所在文件夹

6.点击创建，创建一个Canvas画布，也可以选择场景中已有的Canvas

7.添加

点击添加按钮，添加一项UI视图元素

在蓝湖中点击切图的样式信息中的内容即可复制

回到Unity，点击粘贴按钮，将从蓝湖中复制的内容粘贴到对应参数中

8.删除

点击”-“号按钮，可以将该项进行移除

点击清空按钮，可以清空当前所有的配置信息

9.收缩

配置信息过多时，点击收缩按钮，可以关闭所有折叠栏

10.展开

点击展开按钮，可以打开所有折叠栏

11.生成

点击生成后，工具会根据填写的配置信息，在切图所在文件夹中加载指定切图，并将其设置到指定位置、设置指定大小，最终将生成的UI视图创建为prefab预制体。

随着预制体的生成，工具还会将该视图的所有配置信息以资产的形式保存下来

12.导入

当想要修改一个UI视图的某一元素时，点击导入按钮，将该视图的配置资产文件进行导入，修改配置内容后重新生成即可。

13.预览生成的UI视图

打开Scene窗口中的2D选项

在Hierarchy窗口找到Canvas中的UI视图，双击聚焦查看

工具完整代码：

using System;namespace SK.Framework
{/// <summary>/// 蓝湖界面UI元素/// </summary>[Serializable]public class LanHuViewElement {/// <summary>/// 图层名称/// </summary>public string name;/// <summary>/// 位置x/// </summary>public string x;/// <summary>/// 位置y/// </summary>public string y;/// <summary>/// 宽度/// </summary>public string width;/// <summary>/// 高度/// </summary>public string height;/// <summary>/// 不透明度/// </summary>public string opacity;/// <summary>/// 像素倍数/// </summary>public string pixel = "x1";/// <summary>/// 构造函数/// </summary>public LanHuViewElement(string name, string x, string y, string width, string height, string opacity, string pixel){this.name = name;  this.x = x;this.y = y;this.width = width;this.height = height;this.opacity = opacity;this.pixel = pixel;}}
}

using UnityEngine;
using System.Collections.Generic;namespace SK.Framework
{public class LanHuView : ScriptableObject{/// <summary>/// 存放切图的文件夹路径/// </summary>public string path;public List<LanHuViewElement> elements = new List<LanHuViewElement>(0);}
}

using System.IO;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;namespace SK.Framework
{/// <summary>/// 蓝湖UI界面搭建工具/// </summary>public class LanHu : EditorWindow{[MenuItem("SKFramework/LanHu")]private static void Open(){GetWindow<LanHu>("LanHu").Show();}private string path;private List<LanHuViewElement> elements;private Vector2 scroll;private const float labelWidth = 70f;private Dictionary<LanHuViewElement, bool> foldoutDic;private CanvasScaler canvasScaler;private void OnEnable(){path = "Assets";elements = new List<LanHuViewElement>();foldoutDic = new Dictionary<LanHuViewElement, bool>();}private void OnGUI(){OnTopGUI();OnElementsGUI();OnMenuGUI();}private void OnTopGUI(){GUILayout.BeginHorizontal();GUILayout.Label("切图文件夹路径：", GUILayout.Width(100f));EditorGUILayout.TextField(path);if (GUILayout.Button("浏览", GUILayout.Width(40f))){//Assets相对路径path = EditorUtility.OpenFolderPanel("选择切图文件夹", "", "").Replace(Application.dataPath, "Assets");}GUILayout.EndHorizontal();GUILayout.BeginHorizontal();GUILayout.Label("Canvas Scaler", GUILayout.Width(100f));canvasScaler = (CanvasScaler)EditorGUILayout.ObjectField(canvasScaler, typeof(CanvasScaler), true);if (canvasScaler == null){if (GUILayout.Button("创建", GUILayout.Width(40f))){var canvas = new GameObject("Canvas").AddComponent<Canvas>();canvas.renderMode = RenderMode.ScreenSpaceCamera;canvasScaler = canvas.gameObject.AddComponent<CanvasScaler>();canvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;canvasScaler.referenceResolution = new Vector2(1920f, 1080f);EditorGUIUtility.PingObject(canvas);}}GUILayout.EndHorizontal();}private void OnElementsGUI(){EditorGUILayout.Space();GUI.enabled = canvasScaler != null;scroll = EditorGUILayout.BeginScrollView(scroll);for (int i = 0; i < elements.Count; i++){var element = elements[i];if (!foldoutDic.ContainsKey(element)){foldoutDic.Add(element, true);}foldoutDic[element] = EditorGUILayout.Foldout(foldoutDic[element], element.name, true);if (!foldoutDic[element]) continue;GUILayout.BeginVertical("Box");GUILayout.BeginHorizontal();GUILayout.Label("图层", GUILayout.Width(labelWidth));element.name = EditorGUILayout.TextField(element.name);if (GUILayout.Button("粘贴", GUILayout.Width(40f))){element.name = GUIUtility.systemCopyBuffer;}if (GUILayout.Button("-", GUILayout.Width(20f))){foldoutDic.Remove(element);elements.RemoveAt(i);Repaint();}GUILayout.EndHorizontal();GUILayout.BeginHorizontal();GUILayout.Label("位置", GUILayout.Width(labelWidth));element.x = EditorGUILayout.TextField(element.x);if (GUILayout.Button("粘贴", GUILayout.Width(40f))){element.x = GUIUtility.systemCopyBuffer;}element.y = EditorGUILayout.TextField(element.y);if (GUILayout.Button("粘贴", GUILayout.Width(40f))){element.y = GUIUtility.systemCopyBuffer;}GUILayout.EndHorizontal();GUILayout.BeginHorizontal();GUILayout.Label("大小", GUILayout.Width(labelWidth));element.width = EditorGUILayout.TextField(element.width);if (GUILayout.Button("粘贴", GUILayout.Width(40f))){element.width = GUIUtility.systemCopyBuffer;}element.height = EditorGUILayout.TextField(element.height);if (GUILayout.Button("粘贴", GUILayout.Width(40f))){element.height = GUIUtility.systemCopyBuffer;}GUILayout.EndHorizontal();GUILayout.BeginHorizontal();GUILayout.Label("不透明度", GUILayout.Width(labelWidth));element.opacity = EditorGUILayout.TextField(element.opacity);if (GUILayout.Button("粘贴", GUILayout.Width(40f))){element.opacity = GUIUtility.systemCopyBuffer;}GUILayout.EndHorizontal();GUILayout.BeginHorizontal();GUILayout.Label("像素倍数", GUILayout.Width(labelWidth));if (GUILayout.Button(element.pixel)){GenericMenu gm = new GenericMenu();gm.AddItem(new GUIContent("x1"), element.pixel == "x1", () => element.pixel = "x1");gm.AddItem(new GUIContent("x2"), element.pixel == "x2", () => element.pixel = "x2");gm.ShowAsContext();}GUILayout.EndHorizontal();GUILayout.EndVertical();}EditorGUILayout.EndScrollView();}private void OnMenuGUI(){GUILayout.FlexibleSpace();GUILayout.BeginHorizontal();if (GUILayout.Button("导入", "ButtonLeft")){string presetPath = EditorUtility.OpenFilePanel("选择预设文件", Application.dataPath, "asset");if (File.Exists(presetPath)){var import = AssetDatabase.LoadAssetAtPath<LanHuView>(presetPath.Replace(Application.dataPath, "Assets"));if (import != null){elements.Clear();foldoutDic.Clear();path = import.path;for (int i = 0; i < import.elements.Count; i++){elements.Add(import.elements[i]);}Repaint();}}}if (GUILayout.Button("添加", "ButtonMid")){elements.Add(new LanHuViewElement("", "0px", "0px", "1920px", "1080px", "100%", "x1"));}if (GUILayout.Button("清空", "ButtonMid")){if (EditorUtility.DisplayDialog("提醒", "确定删除当前所有配置信息?", "确定", "取消")){elements.Clear();foldoutDic.Clear();}}if (GUILayout.Button("展开", "ButtonMid")){for (int i = 0; i < elements.Count; i++){foldoutDic[elements[i]] = true;}}if (GUILayout.Button("收缩", "ButtonMid")){for (int i = 0; i < elements.Count; i++){foldoutDic[elements[i]] = false;}}if (GUILayout.Button("生成", "ButtonRight")){var array = path.Split('/');var view = new GameObject(array[array.Length - 1]).AddComponent<RectTransform>();view.transform.SetParent(canvasScaler.transform, false);SetRectTransform(view, 0, 0, canvasScaler.referenceResolution.x, canvasScaler.referenceResolution.y);for (int i = 0; i < elements.Count; i++){var element = elements[i];string spritePath = string.Format("{0}/{1}{2}.png", path, element.name, element.pixel == "x1" ? string.Empty : "@2x");var obj = AssetDatabase.LoadAssetAtPath<Sprite>(spritePath);if (obj != null){var image = new GameObject(obj.name).AddComponent<Image>();image.transform.SetParent(view.transform, false);image.sprite = obj;RectTransform rt = image.transform as RectTransform;float.TryParse(element.x.Replace(element.x.Substring(element.x.Length - 2, 2), string.Empty), out float xValue);float.TryParse(element.y.Replace(element.y.Substring(element.y.Length - 2, 2), string.Empty), out float yValue);float.TryParse(element.width.Replace(element.width.Substring(element.width.Length - 2, 2), string.Empty), out float wValue);float.TryParse(element.height.Replace(element.height.Substring(element.height.Length - 2, 2), string.Empty), out float hValue);/*float.TryParse(element.x, out float xValue);float.TryParse(element.y, out float yValue);float.TryParse(element.width, out float wValue);float.TryParse(element.height, out float hValue);*/SetRectTransform(rt, xValue, yValue, wValue, hValue);}else{Debug.Log($"<color=yellow>加载切图失败 {spritePath}</color>");}}//创建预设文件var preset = CreateInstance<LanHuView>();for (int i = 0; i < elements.Count; i++){preset.elements.Add(elements[i]);}preset.path = path;AssetDatabase.CreateAsset(preset, string.Format("Assets/{0}.asset", view.name));AssetDatabase.Refresh();Selection.activeObject = preset;//创建Prefabvar prefab = PrefabUtility.SaveAsPrefabAsset(view.gameObject, $"Assets/{view.name}.prefab", out bool result);if (!result){Debug.Log($"<color=yellow>生成预制体失败 {view.name}</color>");}else{EditorGUIUtility.PingObject(prefab);}}GUILayout.EndHorizontal();}private void SetRectTransform(RectTransform rt, float x, float y, float width, float height){//调整位置及大小rt.anchorMin = new Vector2(0, 1);rt.anchorMax = new Vector2(0, 1);rt.pivot = Vector2.one * .5f;rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, width);rt.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, height);rt.anchoredPosition = new Vector2(x + width / 2f, -(y + height / 2f));//调整完成后自动设置锚点RectTransform prt = rt.parent as RectTransform;Vector2 anchorMin = new Vector2(rt.anchorMin.x + rt.offsetMin.x / prt.rect.width,rt.anchorMin.y + rt.offsetMin.y / prt.rect.height);Vector2 anchorMax = new Vector2(rt.anchorMax.x + rt.offsetMax.x / prt.rect.width,rt.anchorMax.y + rt.offsetMax.y / prt.rect.height);rt.anchorMin = anchorMin;rt.anchorMax = anchorMax;rt.offsetMin = rt.offsetMax = Vector2.zero;}}
}

Unity 蓝湖关于UI工作流优化的思考（二）相关推荐

Unity 蓝湖关于UI工作流优化的思考
我们Unity项目关于UI界面制作的工作流是这样的,UI设计人员将设计好的UI界面在Adobe XD中上传至蓝湖,Unity程序猿从蓝湖中下载切图资源包导入项目工程中,根据蓝湖中的效果图.样式信息进行 ...
「蓝湖设计协作平台」一切为了更好的交付
「蓝湖设计协作平台」一切为了更好的交付. 最近,蓝湖对产品性能做了一次整体升级,一句话来说:打开速度更快了,操作更流畅了. 打开速度更快,具体是指设计页和标注页在不同情况下的打开速度均有提升. 比如说 ...
【愚公系列】2022年10月微信小程序-电商项目-UI设计之蓝湖的使用
文章目录前言一.UI设计之蓝湖的使用 1.下载插件 2.生成代码 3.配置代码前言蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图.蓝湖可以在线展示Axure,自动生 ...
蓝湖ui设计图直接转换html,蓝湖使用规范（用于管理UI及前端切图）
蓝湖使用规范一.蓝湖插件下载及安装二.团队项目建立流程 1.新建团队(横琴人寿) 2.新建项目在对应的团队下新建项目例如官微项目,官网项目,i保项目,哆来咪项目 3.新建分组在相应的项目下按 ...
蓝湖--UI切图软件，适用于ios，安卓，Web
蓝湖使用环境,需要在 PSCC2015以上版本使用,需要官方提供的压缩工具才能打开. 官网直接下载安装,结束后可直接在PS,窗口-->扩展工具中打开. 切图及标注使用方法: 扩展中打开,登录蓝湖 ...
【React组件】写一个模仿蓝湖的图片查看器
前言最近公司让写一个可以自由拖拽放大的图片查看器,我寻思这还不简单,一顿操作猛如虎,俩小时后: 事实证明,一旦涉及到 DOM 的变换操作,如果很多细节考虑不全,抓过来就写,那基本就凉了.于是我仔细分 ...
怎么用class引入svg_【蓝湖指北】走向设计巅峰，从蓝湖 Sketch 插件开始，用它！...
用好蓝湖,提升团队协作效率,蓝湖指北,教你如何用好蓝湖.本期[蓝湖指北]如约而至- Sketch 作为一款轻量级的矢量设计工具,凭借其强大的界面设计功能,被大多数 UI 设计师所使用,日渐成为产品研发 ...
蓝湖怎么切图标注_【蓝湖指北】你真的会切图吗？
用好蓝湖,提升团队协作效率, 蓝湖指北,教你如何用好蓝湖. 本期[蓝湖指北]如约而至- 应付奇葩需求.交付设计图,乃设计师职业生涯中的两大难题.对 UI 设计师而言,交付设计图绝不只是打包.发送设 ...
（51）蓝湖团队协作开发平台
一.Adobe Photoshop 二.Adobe Fireworks 三.Sketch(Mac版本电脑前端程序员最喜欢的切图工具) 四.插件:Cutterman(早期程序员最爱用的插件) 蓝湖(现在 ...

Unity 蓝湖关于UI工作流优化的思考（二）

Unity 蓝湖关于UI工作流优化的思考（二）相关推荐

最新文章

热门文章

Unity 蓝湖 关于UI工作流优化的思考（二）

Unity 蓝湖 关于UI工作流优化的思考（二）相关推荐

最新文章

热门文章

Unity 蓝湖关于UI工作流优化的思考（二）

Unity 蓝湖关于UI工作流优化的思考（二）相关推荐