Unity新界面組件UIElements運行時(Runtime)模式試用

原文地址：https://blog.csdn.net/t163361/article/details/104051050

前段時間Unity放出了UIElement的運行時模式演示Demo
最近做一個比較簡單的界面功能的時候，使用到了運行時模式時有一些個人體會，記錄如下：

概述

UIelement本身的基礎類是在UnityEngine層面的，所以底層是支持Editor/Runtime雙模式的。
之前官方放出的都是Editor下的相關內容，相關教程也都是Editor的。本篇講的是Runtime模式
由於Runtime還處於早期預覽階段，官方Demo裏直接提供的支持運行時的代碼，放在Assets/UIERuntime文件夾下。
其中只有Editor，Runtime和USS是有用的，前兩個是代碼，USS是樣式表，可以編輯Default.uss.asset這個文件來設置界面的樣式，如圖片，字體，顏色號等。

界面創建

界面的創建可以使用UIBuilder，而想要在Runtime下使用就需要創建一個Runtime的渲染對象。
當前提供了一個菜單命令可以快速創建一個界面渲染對象，在Hierarchy裏面點擊右鍵，UIElements/Panel就可以快速創建一個界面渲染對象。
渲染對象包含三個組件

• PanelScaler 用來控制界面在GameView中的佈局方式
• PanelRender 核心類用來配置界面的佈局文件和樣式表
  Uxml 設置通過UIBuilder創建出來的uxml文件
  Unity Style Sheet 用來配置上面提到的Default.uss.asset文件
  Enable Live Updates 貌似是支持UIBuiler修改後實時刷新界面的一個開關
• EventSystem 用來響應輸入事件

控件使用

控件的使用需要有一個初始化的過程
PanelRenderer組件中有個回調函數postUxmlReload，可以在回調函數裏面寫初始化的代碼，比如官方demo中GameManager.cs的BindMainMenuScreen函數有如下代碼

var root = m_MainMenuScreen.visualTree;
var startButton = root.Q<Button>("start-button");
if (startButton != null)
{
     startButton.clickable.clicked += () =>
     {
         StartRound();
     };
 }

這段代碼就是先查找對應的按鈕控件，然後設置點擊的回調函數。

類似的Label可以類比着使用，如下：

		private Label _recordTime;
		
		private IEnumerable<Object> BindTimelineInfo()
        {
            var root = _timelineInfo.visualTree;            
            _recordTime    = root.Q<Label>("RecordTime");
            _recordTime.text = string.Format("T:{0}",DateTime.Now.GetDateTimeFormats('g')[0]);
            return null;
        }
        void UpdateInfo()
		{
			_recordTime.text = string.Format("T:{0}",DateTime.Now.GetDateTimeFormats('g')[0]);
		}

這段代碼就是初始化的時候查找RecordTime控件，然後在UpdateInfo中觸發控件內容的更新操作

技巧

• Default.uss.asset可以自己編輯，但目前官方沒給生成工具，可以仿照官方的簡化使用。
• 控件的一些屬性不是直接可以訪問的，需要通過修改style裏面的值來訪問，例如UIBuilder裏面有一項Display可以控制控件是否生效，可以使用如下代碼來修改

  _trackInfos[i].style.display = DisplayStyle.Flex;
  

  其他屬性也可以類比着修改

建議和BUG

目前運行時模式配合UIBuilder來使用還是很簡單的。不過畢竟是很早期的版本，還有很多功能沒有或者有BUG。簡單列舉如下。
1.目前沒看到如何支持粒子特效和3D模型，這就導致作爲遊戲界面來說很有影響。
2.字體無描邊，陰影功能
3.字體的範圍計算有問題，當父節點設置爲自動適配大小時，範圍不對，可以設置絕對大小來暫時避免問題