Unity中ScrollRect锁定元素详述(一)

0. 背景

需求是在竖向屏幕上，左右滑动以选择角色。若角色处在图1.a)图的非完整角色位置，则要求找到最近的角色卡片，并且自动滑动定位，如图1.b)所示。

图1.a) scrollRect处于非完整角色位置，b) 自动滑动锁定最近角色

1. 制作步骤

1.1 Unity版本

需求制作使用Unity5的UGUI的新GUI组建（UGUI自Unity4.6版本出现的）。

1.2 新建Canvas，Panel等UI

a). 在菜单栏GameObject/UI/Canvas，新建Canvas，命名为CharCanvas，如图2。

图2. 新建 Canvas

b). 同理，在CharCanvas中新建一个Create/UI/Panel中新建一个panel，作为CharCanvas子物体，并命名为ChoosePanel，如图3，在其Image组建中，选择Color的alpha通道为0（使透明）。

图3. 新建 panel

这样在Hierarchy中就有CharCanvas和EventSystem，如图4。

图4. 新建 Canvas和 Panel后的 Hierarchy

c). 在ChoosePanel新添一个ScrollRect组件，如图5：

图5. 新添 ScrollRect组件

注. 在ScrollRect组建中设置去掉Vertical的选择框，选择MoveMentType为Unrestricted

d). 在ChoosePanel再新建一个panel，作为ChoosePanel的子物体，命名为Content，并将此Content拖到c)步的ScrollRect组建的Content中，如图6所示：

图6 Content加入 ScrollRect

e). 在Content中添加Image, Button, 自定义的Prefabs等作为Content的子物体。这些就是你将来滑动的角色卡片。为了简化，这是使用UI/Image作为角色卡片的元素。添加好后，并且以x坐标520距离（同一高度）并列水平放置，Hierarchy的层级目录和Scence如图7所示：

图7. Hierarchy的层级目录和 Scence

现在开启游戏，就可以在ChoosePanel上左右滑动了。现在的问题是，它并不能定位在某个角色卡片上，接下来下一篇博客就讲述使用C#脚本实现上述功能。