UGUI ScrollView 分頁（詳細介紹）

原創

2019-07-03 08:22

首先我們實現分頁，有兩種，一個是左右分頁，一個是上下分頁，當然這就會有人說了，上下分頁和左右分頁，只要看一個代碼就夠了。確實，不過改的時候也許一個不易發現的地方就可以玩死自己。所以我還是寫出來。
廢話不多說上代碼：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections.Generic;
using System;

public class MyScrollRectHelper : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{

    private float smooting;                          //滑動速度
    private float normalSpeed = 3;
    private float highSpeed = 10;
    /// <summary>
    /// 每頁顯示的項目(Btn_1)
    /// </summary>
    private int pageCount = 1;    
    /// <summary>
    /// content
    /// </summary>
    public GameObject Content;
    private ScrollRect sRect;
    /// <summary>
    ///  總頁數
    /// </summary>
    private float pageIndex;
    /// <summary>
    /// 是否拖拽結束
    /// </summary>
    private bool isDrag = true;
    /// <summary>
    /// 總頁數索引比列 0-1
    /// </summary>
    private List<float> listPageValue = new List<float> { 0 };  //

    /// <summary>
    /// 滑動的目標位置
    /// </summary>
    private float m_targetPos = 0;                                //
    /// <summary>
    /// 當前位置索引
    /// </summary>
    private float nowindex = 0;       
    /// <summary>
    /// 開始索引的位置
    /// </summary>
    private float beginDragPos;
    /// <summary>
    /// 結束索引的位置
    /// </summary>
    private float endDragPos;
    /// <summary>
    /// 靈敏度
    /// </summary>
    private float sensitivity = 0.15f;     
    /// <summary>
    /// 每頁的數量
    /// </summary>
    private int onePageCount =8;

    void Awake()
    {
        //獲取組件
        sRect = this.GetComponent<ScrollRect>();
        //
        ListPageValueInit();
        //滑度
        smooting = normalSpeed;
    }

    //每頁比例
    void ListPageValueInit()
    {
        //總頁數       總頁數/每頁顯示的項目item（1） 
        pageIndex = (Content.transform.childCount / pageCount) - 1;
        
        if (Content != null && Content.transform.childCount != 0)
        {
            for (float i = 1; i <= pageIndex; i++)
            {
                listPageValue.Add((i / pageIndex));//設置(寫出)頁數
            }
        }
    }
    void Update()
    {
        if (!isDrag)
          sRect.verticalNormalizedPosition = Mathf.Lerp(sRect.verticalNormalizedPosition, m_targetPos, Time.deltaTime * smooting);
    }

    /// <summary>
    /// 拖動開始 接口
    /// </summary>
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
        //記錄拖拽的起點 
        beginDragPos = sRect.verticalNormalizedPosition;
    }

    /// <summary>
    /// 拖拽結束
    /// </summary>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;
        
        //記錄放開時的點
        endDragPos = sRect.verticalNormalizedPosition;

        //判斷   終點》起點？                            是：終點+靈敏度(換頁)        否：終點-靈敏度（不換頁）
        endDragPos = endDragPos > (beginDragPos) ? endDragPos + sensitivity : endDragPos - sensitivity;
        int index = 0;

        // 拖動的絕對值   數值決定翻幾頁
        float offset = Mathf.Abs(listPageValue[index] - endDragPos);    

        //遍歷全頁數
        for (int i = 1; i < listPageValue.Count; i++) 
        {
            int a = (listPageValue.Count - i);
            //返回絕對值  例如   1.4-1 = 0.43 、 1.4 - 2= 0.6  、 1.4 -3 = 1.6  、 1.4-4 = 3.6f、4.6
            float temp = Mathf.Abs(endDragPos - listPageValue[i]);
            if (temp < offset)
            {
                index = i;
                offset = temp;
            }
        }
        m_targetPos = listPageValue[index];
        nowindex = index;
    }//horizontalNormalizedPosition 0-1 0表示左側           vertical 0-1 0表示底部


}

第一步：腳本掛在scrollview上，並且將Content（Level_Btns）放上指定位置。

第二步：在Level_Btns掛上組件，如下圖

第三步：在Btn_1 2 3 4 5 6 7 8這些小的組也掛上，如下圖

然後我們在這些Btn裏放入圖片如圖

我們就會獲得這樣一個垂直的scrollview

調整Content的屏幕範圍爲全屏則會得到下圖的效果

這樣我們就實現了翻一頁的效果

注意：如果你發現你拖了它還是不翻頁，那麼點到你的Content(Level_Btns) Inspector面板

拉成這樣就可以了。
反之，如果你要做水平翻頁，就把他反過來，拉成水平就可以了，記得參數也要調回來，當然，水平需要調的腳本參數
字段的 private bool isDrag = true;改成false；