TTUI GitHub: https://github.com/chiuan/TTUIFramework

TTUI框架

适用于Unity3D的UI框架

• 用户界面就像一本书，pages所见即所得。您可以轻松地在页面之间跳转。
• 创建新页面时，只需重写某些功能！
• 简单！简单！简单！

用法

在我们日常开发当中接触最多的就是UI，为了方便管理我们的UI，例如UI的跳转，关闭等等一些操作，网上有很多管理UI的框架，今天我会做一个小demo来带领大家如何使用TTUI。
1.创建page

page1

public class Page1 : TTUIPage
{
    public Page1() : base(UIType.Normal, UIMode.DoNothing, UICollider.None)
    {
        uiPath = "UI/页面一";
    }
    public override void Awake(GameObject go)
    {
        base.Awake(go);
        Debug.Log("Awake");
        Button btn = go.transform.Find("Button").GetComponent<Button>();
        btn.onClick.AddListener(() =>
        {
            string dataString = "页面二";
            TTUIPage.ShowPage<Page2>(dataString);
            TTUIPage.ClosePage<Page1>();
        });
    }
    public override void Hide()
    {
        base.Hide();
        Debug.Log("Hide");
    }
    public override void Active()
    {
        base.Active();
        Debug.Log("Active");
    }
    public override void Refresh()
    {
        base.Refresh();
        Debug.Log("Refresh");
    }
}

层级关系

uiPath = "UI/页面一";

uiPath是TTUIPage里面的一个静态字段，就是UI预制体在Resources下的路径。

    public override void Awake(GameObject go)
    {
        base.Awake(go);
    }

这里的 go 就代表着我们当前page（页面一），同时TTUI麻烦的一点就是想要获取UI下的物体只能用代码查找，不能在属性面板里面拖拽。我也讲解一下为什么go就代表我们的UI预制体：

        protected void Show()
        {
            //1:instance UI
            if (this.gameObject == null && string.IsNullOrEmpty(uiPath) == false)
            {
                GameObject go = null;
                if (delegateSyncLoadUI != null)
                {
                    Object o = delegateSyncLoadUI(uiPath);
                    go = o != null ? GameObject.Instantiate(o) as GameObject : null;
                }
                else
                {
                    go = GameObject.Instantiate(Resources.Load(uiPath)) as GameObject;
                }

                //protected.
                if (go == null)
                {
                    Debug.LogError("[UI] Cant sync load your ui prefab.");
                    return;
                }

                AnchorUIGameObject(go);

                //after instance should awake init.
                Awake(go);

                //mark this ui sync ui
                isAsyncUI = false;
            }

TTUIPage里面的show方法里面会声明一个变量go来接收我们生成的预制体，将其传给Awake。到这里我也附加说明一下为什么我们把UI预制体放入Resources里面就能加载到我们的UI的。

public static Func<string, Object> delegateSyncLoadUI = null;

在TTUIPage里面定义了一个Func委托，并在TTUIBind里面，他将delegateSyncLoadUI与Resources.Load方法绑定，这时候show（）方法中Object o = delegateSyncLoadUI(uiPath)等同于Resources.Load(uiPath)，那么我们每创建一个UIpage只需要在构造方法中指定uiPath的路径就可以找到我们的UIPrafab了。

namespace TinyTeam.UI
{
    using UnityEngine;
    using System.Collections;

    /// <summary>
    /// Bind Some Delegate Func For Yours.
    /// </summary>
    public class TTUIBind : MonoBehaviour
    {
        static bool isBind = false;

        public static void Bind()
        {
            if (!isBind)
            {
                isBind = true;
                //Debug.LogWarning("Bind For UI Framework.");

                //bind for your loader api to load UI.
                TTUIPage.delegateSyncLoadUI = Resources.Load;
                //TTUIPage.delegateAsyncLoadUI = UILoader.Load;

            }
        }
    }
}

脚本写完之后我们就可以删除场景中的Canvas和EventSystem。再创建一个StartGame脚本来显示我们这个UI预制体。

using UnityEngine;
using TinyTeam.UI;

public class StartGame : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        //TTUIPage tt = new Page1();
        //TTUIPage.ShowPage("Page1", tt);
        TTUIPage.ShowPage<Page1>();
    }
}

根据TTUIPage里面的ShowPage方法可以看出来，生成UI的方法有很多参数，我这就写了两种生成方式。将脚本挂载到摄像机上，运行，就能显示我们的page（页面一），我在页面一下创建了一个Button同时绑定方法来打开page2（页面二）。

        btn.onClick.AddListener(() =>
        {
            string dataString = "页面二";
            TTUIPage.ShowPage<Page2>(dataString);
            TTUIPage.ClosePage<Page1>();
        });

这里大家会发现，我在打开page2的时候同时传递一个string类型的参数，这个参数是TTUIPage定义好的一个参数，他允许我们在打开一个页面的时候传递消息或者某一类信息供下一个页面使用。

        protected object data { get { return m_data; } }

运行一下点击按钮跳转到页面二的时候会打印一下“页面二 ”。

打印输出

做到这里相信大家对TTUI框架有了一定的了解，如有什么疑问，欢迎评论留言，博主看到我回复。

本次讲解就到这里，有关虚仿技术问题请小伙伴们添加QQ群：941928511，大家一起探讨！
版权声明：本文为博主原创文章，转载请附上原文出处链接和本声明