不使用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。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2