一个把 Unity Editor Tab 功能使用 UGUI 实现的库,为运行时的 Tab 交互体验而生，你值得拥有！
GitHub 上的工程多如繁星，有些好的仓库，但凡不经意间错过了就很难找回，故稍作采撷，希望能帮助到有心人。
本文集以一个小的功能点为单位行文，也便于拾取罢！
简介：
笔者今天推荐的仓库叫 UnityDynamicPanels。
这个仓库功能非常之酷，他将 Unity 的 Tab 理念使用 UGUI 在运行时完美的展现在了大家的面前。什么Tab布局，保存/恢复布局信息，Tab 停靠吸附功能，Tab叠加，基本上Unity Editor 有的体验他都有。
功能：
- Supports all canvas modes (Screen Space and World Space)
支持所有Canvas 模式（屏幕空间和世界空间） - Supports multiple canvases (panels can be moved between canvases by dragging)
支持多个画布，且面板可以在画布之间通过拖拽而来回转移。 - Has an extensive Scripting API to create/manipulate panels by code
有一大票 API 供你在脚本中创建这些面板。 - Each panel costs 3 additional batches (this number can increase with each tab using a custom icon)
每新增一个panel 仅仅新增 3个批（如果使用自定义 Icon 可能会自增） - 高度还原的 UnityEditor 的 Tab 交互体验。
使用：
下载工程找到 Demo 就能肝了,笔者已经上手试过了，非常简单！
示例代码（如下）：
using UnityEngine;
using DynamicPanels;
public class PanelCreator : MonoBehaviour
{
public DynamicPanelsCanvas canvas; //所有Panel 必须依赖 这个组件
public RectTransform content1, content2, content3, content4; //指定panel包裹的 对象
public string tabLabel1, tabLabel2, tabLabel3, tabLabel4; //指定名称
public Sprite tabIcon1, tabIcon2, tabIcon3, tabIcon4; //指定 Tab 上的 Icon
void Start()
{
// Create 3 panels 创建3个 面板
Panel panel1 = PanelUtils.CreatePanelFor( content1, canvas );
Panel panel2 = PanelUtils.CreatePanelFor( content2, canvas );
Panel panel3 = PanelUtils.CreatePanelFor( content3, canvas );
// Add a second tab to the first panel 将第二个Tab 添加到第一个面板上
panel1.AddTab( content4 );
// Set the labels and the (optional) icons of the tabs 为面板指定标题和图标
panel1[0].Icon = tabIcon1; // first tab 第一个 Tab
panel1[0].Label = tabLabel1;
panel1[1].Icon = tabIcon4; // second tab 第二个 Tab
panel1[1].Label = tabLabel4;
panel2[0].Icon = tabIcon2;
panel2[0].Label = tabLabel2;
panel3[0].Icon = tabIcon3;
panel3[0].Label = tabLabel3;
// Set the minimum sizes of the contents associated with the tabs
// 使用缩小尺寸分配这些 Tab
panel1[0].MinSize = new Vector2( 300f, 300f ); // first tab 第一个 Tab
panel1[1].MinSize = new Vector2( 300f, 300f ); // second tab 第二个Tab
panel2[0].MinSize = new Vector2( 300f, 300f );
panel3[0].MinSize = new Vector2( 300f, 300f );
// Create a vertical panel group 创建一个垂直分组
// elements are always arranged from bottom to top 元素总是选择自下而上排布
PanelGroup groupLeftVertical = new PanelGroup( canvas, Direction.Top );
groupLeftVertical.AddElement( panel1 ); // bottom panel 底部面板
groupLeftVertical.AddElement( panel2 ); // top panel 顶部面板
// Dock the elements to the Dynamic Panels Canvas (the order is important)
// 将元素吸附到 DynamicPanelCanvas （顺序相当重要）
panel3.DockToRoot( Direction.Bottom );
groupLeftVertical.DockToRoot( Direction.Left );
// Rebuild the layout before attempting to resize elements or read their correct sizes/minimum sizes
// 在改变元素打小前需要 重建布局 否则不能读取到正确的 尺寸哈。
canvas.ForceRebuildLayoutImmediate();
// It is recommended to manually resize layout elements that are created by code and docked.
// 如果有代码动态生成和停靠的面板强烈建议你调用这个重建的动作
// Otherwise, their sizes will not be deterministic. In this case, we are resizing them to their minimum size
//否则这些panel 的尺寸就不确定啦，在这种情况下我们默认使用最小尺寸初始化它们了
groupLeftVertical.ResizeTo( new Vector2( groupLeftVertical.MinSize.x, groupLeftVertical.Size.y ) );
panel3.ResizeTo( new Vector2( panel3.Size.x, panel3.MinSize.y ) );
}
}
演示：
DynamicPanel
Tips:
- 演示了Demo的环境搭建，认识场景布局。
- 演示Unity Editor Tab功能在UGUI的实现：拖拽，合并，布局，停靠，游离。。。
- 更多功能以及 API 可以去阅读该仓库的ReadMe,当然可以以自己扩展哈。
- 时间关系示例中未使用以上展示的代码。
链接：
结语：
如果你想在运行时搞点特别的UI交互体验，Unity Dynamic Panels 可以考虑一下。
本文集持续更新ing，喜欢记得点赞关注哦！
