【UI - 初级难度】Roblox的UI系统--第3章

写在前面
非常开心前2篇教程获奖,感谢评审团,希望Roblox越来越好,也希望我的教程可以真的帮到大家,我也会持续更新的,不再多说,进入正题!

UI布局方式
背包在游戏中的地位大家肯定都知道,所有的道具都会存在背包里,有些游戏的背包还会根据道具的类型进行分类,我们单击对应的类型页签,背包的内容就会刷新。比如下面这种装备背包。

我们先来分析下这个界面,标题很简单,一个TextLabel可以搞定,左侧区域是由多个TextButton纵向排列组成的列表,右侧是由多个格子组成,每个格子里包含一个ImageLabel。
根据《Roblox的UI系统–其一》中的方法,我们完全可以拼出这样一个界面,但是想想都能知道,列表,格子这种结构,需要我们用很多的精力去对位置,而且一旦数量变多时,会是很庞大重复的工作量,Roblox为我们提供了几种布局方式,就是解决这种问题的,我们来看看改如何使用。
和上次的LoginUI一样我们先搭建UI的框架

我们把界面简单分成3个区域,标题(Title),装备类别列表(EquipTypeList),装备背包(EquipBag),每个区域对应一个Frame,Title下添加一个TextLabel,并修改其属性,通过原来的教程,大家应该都很熟悉怎么做了。下面我们来做左边的装备类别列表。

UIListLayout
移动鼠标到EquipTypeList上,在其右侧会出现一个加号,单击加号会弹出一个列表

在列表中找到UIListLayout,并单击,之后会在EquipTypeList下面看到新加的UIListLayout。
UIListLayout会帮我们完成一个列表布局,列表可以是纵向的,也可以是横向的。UIListLayout会影响其父节点下的所有子节点,子节点会按照节点自己的大小依次排列,为了看到效果我们添加一些TextButton。

我随意的复制了几个TextButton,可以发现TextButton自动的紧密纵向排列,我们并没有调整他们的位置,这就是UIListLayout对他们起的效果。单击其中一个TextButton查其Position属性

显示Overridden By UIListLayout,意思是位置属性被UIListLayout复写,我们尝试改变下面的x,y,会发现不起效果,因为他的位置是被UIListLayout计算得到的,我们无法控制,但TextButton的Scale属性不受影响

我们尝试改一下看看效果

我修改了4个TextButton的大小,可以看到每个TextButton还是会紧密的挨在一起,非常好用。
接下来我们看看UIListLayout的属性,单击UIListLayout

Padding:影响列表中每个元素之间的间隔,通过调整这个值,我们可以让每个元素按照填充方向拉开相等的距离

AbsoluteContentSize:列表中所有元素的大小总和,这个值不能改,它也是通过计算得到的
FillDirection:填充方向,默认是Vertical纵向,单击后可以选择Horizontal使其变为横向


SortOrder:列表内元素的排序方式,Name是按照元素的Name属性按字母序列排序,LayoutOrder是按照元素的LayoutOrder的大小排序,为了看到效果我们修改下TextButton的Name属性和Text属性,并将UIListLayout的SortOrder属性调为Name

可以看到列表按照字母的序列排序,这时我们把a的Name改为z

发现Explorer面板中的顺序没有发生改变,而界面中Text为a的元素排到了最后。
有些功能是很强调顺序的,比如这里我们就是希望Name为z,Text为a的元素排在第一位,要怎么做。这时就需要LayoutOrder属性了。首先修改UIListLayout的SortOrder 属性为LayoutOrder,然后修改b,c,d,e TextButton的LayoutOrder属性为1,z的LayoutOrder保持为0

再来看看界面

Name为z,Text为a的TextButton排在了第一位。
HorizontalAlignment:水平对齐方式,分为居左(Left),居中(Center),居右(Right)

VerticalAlignment:垂直对齐方式,分为顶部对齐(Top),居中(Center),底部对齐(Bottom)

Archivable:通用属性,代表lua中是否可以克隆该元素,这里就不具体说明了
有了UIListLayout布局,做上面那种列表非常方便,删掉随意创建的TextButton,重新创建6个,并修改大小,命名和文本内容,注意下排列顺序,轻松搞定。

以上!
原作者 - 大鱼团队

关于我们    加入我们    条款    隐私政策
©2021 Roblox Corporation、Roblox、Roblox 标志及 Powering Imagination 是我们在美国及其他国家或地区的注册与未注册商标。
粤ICP备20013629号