等級選擇滾動

一、效果圖以下：能夠經過鼠標在關卡上進行滑動，也能夠經過下面的小按鈕進行滾動頁面

 

二、相關的背景和按鈕就不作多的描述了，直接講解核心的東西吧：

 

三、建立一個空的UI遊戲物體【A】，而後爲其掛載GridLayoutGroup組件，爲其中的按鈕進行排序，

設置空物體的大小，要知足包括的內容。提供一個小的技巧，能夠將建立出來的關卡選擇按鈕放在一個空的遊戲物體下面，

這樣改按鈕就不會被Grid進行縮放了。將按鈕添加到掛載GridLayoutGroup組件的遊戲物體下面，成爲其子物體。

 

四、建立一個Image，爲其添加Scroll Rect 和Mask組件，其中Scroll Rect是讓其具備滑動的功能的，而mask是將超出邊界的東西進行隱藏，

其中的Show Mask Graphic決定是否顯示該背景色，通常是不顯示的，則取消勾選。其中Image的大小就是能夠顯示內容的大小，也就是能夠進行滑動的大小。

 

五、添加下面的按鈕，Toggle組件的使用，就不細說了。

 

六、在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來進行插值運算便可
        }
    }
}

 七、爲其中的Toggle按鈕註冊該類中的方法，這樣就能夠了。