UGUI 使用GridLayoutGroup和Scroll Rect关卡列表

使用GridLayoutGroup进行排序

• 首先我们需要创建一个空物体作为Grid容器。为这个空物体添加GridLayoutGroup组件。

Paste_Image.png

• 将我们需要进行GridLayoutGroup进行控制物体拖拽作为Grid容器的子物体（实现基本的排序控制）

Paste_Image.png

• 通过调节GridLayoutGroup的CellSize属性去控制排列的间隔。

Paste_Image.png

• 我们如果需要做多页的排列，我们需要将GridLayoutGroup的Pivot(轴心点)置为最左边。（从左到右换页），增大GridLayoutGroup的Width，会从右边开始增长。

Paste_Image.png

• 增大Width来增加页数。（这里为4页）

Paste_Image.png

现在为这个关卡添加滑动的功能。

• 添加滑动功能使用Scroll Rect组件（NGUI为Scroll View）
• 添加一个Image，根据关卡每页不同的Width和Height进行对应的设置。

Paste_Image.png

• 并将我们的Grid容器作为其子物体。

Paste_Image.png

• 为ScrollPanel添加Scroll Rect组件实现滑动。

Paste_Image.png

• Scroll Rect组件

  • Content：需要滑动的内容。
  • Horizontal：是否水平滑动。
  • Vertical：是否垂直滑动。
  • Movement Type：选择为Elastic，会滑动具有弹性。

• 这里只需要水平滑动，只需要将Horizontal勾选。

• 超出边界的地方不需要显示，所以我们为它添加一个遮罩Mask。

• 这个本身的图片也不需要显示，所以把ShowMaskGraphic也弃选。

Paste_Image.png

Paste_Image.png

• 这样实现了滑动的效果。

Scroll Rect.gif

添加脚本进行关卡分页的控制。

• 为我们的ScrollPanel添加一个LevelScrollRect的脚本，并使其实现接口IBeginDragHandler,IEndDragHandler，分别对应着拖拽开始和拖拽结束的事件。（需要引入UnityEngine.EventSystems命名空间）

Paste_Image.png

• 为了实现滑动条离哪一页最近就停留到哪一页的效果，首先我们需要得到当前的滑动条滑动到哪里了。
• 这时需要使用ScrollRect中的scrollRect.normalizedPosition。
• 首先得到ScrollPanel上的ScrollRect组件。

Paste_Image.png

• 在IEndDragHandler实现的OnEndDrag（当拖拽结束时发生）方法中，使用scrollRect.normalizedPosition方法获取值，这个函数的返回值为Vector2类型，通过scrollRect.normalizedPosition方法获取当前滑动条滑动到什么地方，x代表水平方向，y代表垂直方向

Paste_Image.png

• 也可以直接使用scrollRect.horizontalNormalizedPosition或者verticalNormalizedPosition来直接获取滑动条滑动到什么位置的水平位置和垂直位置。

Paste_Image.png

• 实现分页，我们就得判断每一页的滑动条位置和当前的滑动条位置哪一页最近就停在哪一页。所以我们需要一个数组来保存每一页的NormalizedPosition位置。
• float[] pageArr；
• 接着使用循环判断最近的一页。
• 定义一个targetPagePos用于存储最近页的滑动条中的位置。
• 当我们正在滑动的时候不应该改变horizontalNormalizedPosition的值，所以我们定义一个标志位（bool isDraged）来进行控制。
• 在IBeginDragHandler接口实现的 OnBeginDrag（滑动开始时）将标志位isDraged设置为true。

Paste_Image.png

• 滑动结束后将最近一页的位置信息保存，并将标志位设置为false

Paste_Image.png

• 把当前滑动条的位置设置为最近一页的位置。（使用Lerp实现缓慢的页面过度）

Paste_Image.png

• 实现了水平分页。

根据我们的用户习惯，我们不应该只通过滑动来实现翻页，我们也应该定义页数的Button来让用户选择他想要到达的页面。（使用Toggle进行实现）

• 创建一个用于点击的ToggleGroup
• 并将Toggle 的is On为true时的Image指定。

Paste_Image.png

• 将我们用于关卡分页的一组Toggle，作为一个ToggleGroup，为我们的ToggleGroup对象添加ToggleGroup组件并将我们所有需要控制的Toggle拖拽赋值。（如果不设置ToggleGroup那么它们都这只是作为一组普通的复选框）

Paste_Image.png

Paste_Image.png

• 通过它们的OnValueChanged，来实现分页。
• 首先我们现在LevelScrollRect脚本中，为每一个Toggle的OnValueChanged事件注册方法。

Paste_Image.png

• 将对应的方法注册给对应的Toggle的OnValueChanged事件。

Paste_Image.png

• 为了实现在滑动的时候也需要改变Toggle 的is On属性，我们将我们的ToggleGroup中的四个Toggle作为数组传给LevelScrollRect脚本。

Paste_Image.png

Paste_Image.png

• 滑动到具体页的时候，改变与其对应Toggle的is On属性。

Paste_Image.png

结束。