社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Git

[Unity 3d] Unity Dynamic Panels For Runtime- GitHub

雨落随风 • 6 年前 • 419 次点击  

一个把 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,当然可以以自己扩展哈。
  • 时间关系示例中未使用以上展示的代码。

链接:

yasirkula/UnityDynamicPanels: Draggable, resizable, dockable and stackable UI panel solution for Unity 3D

结语:

如果你想在运行时搞点特别的UI交互体验,Unity Dynamic Panels 可以考虑一下。

本文集持续更新ing,喜欢记得点赞关注哦!

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/34836
 
419 次点击