UI组件的分组和布局技术 - 2019.3

如果您使用的是Unity 2019.2或更低版本，请单击此处。

Unity的UI系统非常灵活，几乎称得上是无所不能。有时，在某些情况下我们无法预知需要显示什么，而是只知道我们还有充足的空间。示例之一就是角色扮演游戏中的背包系统。开发人员可以决定游戏中可能发生的事情，但试图为每种可能的情况设计UI却是不切实际的。相反，Unity提供了布局组来处理UI元素的排列问题。在本练习中，我们将创建一个使用Vertical Layout Group（垂直布局组）和Grid Layout Group（网格布局组）的背包系统。还有一个Horizontal Layout Group（水平布局组），其功能与Vertical Layout Group类似。按布局组排列的UI元素可以选择带Layout Element组件以进行更多控制。

1. 创建一个新脚本“InventoryItemButton”，然后在“Project”窗口中双击以打开Visual Studio。

2.删除“Update”，因为在本练习中不需要它。将“Start”更改为“Awake”。

3.在第4行输入：

using UnityEngine.UI;

4.从第7行开始处输入：

private Text buttonText;
private string[] itemTypes = { “Armor”, “Weapon”, “Spell” };
public int typeIndex;

5.在“Awake”中，从第13行开始处输入：

index = Random.Range(0, 3);
buttonText = GetComponentInChildren<Text>();
buttonText.text = itemTypes[index];

6.“InventoryItemButton”即告完成（图01）。保存您的更改。

7.返回Unity编辑器，创建一个名为“InventoryDisplay”的新脚本，然后在Visual Studio中打开。

8.删除“Start”和“Update”。该脚本仅负责显示和隐藏背包系统中的项目。

9.从第6行开始处输入：

public void ShowOnly(int itemType)
{
	for (int i = 0; i < transform.childCount; i++)
	{
   	InventoryItemButton thisItem = transform.GetChild(i).GetComponent<InventoryItemButton>();
    	thisItem.gameObject.SetActive(thisItem.typeIndex == itemType);
	}
}

public void ShowAll()
{
	for (int i = 0; i < transform.childCount; i++)
	{
    		transform.GetChild(i).gameObject.SetActive(true);
	}
}

10.保存更改。“InventoryDisplay”即告完成。（图02）

11.返回Unity编辑器。

1.在新的场景中，创建一个名为“InventoryDisplayControl”的空游戏对象。

2.将“Vertical Layout Group”组件添加到“InventoryDisplayControl”，然后将“Child Alignment”设为“Middle Center”。（图03）

3.请注意，在Inspector中，“InventoryDisplayControl”的“Transform”已被“Rect Transform”所取代，而“Rect Transform”的位置则设为原来“Transform”的位置。将大小设为150x100（图04）。设置完背包系统的其余部分后，我们会调整位置。

4.从“GameObject”下拉列表中，选择“UI”>“Button”。创建UI元素时会同时创建“Canvas”和“Event System”（如果场景中还没有的话）。将按钮命名为“ShowAllItems”，并将其大小设为150x25。

5.在“Hierarchy”窗口中，单击“ShowAllItemsButton”旁边的三角形以显示子文本组件。高亮显示“Text GameObject”，然后在Inspector中将文本从“Button”更改为“Show All”。

6.在“Hierarchy”窗口中，将“InventoryDisplayControl”拖到“Canvas”上并释放。

7.将“ShowAllItemsButton”拖放到“InventoryDisplayControl”上，使其处于Vertical Layout Group的控制之下。（图05）

8.从“GameObject”下拉列表中，选择“UI”>“Panel”，从而为我们的主背包系统显示创建背景。将其命名为“Inventory Panel”。将锚点预设值设为居中，大小设为676x340（图06）。选择该大小是考虑到布局规划：最多6x3个按钮，每个按钮100x100像素，沿任意维度填充12个像素，且为面板边框留出额外空间。

9.使用移动线框(Gizmo)，或直接在“InventoryPanel”和“InventoryDisplayControl”的“Rect Transform”中输入位置，从而移动两者的位置，以确保它们不会重叠。

10.高亮显示“InventoryPanel”并添加之前创建的“Inventory Display”组件。

11.将Grid Layout Group组件添加到InventoryPanel中。将左侧和上端填充设为8像素，将间距设为12x12像素，并将“Constraint”的“Fixed Column Count”设为6。（图07）

12.创建一个按钮并将其命名为“InventoryItemSample”。添加“Inventory Item Button”组件，然后将按钮拖到“InventoryPanel”上。（图08）

13.在“Hierarchy”窗口中，高亮显示“InventoryItemSample”，然后按Ctrl + D (PC)或Cmd + D (Mac)将其复制17次，这样总计是18个按钮。（图09）

14.在“Hierarchy”窗口中，高亮显示“ShowAllItemsButton”。在Inspector部分的底端（标记为“Button (Script)”），单击+以添加OnClick()事件。将“InventoryPanel”拖到游戏对象的位置，然后从“Event”下拉列表中选择“InventoryDisplay”>“ShowAll”。（图10）

15.在“ShowAllItemsButton”仍高亮显示的情况下，按Ctrl + D (PC)或Cmd + D (Mac)一次以进行复制。将新按钮命名为“ShowArmorButton”，并将其文本更改为“Show Armor”。

16.在“ShowArmorButton”的OnClick()事件列表中，将事件更改为“InventoryDisplay”>“ShowOnly (int)”。将参数保留默认值0。

17.复制“ShowArmorButton”，将名称和文本中的“Armor”更改为“Weapons”。

18.在“ShowWeaponsButton”的Inspector中，将“InventoryDisplay.ShowOnly”的参数更改为1。

19.复制“ShowWeaponsButton”，将名称和文本中的“Weapons”更改为“Spells”。将“InventoryDisplay.ShowOnly”的参数更改为2。（图11）

20.按“Play”。每个按钮都会随机分配一个项目，其文本也会随之更新以反映其内容。（图12）

21.尝试单击“Show Armor”等。尽管可以单击背包系统项目本身，但在本演示中不会执行任何操作。在真实游戏中，当您直接单击背包系统中的某个项目时，可能会执行启用装备/取消装备的动作。

22.一切就绪后，退出运行模式。

在布局组中嵌套UI元素是一种自动实现布局并处理各种情况的有效方法，而且所需的代码和手动工作却要少得多。