首先我們實現分頁,有兩種,一個是左右分頁,一個是上下分頁,當然這就會有人說了,上下分頁和左右分頁,只要看一個代碼就夠了。確實,不過改的時候也許一個不易發現的地方就可以玩死自己。所以我還是寫出來。
廢話不多說上代碼:
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;
所有的sRect.verticalNormalizedPosition
改成 sRect.horizontalNormalizedPosition
Content面板的
Scrollview面板的
如果有什麼問題,可以留言,我會盡快回復的~