【无标题】

系列文章目录

麦田物语第九天

---

---

一、制作人物背包内的UI

上一小节制作了UI界面下面显示的背包UI，这一小节要制作人物背包内的UI。
制作UI的第一步，就是对图片进行一些更改（ui_pack07，ui_pack02，ui_coin_bg）,打开图片的Sprite Editor，给图片添加其Boarder，和上一节课一样，将绿色的点拖到合适的位置，在边框到绿色框之间的大小将不会改变，被改变的只有绿色框内的位置，最后点击Apply即可。
第二步我们创建一个Image作为Inventory的子物体PlayerBag，并放置在Action Bar的上方，使得Action Bar能够先被渲染，接着更改Player Bag的锚点位置为居中（Alt + Shift后选择居中）并且更改图片大小（具体看自己心情吧我觉得），最后为其添加Source Image（ui_pack07）.
第三步为Player Bag添加Image子物体（Slot Holder），将其锚点位置设置为铺满状态（Alt点击右下角的选项即可），接着调整其上下左右的边界，数值为25,10,10,10。然后将Slot_Bag预制体拖拽至Slot Holder下方作为子物体，最后为Slot Holder添加Grid Layout Group组件，调整Cell Size的大小为（20,20），调整对齐方式（Child Alignment）为Middle Center，设置完成后刚好可以装下16个格子。
第四步是在背包中添加玩家的头像，在Player Bag中添加Image，改名为Head Holder，接着点击Set Native Size,然后设置锚点位置为右上并调整其大小和位置，设置其Source Image改为uipack_06；为Head Holder添加Image子物体（Head Icon），锚点位置设置为全覆盖，接着选择头像图片进行赋值即可。
左侧也是同理显示金币，也是进行上述的更改，同时更改头像为金币图标，并且在其下方添加Image子物体（Money BG），作为显示金币数量的背景图片，然后设置其锚点位置为右中，并添加ui_coin_bg作为背景，接着在Money_BG下添加子物体Text作为显示金币数量的文本，更改大小等参数即可。

背包内的UI界面效果如图

背包内的UI界面的构造如图

二、SlotUI 根据数据显示图片和数量

前两小节我们制作了UI界面，这节我们编写UI相关的代码。
首先创建Scripts->Inventory->UI文件夹，然后创建SlotUI脚本，并且将脚本挂载到Slot_Bag的Prefab上。
接着我们需要留意一下Button组件的Navigation，这个是我们可以通过键盘来控制UI的切换，切换方式有横向切换（Horizontal），纵向切换（Vertical）以及自动切换（Automatic），那我们应该怎么观察这些UI之间的切换呢，我们可以点击Navigation下面的Visualize，在Scene面板下就可以看到它们之间的连线（它们之间的联系），但是在该项目中我们不适用键盘来切换UI的选择，因此我们将Navigation设置为None。
同时如果我们要将Button设置为不可交互状态的话，那么按钮就会变成Disable Color，因此我们需要改变Disable Color的颜色和α值，保持和正常的按钮一样即可。
然后着我们需要在代码中获取各个组