Unity背包系统(二)背包UI设计
发表于2018-03-20
在上篇文章中和大家介绍了背包系统开发中需要使用到数据存储，教大家如何使用并介绍LitJson进行生成、解析Json文件。在本文中就和大家介绍背包系统的UI设计，一个好的UI设计方便我们管理，并且对代码扩展性与自适应性起到至关重要作用。
【背包面板的设计】
先来看看UI图
该背包U里面有很多矩形方框，我叫做物品槽，用于存放物品
该背包UI目录结构图如下
其中物品槽的父节点SlotsPanel添加了一个组件 Gird Layount Ground组件
该会按你的设置进行自定义布局，这样方便了们将多个物品槽排布到面板上
【提示面板的设计】
提示面板是将鼠标放在物品槽里显示该槽里物品的的信息的面板
当你鼠标移除物品槽后，提示面板将消失
我们的需求：
提示面板会随内容的长高进行缩放
当内容宽，面板会变宽
内容变高，面板会变高
设计目录结构如下图
其中ToolTilePanel是一个UI Text（改变其内容时，大小会改变，并且子节点ToolTileBg也会改变）
ToolTileBg是UI Image（提示面板背景图片）
ToolTileText是一个UI Text（显示内容）
在ToolTilePanel和ToolTileText两个对象上添加 Content Size Fitter组件，并按如下图修改属性，这样才能随Text内容改变而改变大小
为什么要添加两个UI Text呢？
ToolTileBg的图片会把ToolTilePanel的文字内容遮挡
两个UI Text内容都是一样的
ToolTilePanel是控制面板大小
ToolTileText是控制内容的显示
UI的设计介绍到这里，希望大家能能掌握背包UI设计。