快捷導(dǎo)航

Unity工具類ScrollView實(shí)現(xiàn)拖拽滑動翻頁

更新時(shí)間：2020年04月17日 10:05:21 作者：真像大白阿

這篇文章主要為大家詳細(xì)介紹了Unity工具類ScrollView實(shí)現(xiàn)拖拽滑動翻頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡介：

在進(jìn)行UI設(shè)計(jì)的時(shí)候，經(jīng)常會使用Unity中UI提供的ScrollView，類似Android中的ScrollView，在進(jìn)行圖片預(yù)覽，多個(gè)翻頁的時(shí)候，能實(shí)現(xiàn)很好的效果。

該類中根據(jù)Unity的EventSystems中拖拽事件，實(shí)現(xiàn)對頁碼的滑動監(jiān)聽，在使用的時(shí)候，新建UI--->ScrollView，把該類組件添加到ScrollView上，把對應(yīng)的content加入該腳本中的content，調(diào)整ScrollView和Content，設(shè)置單個(gè)滑動頁的寬度，拖拽的閾值，即可監(jiān)聽到拖拽，如果是動態(tài)實(shí)例化ScrollView中的child，需設(shè)置當(dāng)前最大頁碼數(shù)。SetCurIndex可以實(shí)現(xiàn)直接定位到當(dāng)前頁碼對應(yīng)的滑動頁，代碼比較簡單，直接貼出來。

public class ScrollViewListener : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
  {
 //滑動方向
    public enum MoveDirection
    {
      None = 0,
      Left,
      Right,
    }
    public float SingleItemWidth;//單個(gè)滑動頁的寬度
    public RectTransform content;//當(dāng)前ScrollView的Content
    public float DragMinValue = 5f;//拖動過程中允許的最小的拖拽值，低于此值就不算拖拽，不執(zhí)行翻頁事件
    private MoveDirection direction = MoveDirection.None;
    private int CurIndex = 0;//當(dāng)前頁碼
    private int MaxIndex = 0;//最大頁碼
    public bool canMove = true;//是否能移動
    private Vector3 originalPos;
    private float maxDeltaX = 0f;//取整個(gè)拖動過程中的最大值
    public Action<int> OnPageChange;//對外提供頁碼修改的回調(diào)
 
    /// <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>
    /// 設(shè)置當(dāng)前滑動列表的頁數(shù)的最大值
    /// </summary>
    /// <param name="max"></param>
    public void SetMaxIndex(int max)
    {
      MaxIndex = max - 1;//最大下標(biāo)值為頁數(shù)減1
    }
 
    /// <summary>
    /// 設(shè)置當(dāng)前頁
    /// </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)
      {
        //計(jì)算下一頁的目的點(diǎn) 然后移動
        if (canMove)
        {
          MoveToNext();
        }        
      }
      maxDeltaX = 0f;
    }
  }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: