Unity实现UGUI拖拽展示图片功能
前言
在使用Unity开发展馆展示的一些图片的时候，有时候需要实现那种拖拽滑动展示图片的功能。这种需求在展馆展示中非常的常见，在游戏开发中也非常的常见，我在这里总结了一套开发方法，供大家参考。具体实现方法如下所示：
实现方法
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可以实现很多效果的，比如左右键切换图片、拖动图片展示按钮效果等等，大家自己去慢慢探索吧！