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;
        }
    }

相關推薦

Unity 工具ScrollView滑動

簡介:在進行UI設計的時候,經常會使用Unity中UI提供的ScrollView,類似Android中的ScrollView,在進行圖片預覽,多個翻頁的時候,能實現很好的效果。該類中根據Unity的EventSystems中拖拽事件,實現對頁碼的滑動監聽,在使用的時候,新建U

Unity】UGUI ScrollView 單次滑動

一,新建ScrollView ,目錄結構如圖: 二,在content下編輯需要顯示的關卡內容,這裡設定為一頁顯示一個button集合,14個button為一整頁,一次只顯示一頁內容: 下面上程式碼: using UnityEngine; using System

安卓裡RecyclerView的滑動列表

    RecyclerView是V7下的一個控制元件,它提供給了使用者一種拔插式的體驗,這個控制元件相比於ListView和GridView要更加的靈活與方便。那麼下面我變用程式碼與註釋解析的方法將這個類的功能一步步的來實現出來。 首先,我們先建一個類,讓它繼承Recyc

iOS抽屜效果、二級選單(點選,滑動

好像最近,看到好多Android上的抽屜效果,也忍不住想要自己寫一個。在Android裡面可以用SlidingDrawer,很方便的實現。IOS上面就只有自己寫了。其實原理很簡單就是 UIView 的移動,和一些手勢的操作。 // // 

【IOS】實現IOS版的抽屜效果(點選,滑動

原文連結:http://blog.csdn.net/toss156/article/details/7400065 好像最近,看到好多Android上的抽屜效果,也忍不住想要自己寫一個。在Android裡面可以用SlidingDrawer,很方便的實現。IOS上面就只有自

Unity UGUI 實現簡單功能

這一篇部落格我們來使用 UGUI 實現圖片的拖拽功能。 說到拖拽,那必然離不開座標,UGUI 的座標有點不一樣,它有兩種座標,一種是螢幕座標,還有一種就是 UI 在Canvas內的座標(暫時叫做ugui座標。。。),這兩個座標是不一樣的,所以拖拽是就需要轉換。

Unity學習之實現功能

public class NewBehaviourScript : MonoBehaviour {public Vector3 screenPosition;public Vector3 position;public Vector3 tempPosition;//以下實現

編寫Unity工具

指令碼功能設定:遊戲GM工具(根據物品ID、數量向伺服器傳送資訊,獲取本地所需物品道具) using UnityEngine; using System.Collections; using UnityEditor; using System.Collections.Gen

unity使用IDragHandler實現

先引入名稱空間 UnityEngine.EventSystems,然後引入介面IDragHandler,IBeginDragHandler Vector3 worldPos;     Vector3 offset;     public void OnBeginDrag(P

vue-awesome-swiper - 基於vue實現h5滑動效果

return wheel res 初始化 回調 param get export tick 說到h5的翻頁,很定第一時間想到的是swiper。但是我當時想到的卻是,vue裏邊怎麽用swiper?! 中國有句古話叫:天塌下來有個高的頂著。 在前端圈裏,總有前仆後繼的仁人誌

vue-awesome-swiper極速快三平臺出租 - 基於vue實現h5滑動效果

www. 準備 其中 use 代碼 dsl 有時 module 大神 中國極速快三平臺出租【大神源碼論壇】dsluntan.com 【布丁源碼論壇】budingbbs.com 企娥3393756370有句古話叫:天塌下來有個高的頂著。 在前端圈裏,總有前仆後繼的仁人誌士相

#Java--POI之Excel匯出工具(支援多個sheet同時匯出)

一、核心程式碼 package com.yx.yzh.utils; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.

【原創】實現一個簡單的移動端左右滑動+ 點選下標 利用:HTML5+CSS+Js

//【如何做一個簡單的手機端頁面的翻頁】//第一步:建立移動端頁面內  HTML + CSS  【注】可用彈性佈局   但需要注意的是  外層盒子的定位//第二步: 思考問題  要實現怎樣的效果?//1. 手指滑動時觸發事件【左右】兩個方向  //2.點選footer部分的下

ViewPager 設定滑動距離(親測有效!)

前言:老闆說,android專案的這個viewpager不靈敏,需要滑動較長的距離才可以翻頁。要求縮短滑動距離,實現較短距離翻頁。 這個東西,確實不好弄,網上查了很多資料,試驗了很多方法,直到下面轉載的文章,解決了我的問題。注意,要修改viewpager的原始碼,也就是

java 分工具+Mybatis攔截SQL實現分

轉載!一個比較好的分頁! /**  * 對Page<E>結果進行包裝  * <p/>  * 新增分頁的多項屬性,主要參考:http://bbs.csdn.net/topics/360010907  * @version 3.3.0

Android中手勢滑動之GestureDetector總結

寫作緣由:最近在做左右滑動翻頁效果,程式碼寫出來經過3天除錯毫無進展,經過網上多次搜尋和自己親自實現,在這裡寫個總結供自己學習也為大家提供個方便,避免以後大家走彎路,由於我寫的專案比較繁瑣,就不自己寫Demo,直接轉載一篇,只是提醒其中自己遇到的坑       提示01:

雲展網教程 | 檢視按鈕:書、水平滑動、單模式

通過檢視按鈕,閱讀者可以在閱讀過程中自己切換翻頁模式哦。 在FLASH展示工具欄選擇顯示檢視按鈕,然後選擇開放給使用者閱讀的翻頁模式如單頁按鈕,滑頁按鈕。     檢視按鈕:顯示檢視切換按鈕   單

基於vue實現上下滑動效果

    18年年底的時候,一直在做年度報告的H5頁面,因為專案需要,需要實現上下滑動翻頁,並且上滑的頁面比正常頁面的比例要縮小一定比例。     效果類似於http://www.17sucai.com/pins/demo-show?id=7834,這個連結是基於jquery實現的,我寫的是和這個例子效果一樣

【UGUI】UGUI 滑動【舊】

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

swiper不能手指滑動的解決辦法

/*當swiper中的slide的裡面放入長度在手機上不能滑動的時候 放入這段程式碼就可以了*/     var startScroll, touchStart, touchCurrent;         swiperV.slides.on('touchstart'