unity scrollRect实现按页码翻页效果

本文实例为大家分享了unity实现按页码翻页效果的具体代码,供大家参考,具体内容如下

用来做背包 商店的按页翻页功能,先上效果图

其中,dragNum 表示的是 如果为3,便是滑动距离超过当前页面宽度的百分之三十位成功

connect表示 scrollRect下connet的大小

然后是函数的初始化方法 这里提供了两个方法  一个是直接提供页数 参数分别代表 总页数,要显示的页数 以及切换到要显示的页数是否播放滑动动画

以及当时用来做背包、商店的方法2

和上面不用的是传入的是物品的数量以及每页显示格子数量的vector2 是否需要改变connect的大小 (需要提前把connect的大小设置为一页的大小)以及打开时显示的页数

思路大致如下 继承 IBeginDragHandler, IEndDragHandler两个接口

在begin时将需要的两个参数 scrollNeedMove 以及scrollTargetValue 置位默认值

在end时计算

具体代码如下

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class ScrollPageTool : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{

 public Button pageLastButton;
 public Button pageNextButton;
 public Text pageNumText;
 public GridLayoutGroup itemConnect;
 [SerializeField]
 private bool buttonPageEnable;
 private int m_nowPage;//从0开始
 private int m_pageCount;
 /// <summary>
 /// 滑动距离超过一页的 (m_dragNum*10)% 则滑动成功
 /// </summary>
 public int m_dragNum;
 private float m_pageAreaSize;
 private const float SCROLL_SMOOTH_TIME = 0.2F;
 private const float SCROLL_MOVE_SPEED = 1F;
 private float scrollMoveSpeed = 0f;
 private bool scrollNeedMove = false;
 private float scrollTargetValue;
 public ScrollRect scrollRect;

 private bool isRegistEvent = false;

 public bool SetButtonStatus
 {
 set
 {
 buttonPageEnable = value;
 pageLastButton.interactable = buttonPageEnable && pageLastButton.interactable;
 pageNextButton.interactable = buttonPageEnable && pageNextButton.interactable;
 }
 }
 public void InitManager(int _allItemNum, Vector2 pageItemSize, bool isNeedChangeSize = true, int pageNum = 0,bool isShowAnim=false)
 {
 RegistEvent();
 int _pageItemNum = (int)(pageItemSize.x * pageItemSize.y);
 m_pageCount = (_allItemNum / _pageItemNum) + ((_allItemNum % _pageItemNum == 0) ? 0 : 1);
 m_pageAreaSize = 1f / (m_pageCount - 1);
 ChangePage(pageNum);
 if (isNeedChangeSize)
 itemConnect.GetComponent<RectTransform>().sizeDelta = new Vector2((itemConnect.cellSize.x * pageItemSize.x + itemConnect.spacing.x * pageItemSize.x) * m_pageCount,
 itemConnect.padding.top + itemConnect.padding.bottom + itemConnect.cellSize.y * pageItemSize.y + (pageItemSize.y - 1) * itemConnect.spacing.y);
 }

 public void InitManager(int pageNum, int targetPage = 0, bool isShowAnim = false)
 {
 RegistEvent();
 m_pageCount = pageNum;
 ChangePage(targetPage, isShowAnim);
 }

 private void RegistEvent()
 {
 if (isRegistEvent)
 return;
 isRegistEvent = true;
 if (pageLastButton != null)
 pageLastButton.onClick.AddListener(delegate { Paging(-1); });
 if (pageNextButton != null)
 pageNextButton.onClick.AddListener(delegate { Paging(1); });
 }

 private void Paging(int num)
 {
 //maxNum-1,从0开始
 num = (num < 0) ? -1 : 1;
 int temp = Mathf.Clamp(m_nowPage + num, 0, m_pageCount - 1);
 if (m_nowPage == temp)
 return;
 ChangePage(temp);
 }
 void Update()
 {
 ScrollControl();
 }

 public int GetPageNum { get { return m_nowPage; } }
 //按页翻动
 private void ScrollControl()
 {
 if (!scrollNeedMove)
 return;
 if (Mathf.Abs(scrollRect.horizontalNormalizedPosition - scrollTargetValue) < 0.01f)
 {
 scrollRect.horizontalNormalizedPosition = scrollTargetValue;
 scrollNeedMove = false;
 return;
 }
 scrollRect.horizontalNormalizedPosition = Mathf.SmoothDamp(scrollRect.horizontalNormalizedPosition, scrollTargetValue, ref scrollMoveSpeed, SCROLL_SMOOTH_TIME);
 }

 public void OnBeginDrag(PointerEventData eventData)
 {
 scrollNeedMove = false;
 scrollTargetValue = 0;
 }
 public void OnEndDrag(PointerEventData eventData)
 {
 int tempPage = m_nowPage;

 int num=(((scrollRect.horizontalNormalizedPosition - (m_nowPage * m_pageAreaSize))>=0)?1:-1);

 if(Mathf.Abs(scrollRect.horizontalNormalizedPosition - (m_nowPage * m_pageAreaSize))>= (m_pageAreaSize / 10f) * m_dragNum)
 {
 tempPage+=num;

 }
 ChangePage(tempPage);
 }

 public void ChangePage(int pageNum, bool isShowAnim = true)
 {
 if (pageNum >= m_pageCount)
 pageNum = m_pageCount - 1;
 if (pageNum < 0)
 pageNum = 0;

 m_nowPage = pageNum;
 ChangePageText(pageNum);
 if (isShowAnim)
 {
 scrollTargetValue = m_nowPage * m_pageAreaSize;
 scrollNeedMove = true;
 scrollMoveSpeed = 0;
 }
 else
 {
 scrollRect.horizontalNormalizedPosition = m_nowPage * m_pageAreaSize;
 }
 ChangePageText(m_nowPage);
 }

 public void ChangePageText(int num)
 {
 int maxPageTo0Start = m_pageCount - 1;
 m_nowPage = Mathf.Clamp(num, 0, maxPageTo0Start);

 if (pageNumText != null)
 pageNumText.text = (m_nowPage + 1).ToString() + "/" + m_pageCount.ToString();

 //only one page
 if (maxPageTo0Start == 0)
 {
 scrollRect.enabled = false;
 pageLastButton.interactable = false;
 pageNextButton.interactable = false;
 return;
 }
 else
 {
 pageLastButton.interactable = true;
 pageNextButton.interactable = true;
 scrollRect.enabled = true;
 }
 SetButtonStatus = buttonPageEnable;
 if (!buttonPageEnable)
 return;

 if (m_nowPage == 0 && pageLastButton.interactable)
 pageLastButton.interactable = false;
 if (m_nowPage >= maxPageTo0Start && pageNextButton.interactable)
 pageNextButton.interactable = false;
 if (m_nowPage > 0 && (!pageLastButton.interactable))
 pageLastButton.interactable = true;
 if (m_nowPage < maxPageTo0Start && (!pageNextButton.interactable))
 pageNextButton.interactable = true;

 }
}

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

(0)

相关推荐

  • unity实现翻页按钮功能

    本文实例为大家分享了unity实现翻页按钮功能的具体代码,供大家参考,具体内容如下 效果图: UI子父级关系: 代码中也都有加入注释,有不懂可私信我.脚本中用到了对象池,我没有上传,可根据自己需求做相应变动. 脚本:PageBtnPanelC using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Events; using UnityEngine.UI; /

  • Unity使用ScrollRect制作翻页

    本文实例为大家分享了使用ScrollRect制作翻页的具体代码,供大家参考,具体内容如下 1.标准的层级结构 ScrollRect->ViewPort->Content,Viewport负责显示区域的大小一般和Mask一起配合使用,Content使用Layout来布局,如果想使用代码来自动定位显示位置需要在Content加上Content size filter. 2.ScrollRectHelper using UnityEngine; using UnityEngine.UI; using

  • Unity工具类ScrollView实现拖拽滑动翻页

    简介: 在进行UI设计的时候,经常会使用Unity中UI提供的ScrollView,类似Android中的ScrollView,在进行图片预览,多个翻页的时候,能实现很好的效果. 该类中根据Unity的EventSystems中拖拽事件,实现对页码的滑动监听,在使用的时候,新建UI--->ScrollView,把该类组件添加到ScrollView上,把对应的content加入该脚本中的content,调整ScrollView和Content,设置单个滑动页的宽度,拖拽的阈值,即可监听到拖拽,如果

  • 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 scrollRect实现按页码翻页效果

    本文实例为大家分享了unity实现按页码翻页效果的具体代码,供大家参考,具体内容如下 用来做背包 商店的按页翻页功能,先上效果图 其中,dragNum 表示的是 如果为3,便是滑动距离超过当前页面宽度的百分之三十位成功 connect表示 scrollRect下connet的大小 然后是函数的初始化方法 这里提供了两个方法  一个是直接提供页数 参数分别代表 总页数,要显示的页数 以及切换到要显示的页数是否播放滑动动画 以及当时用来做背包.商店的方法2 和上面不用的是传入的是物品的数量以及每页显

  • unity实现翻页效果

    本文实例为大家分享了unity实现翻页效果的具体代码,供大家参考,具体内容如下 一.示意图 二.步骤 创建物体ToPanel:添加组件ScrollRect, 在下面创建一个空物体用来装需要移动的子物体, 创建一个Scrollbar: 三.代码 下面展示一些 内联代码片. using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; public class

  • Unity Shader实现3D翻页效果

    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Shader顶点动画 在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理). Shader "Unlit/PaperTurnMilkSha

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

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

  • Javascript表格翻页效果的具体实现

    表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {

  • DEDECMS实用漂亮的翻页效果修改方法第1/3页

    在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例). 一.内容页分页代码修改 首先介绍下基础知识,dede的内容页调用标记是: 复制代码 代码如下: <div class="cupage">{dede:pagebreak/}</div> 生成html后形式为: 复制代码 代码如下: <div class="cupage"><a href='#'>上一页</a><strong&

  • Android通过手势实现答题器翻页效果

    本文实例为大家分享了Android答题器翻页功能,主要使用ViewFilpper和GestureDetector来实现,供大家参考,具体内容如下 1.效果图 2.实现思路 把Activity的TouchEvent事件交个GestureDetector来处理,然后使用ViewFilpper使用动画控制多个组件的之间的切换效果.手势的一个Api就不详细说了,大家如果不了解可以查一下. 3.实现的步骤 1).构建手势检测器 2).准备数据 3).为ViewFilpper添加子控件. 4).初始化Ani

  • JS实现的3D拖拽翻页效果代码

    本文实例讲述了JS实现的3D拖拽翻页效果.分享给大家供大家参考,具体如下: 以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法.感谢原创作者的创意,结果一样,但过程不一样哦.奉上代码,供大家参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • javaScript+turn.js实现图书翻页效果实例代码

    为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件   

随机推荐