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#脚本实现上述功能。