unity屏风式可拖动角色列表设计（仿平安京式神录）

这是原版的样式。

这是仿照的样式。

主要实现功能：展示角色列表，角色列表翻页，底部显示当前页码位置。

1、角色列表制作：

首先制作单个人物的展示板，需要一张裁剪好的人物sprite图和作为背景的图片：

然后创建一个空的父物体把所有角色的展示板放进去成为其子物体，由于要用一个列表展示，因此把父物体挂载grid layout group组件：

注意，在grid Layout group中其中的每个元素的位置都是严丝合缝的，由于横向排列，则grid，也就是这些角色面板的父物体，高度y与其子物体保存一致，而宽度x则是每个子物体的宽度*子物体的个数。在本例中就是97*18=1746。在实际应用中，也要考虑因panel缩放而出现与实际大小产生的边距。

2、拖动效果实现

首先要制作遮罩，把移除屏幕外的部分遮挡起来，那么又要建立一个空物体，然后把grid当成他的子物体。然后将这个父物体命名为scroll Rect，将其挂载一个image组件和mask组件来实现遮罩，然后挂载一个scroll Rect组件，只勾选Horizontal，让它只能水平拖动。mask组件取消勾选show mask Graphic让用于遮罩的图片不显示。

效果如下：

但我们想要的效果不是这种自由滑动，而是滑动后自动跳到下一页，也就是每划一次跳转的都是一整页，同时小幅度的滑动不能进行翻页。

在unity中，scroll Rect有内置的方法计算其页面的位置，初始位置为0，滑到底位置为1。可以写个脚本看到：

    public void OnValueChange(Vector2 v) {
        print(v);
    }

可以看到拖动的时候横向的位置是一点点变化的。那么如果实现整页整页的分页，也就是在0-1之间取中间值即可了，比如一共有四页，那么就要分成0，0.333，0.666，1，而5页就是0，0.25，0.5，0.75，1。

知道这种特性后，只需在松手的时候判断当前位置离哪一页近，然后直接跳转到该页的位置即可。代码和下一部分的页标签制作放在一起。

3、制作显示当前页码位置的页标签

最后还需要在底部制作显示多少页和当前在哪页的标签：

本质上这是一个单选框改造而来，当前在哪一页，哪一页的选项就被勾选。

首先新建一个toggle,然后把背景和对勾改成自己的样式。如上图背景就是灰色的小圆圈，对勾就是蓝色的蛋。勾选时蓝色的蛋正好能覆盖在对勾上面。

然后有多少页就制作多少个toggle，我这里是18个人物，一页6个，一共三页。所以制作了三个

再用一个父物体把这三个toggle归在其子物体里，父物体挂载toggle group组件来管理其包含的toggle。

在toggle组件设置中，取消勾选Interactable，禁止鼠标点击的交互，只能代码控制。

到这里，勾选的条件也很简单了，当页面位置达到某一定值后，勾选页面代表的选项。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems; //继承接口的命名空间
using UnityEngine.UI;

public class PageChangeChara : MonoBehaviour,IBeginDragHandler,IEndDragHandler //继承拖拽接口，注意要实现接口
{
    private ScrollRect scroll;
    private float[] pagePosition = new float[3] {0f,0.5f,1.0f };//分页，有几页0-1之间平分几次比如四页就是0,0.333,0.666,1
    public Toggle[] charaToggleArray;
    
 void Start()
    {
        scroll = GetComponent<ScrollRect>();
    }
 public void OnEndDrag(PointerEventData eventData)//结束拖拽时触发
    {
        float currentPosition = scroll.horizontalNormalizedPosition;//当前scroll的位置，Normalized代表0-1的范围之间
        int index = 0;
        float offest = currentPosition - pagePosition[0];//计算拖拽距离
        for (int i = 0; i < 3; i++) {
            if (Mathf.Abs(currentPosition - pagePosition[i]) < offest) {//比较距离，哪个离得近就最终是哪个
                index = i;
                offest = Mathf.Abs(currentPosition - pagePosition[i]);
            }
        }
        scroll.horizontalNormalizedPosition = pagePosition[index]; //确定位置。
        print("index:" + index + " 距离:" + offest);
        charaToggleArray[index].isOn = true;
    }

将脚本挂在scroll Rect上，把所有的代表页码的选项放到toggle 数组之中。

最终效果如下：