Unity实现UGUI拖拽展示图片功能

博客围绕案例相关内容展开,涉及Unity游戏引擎,以及Java、Android开发相关。虽未详细阐述案例,但可知与游戏开发领域信息技术相关。
1.在场景中新建一个Scroll View组件,Scroll View组件设置如下图所示:
2.创建PageView0.cs脚本,该脚本的作用是实现滑动图片展示的主要功能,脚本代码如下所示: `using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using System;
public class PageView0 : MonoBehaviour, IBeginDragHandler, IEndDragHandler { //滑动组件 private ScrollRect rect; //滑动的起始坐标 public float targethorizontal = 0; //是否拖拽结束 private bool isDrag = false; //求出每页的临界值,页索引从0开始 private List<float> posList = new List<float>(); public int currentPageIndex = 0; public Action<int> OnPageChanged; private bool stopMove = true; //滑动速度 public float smooting = 4.0f; public float sensitivity = 0; private float startTime; private float startDragHorizontal; //单例初始化 public static PageView0 _instance;
    
    
public GameObject content ; // Use this for initialization void Awake ( ) { _instance = this ; rect = transform . GetComponent < ScrollRect > ( ) ; float horizontalLength = rect . content . rect . width - GetComponent < RectTransform > ( ) . rect . width ; posList . Add ( 0 ) ; for ( int i = 1 ; i < rect . content . transform . childCount - 1 ; i ++ ) { posList . Add ( GetComponent < RectTransform > ( ) . rect . width * i / horizontalLength ) ; } posList . Add ( 1 ) ; } // Update is called once per frame void Update ( ) { if ( ! isDrag && ! stopMove ) { startTime += Time . deltaTime ; float t = startTime * smooting ; rect . horizontalNormalizedPosition = Mathf . Lerp ( rect . horizontalNormalizedPosition , targethorizontal , t ) ; if ( t >= 1 ) stopMove = true ; } } /// <summary> /// 切换页面的方法 /// </summary> /// <param name="index"></param> public void PageTo ( int index ) { if ( index >= 0 && index < posList . Count ) { rect . horizontalNormalizedPosition = posList [ index ] ; SetPageIndex ( index ) ; } else { Debug . Log ( "wu" ) ; } } /// <summary> /// 切换页面的方法0 /// </summary> /// <param name="index"></param> public void PageTo0 ( int index ) { if ( index >= 1 && index < posList . Count - 1 ) { rect . horizontalNormalizedPosition = posList [ index ] ; SetPageIndex ( index ) ; } else { //PageTo(1); //PageTo(pageToNumber0); } } /// <summary> /// 切换页面方法1 /// </summary> /// <param name="index"></param> public void PageTo1 ( int index ) { if ( index >= 1 && index < posList . Count - 1 ) { rect . horizontalNormalizedPosition = posList [ index ] ; SetPageIndex ( index ) ; } else { //PageTo(3); //PageTo(pageToNumber1); } } private void SetPageIndex ( int index ) { if ( currentPageIndex != index ) { currentPageIndex = index ; if ( OnPageChanged != null ) OnPageChanged ( index ) ; } } public void OnBeginDrag ( PointerEventData eventData ) { isDrag = true ; startDragHorizontal = rect . horizontalNormalizedPosition ; } public virtual void OnEndDrag ( PointerEventData eventData ) { float posX = rect . horizontalNormalizedPosition ; posX += ( ( posX - startDragHorizontal ) * sensitivity ) ; posX = posX < 1 ? posX : 1 ; posX = posX > 0 ? posX : 0 ; int index = 0 ; float offset = Mathf . Abs ( posList [ index ] - posX ) ; for ( int i = 1 ; i < posList . Count ; i ++ ) { float temp = Mathf . Abs ( posList [ i ] - posX ) ; if ( temp < offset ) { index = i ; offset = temp ; } } SetPageIndex ( index ) ; //Debug.Log(index); //count.imageImdex = index; //toEnd.InterputTime(); //设置当前坐标,更新函数进行插值 targethorizontal = posList [ index ] ; isDrag = false ; startTime = 0 ; stopMove = false ; StartCoroutine ( ToShowPinPaiImageButton ( ) ) ; } /// <summary> /// 显示对应按钮介绍 /// </summary> /// <returns></returns> IEnumerator ToShowPinPaiImageButton ( ) { yield return new WaitForSeconds ( 0.1f ) ; if ( currentPageIndex == 0 ) { ToChangeTo0 ( ) ; } if ( currentPageIndex == 1 ) { ToChangeTo1 ( ) ; } if ( currentPageIndex == 2 ) { ToChangeTo2 ( ) ; } if ( currentPageIndex == 3 ) { ToChangeTo3 ( ) ; } if ( currentPageIndex == 4 ) { ToChangeTo4 ( ) ; } } /// <summary> /// 切换到图片0 /// </summary> public void ToChangeTo0 ( ) { PageTo ( 0 ) ; } /// <summary> /// 切换到图片1 /// </summary> public void ToChangeTo1 ( ) { PageTo ( 1 ) ; } /// <summary> /// 切换到图片2 /// </summary> public void ToChangeTo2 ( ) { PageTo ( 2 ) ; } /// <summary> /// 切换到图片3 /// </summary> public void ToChangeTo3 ( ) { PageTo ( 3 ) ; } /// <summary> /// 切换到图片4 /// </summary> public void ToChangeTo4 ( ) { PageTo ( 4 ) ; }
}
` 3.将该脚本挂载到场景中的Scroll View组件上,并且将Content物体赋值到该脚本上,如下图所示:
4.Content物体设置如下图所示,并且在Content物体下挂载5个Image组件,并且排列好位置顺序,如下图所示:
5.Content物体设置如下图所示:
6.此时运行场景,发现已经可以滑动图片了,如下图所示:
7.有时候还有需求不光能滑动,还需要点击按钮变换图片,此时只需要进行一点点的改进即可,在场景中创建5个Button组件,如下图所示:
8.将PageView0脚本中的ToChangeTo0、ToChangeTo1、ToChangeTo2、ToChangeTo3、ToChangeTo4方法依次赋值到场景中的5个按钮中,运行场景,发现已经可以使用按钮切换图片了,如下图所示:
9.其实根据这个Demo可以实现很多效果的,比如左右键切换图片、拖动图片展示按钮效果等等,大家自己去慢慢探索吧!

案例相关

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值