等级选择滚动

1、效果图如下：可以通过鼠标在关卡上进行滑动，也可以通过下面的小按钮进行滚动页面

 

2、相关的背景和按钮就不做多的描述了，直接讲解核心的东西吧：

 

3、创建一个空的UI游戏物体【A】，然后为其挂载GridLayoutGroup组件，为其中的按钮进行排序，

设置空物体的大小，要满足包括的内容。提供一个小的技巧，可以将创建出来的关卡选择按钮放在一个空的游戏物体下面，

这样改按钮就不会被Grid进行缩放了。将按钮添加到挂载GridLayoutGroup组件的游戏物体下面，成为其子物体。

 

4、创建一个Image，为其添加Scroll Rect 和Mask组件，其中Scroll Rect是让其具有滑动的功能的，而mask是将超出边界的东西进行隐藏，

其中的Show Mask Graphic决定是否显示该背景色，一般是不显示的，则取消勾选。其中Image的大小就是可以显示内容的大小，也就是可以进行滑动的大小。

 

5、添加下面的按钮，Toggle组件的使用，就不细说了。

 

6、在A物体下面创建脚本，如下：

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

public class MyScrollRect : MonoBehaviour,IBeginDragHandler,IEndDragHandler
{
    public float smoothing = 4.0f;          //拖拽的速度
    public Toggle[] ToggleArray;       //设置toggle数组，和RectArray数组下标对应

    private ScrollRect scrollRect;
    private float[] RectArray =new float[] { 0f, 0.333333f, 0.666666f, 1f };            //一共是4页，其中每一页的位置信息   
    private float horizontalPositionTarget = 0;         //目标的拖拽位置
    private bool isDrag = false;            //通过设定标志位来确定是否是在拖拽，如果在拖拽就不进行移动

    private void Start()
    {
        scrollRect = this.GetComponent<ScrollRect>();               //需要通过ScrollRect组件对其进行获取位置信息
    }

    private void Update()
    {
        if (isDrag==false)
        {
            scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, 
                horizontalPositionTarget, Time.deltaTime * smoothing);
            //进行插值运算
        }
                
        
    }
    /// <summary>
    /// 拖拽开始的事件
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;      //拖拽开始，进行中
    }

    /// <summary>
    /// 拖拽结束的事件
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;     //拖拽结束

        float Pos_x = scrollRect.horizontalNormalizedPosition;
        int index = 0;              //默认是从第一页开始的
        float offset = Mathf.Abs(Pos_x - RectArray[index]);         //通过查找最小偏移量来确定是在那一页
        for (int i = 1; i < RectArray.Length; i++)
        {
            //通过遍历找出离页数最近的哪一个
            float offset_temp = Mathf.Abs(Pos_x - RectArray[i]);
            if(offset_temp < offset)
            {
                //当有比第一页还近的就要进行更换了
                index = i;
                offset = offset_temp;
            }
        }
        horizontalPositionTarget = RectArray[index];        //通过设定目标值然后通过lerp来进行插值运算即可
        ToggleArray[index].isOn = true;     //当通过滚动页面的时候也要对下面的按钮进行同步
        //scrollRect.horizontalNormalizedPosition = RectArray[index];         //不太好，没有平滑的效果
    }


    //以下四个是通过注册按钮的点击事件；来达到换页的效果的
    public void MoveToPad_01(bool isOn)
    {
        //第一页的按钮
        if (isOn==true)
        {
            //当选中了就会进行移动：
            horizontalPositionTarget = RectArray[0];        //通过设定目标值然后通过lerp来进行插值运算即可

        }
    }
    public void MoveToPad_02(bool isOn)
    {
        //第二页的按钮
        if (isOn == true)
        {
            //当选中了就会进行移动：
            horizontalPositionTarget = RectArray[1];        //通过设定目标值然后通过lerp来进行插值运算即可

        }
    }
    public void MoveToPad_03(bool isOn)
    {
        //第三页的按钮
        if (isOn == true)
        {
            //当选中了就会进行移动：
            horizontalPositionTarget = RectArray[2];        //通过设定目标值然后通过lerp来进行插值运算即可
        }
    }
    public void MoveToPad_04(bool isOn)
    {
        //第四页的按钮
        if (isOn == true)
        {
            //当选中了就会进行移动：
            horizontalPositionTarget = RectArray[3];        //通过设定目标值然后通过lerp来进行插值运算即可
        }
    }
}

 7、为其中的Toggle按钮注册该类中的方法，这样就可以了。