Unity UGUI 背包或商店的制作_快速上手

今天有人问我怎么做背包。我说：亲，百度呀。他说：度了，但还是觉得问你好。于是有了这篇文章。

思路

思路先行！背包是这些东西的组合：

A，【背景】：一般使用Image或者Panel。

B，【元素容器】（可视区域）：就是背包里的那些元素，滚动的时候不能超出的UI范围，一般使用Panel，添加<Mask>组件

C，【元素】：一般是Button，当然也有好多人用Image做底，再拼接其他元素。

D，【滚动条】：当元素过多，一页显示不下时，需要滚屏，用Scrollbar。 

E，【元素排布】：unity有现成组件，<Grid Layout Group>

上面是自己组合背包的理论做法。

下面是更简单的，用 Unity 提供的 Scroll View。直接整合了上面大多数功能。下面开始操作：

步骤：

■1，新建一个 Panel 做【背景】。然后设置一下Image，调整一下合适的大小和透明度。命名为Bag_Panel。

■2，新建一个 Scroll View 控件。

我们把它展开，一层一层细说。

先看最顶层，也就是 Scroll View 。说一下，<Scroll Rect>的作用：建立Scrollbar（滚动条）和Content（内容）的关联互动。默认已经设置好了。我们根据需要调整，比如去掉水平滚动条（删除Scrollbar Horizontal游戏体, 然后在Scroll View的组件<Scroll Rect>里去掉Horizontal勾选，如下图。这样内容在拖拽的时候，不会左右飘。此时，Scrollbar Horizontal的选项，应该会自动设置为None）。 至于大小、位置、透明度等，也是根据需要自行调整。

再看 Viewport，这个其实不用设置。我们用到的，只是它默认带的<Mask>组件。

再看 Content，这个是元素的容器，是我们设置的重点。需要添加2个组件：<Grid Layout Group>，和 <Content Size Fitter>.

<Grid Layout Group>: 对子元素进行自动排版。看参数名字就很清楚了，根据需要设置就行。

<Content Size Fitter>: 根据元素多少，自动缩放Content 的大小（滚动条就是根据Content 的大小去拖动的）。注意，如果是垂直的下拉条，要把Vertical Fit 设置为 preferred size，否则回弹效果会异常！

Content的位置，也可以根据需要调整。

至于元素在Content内的位置，可以通过设置Padding属性来实现 (本文的背包配图未设置)：

■ 3，放入元素。由于项目关系，这里我放入的是Button。取名Item_Button作为Content 的子物体。我们复制多个，运行一下，看看效果：

■ 4，根据需要调整滚动条属性。然后加上其他想要的元素，即可。