MarkLight以XML编写UI

写在前面

接触过web前端的人，应该都知道网页 以Html+Css+Js的形式构成，这种高度灵活的方式一直延续至今。当然后续推出了如Vue、Rective等前端框架和Thymeleaf、Asp等模板引擎。。。扯远了…

总之，我们可以借鉴Web的做法，使用类似的结构去编写Unity Ui，如Unity 的新UI系统 UIElement（UiToolkit）也是这么做的。此文并不想介绍UIElement，因为通过作者实际使用体验来说，UIElement还有很多路要走，可能在制作编辑器领域可以打破原先Gui的桎梏，然而在运行时下的UI，MarkLight 则舒服许多。

关于MarkLight

在Ui框架的领域中一直流行MVVM的设计，M 模型 V 视图 VM 视图模型 通过三者的配合，可以将表现层与逻辑层相分离，有利于解除耦合。MarkLight 同样是使用了这一套设计方案，通过Xml文件编写View,配合ViewModel的C#文件进行控制。同时吸纳了Html的优点，使用类Css的Xml文件可以对控件进行统一的样式配置，这让换肤和界面规范统一变得十分容易。

快速食用

首先我们可以通过包管理器或者其他方式，将MarkLight导入项目中。

此时我们创建如下文件夹：

image-20230207100516762

Resources 存放所有的图片、音效等资源
ViewModels 存放所有的View对应的ViewModel
View 存放所有的UI元素

创建一个视图View

右键->Create->View 创建一个名为MainMenu的xml

给新创建的Xml，写入如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
<MainMenu>
    <Region Width="25%" Alignment="Left" BackgroundColor="#353535">
        <Group Spacing="10px">
            <Button Text="Play" Click="Play" />
            <Button Text="Options" Click="Options"/>
            <Button Id="btn" Text="Quit" Click="Quit"/>
            <Button Text="测试" Click="Test"/>
        </Group>
    </Region>
    <Region Width="75%" Alignment="Right" BackgroundColor="#949494">
    </Region>
</MainMenu>

右键->Create->View 创建一个名为MainMenuScene的xml 作为根Ui

1
2
3
4
5
6
<MainMenuScene>
    <UserInterface Width="1024" Height="768">
        <MainMenu />
    </UserInterface>
    <EventSystem />
</MainMenuScene>

创建一个空物体改名UIRoot并为其添加如下脚本，设置MainView为MainMenuScene，Default Theme 为Flat。

image-20230207102610139

此时你将会看到场景中多了UI，并且在UIRoot下生成了许多子物体。

image-20230207102854443

绑定ViewModel

在ViewModels文件夹下创建一个MainMenu.cs 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MainMenu: UIView
{
        public void Play()
        {
            print("Play");
        }

        public void Options()
        {

            print("Options");
        }

        public void Quit()
        {

            print("Quit");
        }
    }

在其中添加方法可以绑定到Button的Click事件。

++ PS：在MarkLight中使用名称强相关进行绑定，所以所有的文件名、方法名都需要一致。 ++