Unity使用ScrollRect制作翻页

本文实例为大家分享了使用ScrollRect制作翻页的具体代码,供大家参考,具体内容如下

1.标准的层级结构 ScrollRect->ViewPort->Content,Viewport负责显示区域的大小一般和Mask一起配合使用,Content使用Layout来布局,如果想使用代码来自动定位显示位置需要在Content加上Content size filter.

2.ScrollRectHelper

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

public class ScrollRectHelper : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
  // 滑动速度
  public float smooting = 5;

  // 每页显示的项目
  [SerializeField]
  private int countPerPage = 10;

  ScrollRect srect;
  // 总页数
  float totalPages;
  // 是否拖拽结束
  bool isDrag = false;
  // 总页数索引比列 0-1
  List<float> listPageValue = new List<float> { 0 };
  // 滑动的目标位置
  public float targetPos = 0;
  // 当前位置索引
  float nowindex = 0;                 

  void Awake()
  {
    srect = GetComponent<ScrollRect>();
  }

  public string PageText()
  {
    return (nowindex + 1) + "/" + (totalPages + 1);
  }

  // 计算每页比例
  public void CalcListPageValue<T>() where T : MonoBehaviour
  {
    T[] items = srect.content.GetComponentsInChildren<T>();
    srect.content.rect.Set(srect.content.rect.width / 2, srect.content.rect.y, srect.content.rect.width, srect.content.rect.height);
    totalPages = (int)(Math.Ceiling((float)items.Length / countPerPage) - 1);
    if (items.Length != 0)
    {
      for (float i = 1; i <= totalPages; i++)
      {
        //Debug.Log(i / totalPages);
        listPageValue.Add((i / totalPages));
      }
    }
  }

  void Update()
  {
    if (!isDrag)
    {
      srect.horizontalNormalizedPosition = Mathf.Lerp(srect.horizontalNormalizedPosition, targetPos,
        Time.deltaTime * smooting);
    }

    // Debug
    if (Input.GetKeyDown(KeyCode.LeftArrow)) PressLeft();
    if (Input.GetKeyDown(KeyCode.RightArrow)) PressRight();
  }

  /// <summary>
  /// 拖动开始
  /// </summary>
  /// <param name="eventData"></param>
  public void OnBeginDrag(PointerEventData eventData)
  {
    isDrag = true;
  }

  /// <summary>
  /// 拖拽结束
  /// </summary>
  /// <param name="eventData"></param>
  public void OnEndDrag(PointerEventData eventData)
  {
    isDrag = false;
    var tempPos = srect.horizontalNormalizedPosition; //获取拖动的值
    var index = 0;
    float offset = Mathf.Abs(listPageValue[index] - tempPos);  //拖动的绝对值
    for (int i = 1; i < listPageValue.Count; i++)
    {
      float temp = Mathf.Abs(tempPos - listPageValue[i]);
      if (temp < offset)
      {
        index = i;
        offset = temp;
      }
    }
    targetPos = listPageValue[index];
    nowindex = index;
  }

  public void PressLeft()
  {
    nowindex = Mathf.Clamp(nowindex - 1, 0, totalPages);
    targetPos = listPageValue[Convert.ToInt32(nowindex)];
  }

  public void PressRight()
  {
    nowindex = Mathf.Clamp(nowindex + 1, 0, totalPages);
    targetPos = listPageValue[Convert.ToInt32(nowindex)];
  }
}

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

(0)

相关推荐

  • 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实现翻页按钮功能

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

  • Unity UGUI实现滑动翻页效果

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

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

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

  • unity scrollRect实现按页码翻页效果

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

  • Unity使用ScrollRect制作翻页

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

  • Unity使用ScrollRect制作摇杆

    本文实例为大家分享了Unity使用ScrollRect制作摇杆的具体代码,供大家参考,具体内容如下 一. 前言 游戏开发中,摇杆功能是很常见的,Unity的UGUI提供了ScrollRect组件,非常适合用来制作摇杆,效果如下: 二. 实现 1. 制作UI 如下,创建Rocker节点和center节点,分别为摇杆的背景图和摇杆的手柄图. Rocker节点挂上Rocker脚本(代码见文章最后),并赋值Content对象. 设置MovementType为Elastic. 2. 运行Unity进行测试

  • Unity Shader实现3D翻页效果

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

  • unity实现翻页效果

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

  • 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

随机推荐