Unity UGUI实现滑动翻页直接跳转页数

本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下

首先看一下最终效果

其实这个功能基本上是老生常谈了,所以代码还是很简单

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

public class PageView : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{

 private ScrollRect rect;      //滑动组件
 private float targethorizontal = 0;    //滑动的起始坐标
 private bool isDrag = false;     //是否拖拽结束
 private List<float> posList = new List<float>();   //求出每页的临界角,页索引从0开始
 private int currentPageIndex = -1;
 public Action<int> OnPageChanged;
 public RectTransform content;
 private bool stopMove = true;
 public float smooting = 4;  //滑动速度
 public float sensitivity = 0;
 private float startTime;

 private float startDragHorizontal;
 public Transform toggleList;

 void Start()
 {
  rect = transform.GetComponent<ScrollRect>();
  var _rectWidth = GetComponent<RectTransform>();
  var tempWidth = ((float)content.transform.childCount * _rectWidth.rect.width);
  content.sizeDelta = new Vector2(tempWidth, _rectWidth.rect.height);
  //未显示的长度
  float horizontalLength = content.rect.width - _rectWidth.rect.width;
  for (int i = 0; i < rect.content.transform.childCount; i++)
  {
   posList.Add(_rectWidth.rect.width * i / horizontalLength);
  }
 }

 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;
  }
  //Debug.Log(rect.horizontalNormalizedPosition);
 }

 public void pageTo(int index)
 {
  if (index >= 0 && index < posList.Count)
  {
   rect.horizontalNormalizedPosition = posList[index];
   SetPageIndex(index);
   GetIndex(index);
  }
 }
 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 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);
  //Debug.Log("offset " + offset);

  for (int i = 1; i < posList.Count; i++)
  {
   float temp = Mathf.Abs(posList[i] - posX);
   //Debug.Log("temp " + temp);
   //Debug.Log("i" + i);
   if (temp < offset)
   {
    index = i;
    offset = temp;
   }
   //Debug.Log("index " + index);
  }
  //Debug.Log(index);
  SetPageIndex(index);
  GetIndex(index);
  targethorizontal = posList[index]; //设置当前坐标,更新函数进行插值
  isDrag = false;
  startTime = 0;
  stopMove = false;

 }

 public void GetIndex(int index)
 {
  var toogle = toggleList.GetChild(index).GetComponent<Toggle>();
  toogle.isOn = true;
 }
}
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System;

public class GameController : MonoBehaviour {
 [SerializeField]
 private Text pageNumber;
 [SerializeField]
 private InputField inputField;
 [SerializeField]
 private PageView pageView;
 // Use this for initialization
 void Start () {
  pageNumber.text = string.Format ("当前页码:0");
  pageView.OnPageChanged = pageChanged;
 }

 void pageChanged (int index) {
  pageNumber.text = string.Format ("当前页码:{0}" , index.ToString ());
 }

 public void onClick () {
  try {
   int idnex = int.Parse (inputField.text);
   pageView.pageTo (idnex);
  } catch(Exception ex) {
   Debug.LogWarning ("请输入数字"+ex.ToString());
  }
 }

 void Destroy () {
  pageView.OnPageChanged = null;
 }
}

附上项目:地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • UGUI实现图片拖拽功能

    这一篇博客我们来使用UGUI实现图片的拖拽功能. 说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标.),这两个坐标是不一样的,所以拖拽是就需要转换.因为鼠标的移动是屏幕坐标,而 UI 的移动是ugui坐标.转换的方法: RectTransformUtility.ScreenPointToLocalPointInRectangle ( - );这个方法可以把屏幕坐标转换成 ugui 坐标.至于屏幕

  • UGUI ScrollRect实现带按钮翻页支持拖拽

    本文实例为大家分享了UGUI ScrollRect带按钮翻页支持拖拽的具体代码,供大家参考,具体内容如下 using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.EventSystems; using System.Collections.Generic; using System; /// <summary> /// 略知CSharp /// </summary> p

  • Unity UGUI实现滑动翻页效果

    本文实例为大家分享了Unity UGUI实现滑动翻页效果的具体代码,供大家参考,具体内容如下 这个问题真的是老生常谈的事情了,不过在这里还是要说一下,以便以后之需 首先看一下效果图 最后在Content下面是一些Image using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using

  • Unity UGUI实现滑动翻页直接跳转页数

    本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下 首先看一下最终效果 其实这个功能基本上是老生常谈了,所以代码还是很简单 using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using System; public class Pa

  • Unity UGUI教程之实现滑页效果

    简介 项目需要...直接展示效果吧: 原理 使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果. 实现过程 1.创建两个panel,上面的panel用于显示,下面的panel用于存放按钮 2.在TopPanel上添加ScrollRect脚本,用于滑动 3.在TopPanel下创建一个新的Panel,并在子Panel下拜访要显示的对象 4.将该子Panel设置为ScrollRect的活动对象 5.为ScrollRect添加Scroll

  • 使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • 解析Android中实现滑动翻页之ViewFlipper的使用详解

    1)View切换的控件-ViewFlipper介绍 ViewFilpper类继承于ViewAnimator类.而ViewAnimator类继承于FrameLayout. 查看ViewAnimator类的源码可以看出此类的作用主要是为其中的View切换提供动画效果.该类有如下几个和动画相关的方法. setInAnimation:设置View进入屏幕时候使用的动画.该方法有两个重载方法,即可以直接传入Animation对象,也可以传入定义的Animation文件的resourceID. setOut

  • android ViewPager实现滑动翻页效果实例代码

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

  • Android ViewPager实现左右滑动翻页效果

    本文实例为大家分享了ViewPager实现左右滑动翻页效果展示的具体代码,供大家参考,具体内容如下 代码如下: package com.example.demo; import java.util.ArrayList; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import a

  • Android自定义左右或上下滑动翻页效果

    本文实例为大家分享了Android自定义左右或上下滑动翻页展示的具体代码,供大家参考,具体内容如下 该自定义的效果和ViewPage+Fragment差不多 上下滑动翻页,继承ScrollView public class SlideScrollView extends ScrollView implements PageSlide{ private TotalSlide totalSlide; public SlideScrollView(AppCompatActivity context)

  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是

  • 微信小程序实现滑动翻页效果(完整代码)

    微信小程序实现滑动翻页效果,效果图如下所示: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interva

随机推荐