【通用】UI系列教程（二）——初步设计

首先强调，本系列教程主要是基于触发中处理UI，FDF相关的使用以及美术方面不作过多讨论。
在创建UI之前，我们应该用整体的眼光去看待我们即将创建的UI，或者说从宏观上去看待整个UI的层次体系。
本篇将从father以及相对位置两个角度出发去理解。

father，即一个UI的父节点
在第一篇中有提到，father是创建UI时的一个重要参数。当一个UI被隐藏时，所有以他作为father节点的UI都会被一起隐藏。
我相信肯定有新手默认地全用游戏UI作为父节点，需要控制显隐的时候再逐个去控制，这样显然是很麻烦的。
我们应该针对具体的功能需要，对UI进行组合封装。原生UI提供给我们的都是最基本的功能控件，很多功能都不可能只由单个控件就满足需求。比如血条，我们需要图片，也需要文字。某个按钮，需要背景、按钮、文字，等等。当我们需要为一个功能做UI时，不要盲目的下手，应该针对其特征进行拆分、封装，这样处理起来才更加方便。整张图的所有UI，最终应该组成一个饱满的树结构或是图结构，应当是层次分明的，而不应该停留在单薄的平面结构，那样则太松散。
举个例子：我想做一个简单的伤害排行面板。最初我只记录单位的累计伤害，展示前4名的。
第一眼我们就可以知道，有两大部分：整个的背景，展示伤害的长条。而展示伤害的长条部分又可以拆分成4个单元，他们的功能是完全一样的，都是一个长条来形象得展示伤害高低，以及一个文本来直观地显示伤害数值，再有一个标识部分来区分这是谁的伤害。
于是我们针对长条伤害展示部分封装一个UI。他由3部分组成，数值（text），长条（backdrop），标识（text或backdrop都可以）。他们三个是一个整体的。我们还可以专门再创建一个frame作为他们的father，他们则互为兄弟。
这样，一个伤害排行面板就被我们进行了有层次的封装，当我们需要显隐、调整展示数量的时候都可以通过长条整体统一的进行操作。

位置的设置
第一讲有提过，UI的位置有两种设置方式。
相对位置：相对于其他UI的位置。
绝对位置：屏幕坐标的位置。屏幕左下角为（0，0）点右上角（0.8，0.6）
绝对位置不用多说，该在哪儿就在哪儿。主要说说相对位置。
相对位置可以同步的影响关联UI的位置，所以在设置相对位置时一定要理清因果关系，而不是只看表面上单纯的位置关系。
比如我先创建了一个功能面板A。我想把它放在游戏界面的左边。然后我利用相对位置绑定了它和游戏UI的位置关系。
后来我又创建了一个功能面板B。我也想把它放在游戏界面的左边，刚好A下面还有一片空位。此时应该如何设置？当然也是应该绑定游戏的UI而不是面板A。
有的人会觉得，绑A比较方便，直接用B的右上角绑A的右下角，这样不是可以完美地契合吗？这样表面上看确实没问题，但这种契合应该是由我们的计算得出的，而不是直接通过绑定得到。
A和B之间本质是两个完全不相关的UI，所以他们之间不应该有任何依赖关系。我们的初衷是想把B放在整个UI的左侧，恰好左侧有个A。而不是想把B放在A的下面，恰好A在左侧。搞清楚这点很关系。
回到上文的伤害面板例子，我们把每个伤害长条封装成一个整体。他们内部的几个控件之间建立相对的位置关联，再将这个整体的代表，如frame，与上层的面板背景之类的建立联系。这样无论将来数量如何进行扩张，形式如何进行调整，最终都是整洁的，也不需要进行繁琐的位置计算。

游客，如果您要查看本帖隐藏内容请回复

捕捉一个真大佬

学习一下，看看

学习一下，看看

康康说明

谢谢分享

学习学习~

大神，又来看你教程了！！

习一下，看看

雨散云飞 发表于 2020-11-23 11:45
大神，又来看你教程了！！

谢谢支持，大神不敢当