不使用ScrollRect 和 HorizontalLayoutGroup做的横向循环列表

2024-05-24 16:12
文章标签 使用 循环 列表 横向 scrollrect horizontallayoutgroup

本文主要是介绍不使用ScrollRect 和 HorizontalLayoutGroup做的横向循环列表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、 版本一

1.前情提要

因为需要展示300多个相同的物体，但是如果全部放在场景内，运行起来会很卡，所以想到了用无限循环，然后动态填充不同的数据。
做的这个没有用HorizontalLayoutGroup 和 ScrollRect 。
1.没有使用HorizontalLayoutGroup，是因为运行后会在第一个放到后面后，自动给剩下的排序，然后排完发现第二个到了第一个的位置，然后，第二个自动符合排到最后的条件，然后第二个继续放到后面。。。
造成极短的时间内，所有东西都在不停向后排。
2.没有使用 ScrollRect是因为，它和IDragHandler接口都是滑动功能， 只需要一个就够了,而我使用IDragHandler更趁手。

2.效果展示

在这里插入图片描述

3.原理讲解

我使用的IDragHandler和IBeginDragHandler两个接口，在开始和每次drag后都保存上次的鼠标位置，然后拖拽的时候，移动他们的父级content。然后比较上次滑动的鼠标位置，左移，和最小值比较超过，就把第一个排到最后。同样，如果右移，和最大值比较超过，就把最后一个拍到第一个。TimeDanyuan是为了辨认的自定义类。使用时，可以自己使用其他的代替。
后续会优化，继续尝试其他方式，找到最优解。

4.功能代码

版本V1.0

private List<RectTransform> danyuans=new List<RectTransform>();public Transform content;private Vector3 last_mousePos;private float minXPos = 470.7586f;//左滑范围private float maxXPos = 1639.109f;//右滑范围private Vector3 oldPos;private float interval = 146;//间隔// Start is called before the first frame updatevoid Start(){var danyuans01=GetComponentsInChildren<TimeDanyuan>();foreach (var danyuan in danyuans01){var rect=danyuan.GetComponent<RectTransform>();danyuans.Add(rect);}}public void OnDrag(PointerEventData eventData){Vector3 mousepos = Input.mousePosition - last_mousePos;content.position = oldPos+ new Vector3(mousepos.x, 0,0);if (mousepos.x> 0)//右滑{//右滑超出边界 var first = content.transform.GetChild(0).GetComponent<RectTransform>();var last = content.transform.GetChild(content.childCount - 1).GetComponent<RectTransform>();if (last.position.x > maxXPos){last.anchoredPosition = new Vector2(first.anchoredPosition.x - interval, last.anchoredPosition.y);last.SetAsFirstSibling();}}else if(mousepos.x < 0) //左滑{//左滑超出边界var first = content.transform.GetChild(0).GetComponent<RectTransform>();var last = content.transform.GetChild(content.childCount - 1).GetComponent<RectTransform>();if (first.position.x < minXPos){first.anchoredPosition = new Vector2(last.anchoredPosition.x+ interval, first.anchoredPosition.y);first.SetAsLastSibling();}}last_mousePos = Input.mousePosition;oldPos = content.position;}public void OnBeginDrag(PointerEventData eventData){last_mousePos =Input.mousePosition;oldPos = content.position;}

二、 版本二，增加新的功能，可以根据左右滑动，里面的内容会不同。

1.效果截图

右滑 里面的数值会变大
在这里插入图片描述
左滑里面的数值会变小在这里插入图片描述

2.具体增加的内容

具体只增加了一个next_index 属性来标记序号，OnChange事件用来相应左右滑动时的事件，给里面的内容赋值。OnChange需要一个要赋值的值（这里是个int类型的值）和具体需要改的物体。

3…代码

private List<RectTransform> danyuans=new List<RectTransform>();public Transform content;private Vector3 last_mousePos;private float minXPos = 470.7586f;//左滑范围private float maxXPos = 1639.109f;//右滑范围private Vector3 oldPos;private float interval = 146;//间隔public Action<int, RectTransform> OnChange;private int next_index;// Start is called before the first frame updatevoid Start(){foreach (Transform danyuan in content){var rect=danyuan.GetComponent<RectTransform>();danyuans.Add(rect);}OnChange += ChangeIndex;}public void OnDrag(PointerEventData eventData){Vector3 mousepos = Input.mousePosition - last_mousePos;content.position = oldPos+ new Vector3(mousepos.x, 0,0);if (mousepos.x> 0)//右滑{//右滑超出边界 var first = content.transform.GetChild(0).GetComponent<RectTransform>();var last = content.transform.GetChild(content.childCount - 1).GetComponent<RectTransform>();if (last.position.x > maxXPos){last.anchoredPosition = new Vector2(first.anchoredPosition.x - interval, last.anchoredPosition.y);last.SetAsFirstSibling();int index=int.Parse(first.GetComponentInChildren<TextMeshProUGUI>().text);next_index = index - 1;OnChange(next_index,last);}}else if(mousepos.x < 0) //左滑{//左滑超出边界var first = content.transform.GetChild(0).GetComponent<RectTransform>();var last = content.transform.GetChild(content.childCount - 1).GetComponent<RectTransform>();if (first.position.x < minXPos){first.anchoredPosition = new Vector2(last.anchoredPosition.x+ interval, first.anchoredPosition.y);first.SetAsLastSibling();int index = int.Parse(last.GetComponentInChildren<TextMeshProUGUI>().text);next_index = index + 1;OnChange(next_index,first);}}last_mousePos = Input.mousePosition;oldPos = content.position;}public void OnBeginDrag(PointerEventData eventData){last_mousePos =Input.mousePosition;oldPos = content.position;}private void ChangeIndex(int index, RectTransform c_item){var text= c_item.GetComponentInChildren<TextMeshProUGUI>();text.text = index.ToString();}

版本三 时间显示无限滚动进度条

这个版本改成了，时间的以前和未来。随着滚动，可以无限滚动到以前，也可以无限滚动到未来。
没有显示最大最小日期。

using System;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
/// <summary>
/// 时间显示进度条
/// </summary>
public class InfiniteTimeline : MonoBehaviour, IDragHandler, IBeginDragHandler
{private List<RectTransform> danyuans = new List<RectTransform>();public Transform content;private Vector3 last_mousePos;private float minXPos = 470.7586f;//左滑范围private float maxXPos = 1639.109f;//右滑范围private Vector3 oldPos;private float interval = 146;//间隔public Action<DateTime, RectTransform> OnChange;private DateTime next_index;/// <summary>/// 初始化时间/// </summary>/// <param name="start"></param>/// <param name="end"></param>public void Onchushihua(){#region 旧代码//startTime=start;//endTime=end;//shijian_refab =transform.XuYiFindChild("时间条").GetComponentInChildren<TimeDanyuan>();//var dur = end.Subtract(start).Days;//mytexts = new List<TimeDanyuan>();//var prefabRect = shijian_refab.transform.parent.GetComponent<RectTransform>();//prefabRect.anchoredPosition = Vector2.zero;//for (int i = 0; i <= dur; i++)//{//    var obj = Instantiate(shijian_refab.gameObject, shijian_refab.transform.parent);//    //if (start.AddDays(i)==DateTime.Today)//    //{//    //    var toggle = obj.GetComponent<Toggle>();//    //    toggle.isOn = true;//    //}//    var objTime = obj.GetComponent<TimeDanyuan>();//    objTime.OnChushihua(start.AddDays(i));//    obj.SetActive(true);//    mytexts.Add(objTime);//}var shijian_rect=shijian_refab.GetComponent<RectTransform>();//scro_efab = GetComponent<ScrollRect>();//float temp = (float)(DateTime.Today-start).TotalDays-3;//LayoutRebuilder.ForceRebuildLayoutImmediate(scro_efab.content);scro_efab.horizontalScrollbar.value = 0.5f;//var shijRect = shijian_refab.transform.GetComponent<RectTransform>();//scro_efab.content.anchoredPosition = new Vector2(-temp * shijRect.sizeDelta.x, 0);#endregionint index = -3;foreach (Transform danyuan in content){var rect = danyuan.GetComponent<RectTransform>();var mytext= danyuan.GetComponentInChildren<TextMeshProUGUI>();if (mytext != null)mytext.text = DateTime.Today.AddDays(index).ToString("yyyy.M.d");danyuans.Add(rect);index++;}OnChange += ChangeIndex;}/// <summary>/// 跳转到指定时间/// </summary>/// <param name="mid"></param>public void SetScrollRect(DateTime mid){#region 旧代码//if (mid>=startTime && mid <= endTime)//{//    TimeSpan x = mid - startTime;//    float result = (float)x.TotalDays-3;//    var shijRect = shijian_refab.transform.GetComponent<RectTransform>();//    scro_efab.content.anchoredPosition = new Vector2(-result * shijRect.sizeDelta.x, 0);//}#endregion}// Start is called before the first frame updatevoid Start(){Onchushihua();}public void OnDrag(PointerEventData eventData){Vector3 mousepos = Input.mousePosition - last_mousePos;content.position = oldPos + new Vector3(mousepos.x, 0, 0);if (mousepos.x > 0)//右滑{//右滑超出边界 var first = content.transform.GetChild(0).GetComponent<RectTransform>();var last = content.transform.GetChild(content.childCount - 1).GetComponent<RectTransform>();if (last.position.x > maxXPos){last.anchoredPosition = new Vector2(first.anchoredPosition.x - interval, last.anchoredPosition.y);last.SetAsFirstSibling();DateTime index = DateTime.Parse(first.GetComponentInChildren<TextMeshProUGUI>().text);next_index = index.AddDays(-1);OnChange(next_index, last);}}else if (mousepos.x < 0) //左滑{//左滑超出边界var first = content.transform.GetChild(0).GetComponent<RectTransform>();var last = content.transform.GetChild(content.childCount - 1).GetComponent<RectTransform>();if (first.position.x < minXPos){first.anchoredPosition = new Vector2(last.anchoredPosition.x + interval, first.anchoredPosition.y);first.SetAsLastSibling();DateTime index = DateTime.Parse(last.GetComponentInChildren<TextMeshProUGUI>().text);next_index = index.AddDays(1);OnChange(next_index, first);}}last_mousePos = Input.mousePosition;oldPos = content.position;}public void OnBeginDrag(PointerEventData eventData){last_mousePos = Input.mousePosition;oldPos = content.position;}private void ChangeIndex(DateTime index, RectTransform c_item){var text = c_item.GetComponentInChildren<TextMeshProUGUI>();text.text = index.ToString("yyyy.M.d");}
}

这篇关于不使用ScrollRect 和 HorizontalLayoutGroup做的横向循环列表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/998896。

相关文章

使用Python创建一个功能完整的Windows风格计算器程序

使用Python创建一个功能完整的Windows风格计算器程序

《使用Python创建一个功能完整的Windows风格计算器程序》：本文主要介绍如何使用Python和Tkinter创建一个功能完整的Windows风格计算器程序,包括基本运算、高级科学计算（如三... 目录python实现Windows系统计算器程序（含高级功能）1. 使用Tkinter实现基础计算器2.
阅读更多...
在.NET平台使用C#为PDF添加各种类型的表单域的方法

在.NET平台使用C#为PDF添加各种类型的表单域的方法

《在.NET平台使用C#为PDF添加各种类型的表单域的方法》在日常办公系统开发中,涉及PDF处理相关的开发时,生成可填写的PDF表单是一种常见需求,与静态PDF不同,带有**表单域的文档支持用户直接在... 目录引言使用 PdfTextBoxField 添加文本输入域使用 PdfComboBoxField
阅读更多...
Git可视化管理工具(SourceTree)使用操作大全经典

Git可视化管理工具(SourceTree)使用操作大全经典

《Git可视化管理工具(SourceTree)使用操作大全经典》本文详细介绍了SourceTree作为Git可视化管理工具的常用操作,包括连接远程仓库、添加SSH密钥、克隆仓库、设置默认项目目录、代码... 目录前言：连接Gitee or github，获取代码:在SourceTree中添加SSH密钥：Cl
阅读更多...
Python中模块graphviz使用入门

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚
阅读更多...
windows和Linux使用命令行计算文件的MD5值

windows和Linux使用命令行计算文件的MD5值

《windows和Linux使用命令行计算文件的MD5值》在Windows和Linux系统中,您可以使用命令行（终端或命令提示符）来计算文件的MD5值,文章介绍了在Windows和Linux/macO... 目录在Windows上：在linux或MACOS上：总结在Windows上：可以使用certuti
阅读更多...
CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设
阅读更多...
Python使用Matplotlib绘制3D曲面图详解

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》：本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib
阅读更多...
Pandas中统计汇总可视化函数plot()的使用

Pandas中统计汇总可视化函数plot()的使用

《Pandas中统计汇总可视化函数plot()的使用》Pandas提供了许多强大的数据处理和分析功能,其中plot()函数就是其可视化功能的一个重要组成部分,本文主要介绍了Pandas中统计汇总可视化... 目录一、plot()函数简介二、plot()函数的基本用法三、plot()函数的参数详解四、使用pl
阅读更多...
使用Python实现IP地址和端口状态检测与监控

使用Python实现IP地址和端口状态检测与监控

《使用Python实现IP地址和端口状态检测与监控》在网络运维和服务器管理中,IP地址和端口的可用性监控是保障业务连续性的基础需求,本文将带你用Python从零打造一个高可用IP监控系统,感兴趣的小伙... 目录概述：为什么需要IP监控系统使用步骤说明1. 环境准备2. 系统部署3. 核心功能配置系统效果展
阅读更多...
使用Java将各种数据写入Excel表格的操作示例

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2