1. 程式人生 > 程式設計 >Unity工具類ScrollView實現拖拽滑動翻頁

Unity工具類ScrollView實現拖拽滑動翻頁

簡介:

在進行UI設計的時候,經常會使用Unity中UI提供的ScrollView,類似Android中的ScrollView,在進行圖片預覽,多個翻頁的時候,能實現很好的效果。

該類中根據Unity的EventSystems中拖拽事件,實現對頁碼的滑動監聽,在使用的時候,新建UI--->ScrollView,把該類元件新增到ScrollView上,把對應的content加入該指令碼中的content,調整ScrollView和Content,設定單個滑動頁的寬度,拖拽的閾值,即可監聽到拖拽,如果是動態例項化ScrollView中的child,需設定當前最大頁碼數。SetCurIndex可以實現直接定位到當前頁碼對應的滑動頁,程式碼比較簡單,直接貼出來。

public class ScrollViewListener : MonoBehaviour,IDragHandler,IBeginDragHandler,IEndDragHandler
  {
 //滑動方向
    public enum MoveDirection
    {
      None = 0,Left,Right,}
    public float SingleItemWidth;//單個滑動頁的寬度
    public RectTransform content;//當前ScrollView的Content
    public float DragMinValue = 5f;//拖動過程中允許的最小的拖拽值,低於此值就不算拖拽,不執行翻頁事件
    private MoveDirection direction = MoveDirection.None;
    private int CurIndex = 0;//當前頁碼
    private int MaxIndex = 0;//最大頁碼
    public bool canMove = true;//是否能移動
    private Vector3 originalPos;
    private float maxDeltaX = 0f;//取整個拖動過程中的最大值
    public Action<int> OnPageChange;//對外提供頁碼修改的回撥
 
    /// <summary>
    /// 滑到下一頁
    /// </summary>
    private void MoveToNext()
    {      
      if (direction == MoveDirection.Left)
      {
        if (CurIndex < MaxIndex)
        {          
          CurIndex++;
          canMove = false;
          content.DOLocalMoveX(content.localPosition.x - SingleItemWidth,1f).OnComplete(() =>
          {
            if (null != OnPageChange)
            {
              OnPageChange(CurIndex);
            }
            canMove = true;
          });
        }
      }
      else if (direction == MoveDirection.Right)
      {
        if (CurIndex > 0)
        {
          CurIndex--;
          canMove = false;
          content.DOLocalMoveX(content.localPosition.x + SingleItemWidth,1f).OnComplete(() =>
          {
            if (null != OnPageChange)
            {
              OnPageChange(CurIndex);
            }
            canMove = true;
          });
        }
      }
    }
 
    /// <summary>
    /// 設定當前滑動列表的頁數的最大值
    /// </summary>
    /// <param name="max"></param>
    public void SetMaxIndex(int max)
    {
      MaxIndex = max - 1;//最大下標值為頁數減1
    }
 
    /// <summary>
    /// 設定當前頁
    /// </summary>
    /// <param name="index"></param>
    public void SetCurIndex(int index)
    {
      CurIndex = index;
      float x = content.localPosition.x - SingleItemWidth * CurIndex;
      content.localPosition = new Vector3(x,content.localPosition.y,content.localPosition.z);
    }
 
    public void ResetPosition()
    {
      content.localPosition = originalPos;
    }
 
    private void Awake()
 {
      CurIndex = 0;
      originalPos = content.localPosition;
    }
 
    public void OnDrag(PointerEventData eventData)
    {
      if (Mathf.Abs(eventData.delta.x) > maxDeltaX)
      {
        maxDeltaX = Mathf.Abs(eventData.delta.x);
      }
    }
 
    public void OnBeginDrag(PointerEventData eventData)
    {
      if (eventData.delta.x > 0)
      {
        direction = MoveDirection.Right;
      }
      else if (eventData.delta.x < 0)
      {
        direction = MoveDirection.Left;
      }
      else
      {
        direction = MoveDirection.None;
      }
      if (Mathf.Abs(eventData.delta.x) > maxDeltaX)
      {
        maxDeltaX = Mathf.Abs(eventData.delta.x);
      }
    }
 
    public void OnEndDrag(PointerEventData eventData)
    {
      if (Mathf.Abs(eventData.delta.x) > maxDeltaX)
      {
        maxDeltaX = Mathf.Abs(eventData.delta.x);
      }
      if (maxDeltaX > DragMinValue)
      {
        //計算下一頁的目的點 然後移動
        if (canMove)
        {
          MoveToNext();
        }        
      }
      maxDeltaX = 0f;
    }
  }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。