【Unity】构建简单实用的年份选择器(简单原理示范)

在许多应用程序和游戏中,年份选择是一个常见的需求。无论是在日历应用程序中查看事件,还是在历史类游戏中选择时间段,年份选择器都是用户体验的重要组成部分,下面实现一个简易的年份选择器。

一、效果预览: 

目录

一、效果预览: 

二、步骤

2.1 场景准备

 2.2 项目准备

2.3 编写脚本

三、总结 


二、步骤

2.1 场景准备

1. 创建场景新建Image调整大小为宽360,高300(原理:年份内容显示5个,每个宽100,高60,总共60*5,于是高设置为300)。

2. 为Image添加mask组件(遮挡其他年份)和ScrollRect 组件,使其作为滚动视图的容器,最后调整参数,我这里垂直滚动,于是取消了Horizontal选项。

3. 在Image下创建空物体GameObject(用来存放后面运行生成的年份)。

4.为空物体GameObject添加Grid Layout Group和Content Size Fitter组件,调整参数(这里可以在其下创建几个Image查看效果)。

5. 在Image的ScrollRect 组件中拖入相应物体。

 2.2 项目准备

创建Text预制体(用来显示年份) ,字体等参数可以根据自己需要调整。

2.3 编写脚本

using UnityEngine;
using UnityEngine.UI;public class SlidingAdsorption : MonoBehaviour
{public GameObject yearTextPrefab; // 预设的年份Text对象public ScrollRect scrollRect;public float scaleDifference = 0.5f; // 缩放差异public RectTransform contentRectTrans; // Scroll Rect Content的RectTransformprivate RectTransform[] items;//用来存放生成的年份int yearsCount =40; // 年份总数float viewPortSize;float center;int itemCount;void Start(){// 获取ScrollView的视图大小300;viewPortSize = scrollRect.viewport.rect.height;Debug.Log("ScrollView的视图大小:" + viewPortSize);// 计算ScrollView的中心位置center = scrollRect.transform.position.y;// - viewPortSize / 2;       Debug.Log("ScrollView的中心位置:" + center);for (int i = 0; i < yearsCount; i++){GenerateYearText(1950 + i);}// 获取ScrollView中的所有子对象itemCount = scrollRect.content.childCount;items = new RectTransform[itemCount];for (int i = 0; i < itemCount; i++){items[i] = scrollRect.content.GetChild(i).GetComponent<RectTransform>();//Debug.Log("items[i]: " + i);}}void Update(){foreach (RectTransform item in items){// 计算每个项目的中心位置float itemCenter = item.transform.position.y;// - item.rect.height / 2;//Debug.Log("每个项目的中心位置: " + itemCenter);// 计算每个项目相对于ScrollView中心的偏移量float distanceFromCenter = Mathf.Abs(center - itemCenter);// 根据偏移量计算缩放比例float scale = Mathf.Clamp(1 - distanceFromCenter * scaleDifference / viewPortSize, 0.5f, 1f);//Debug.Log("根据偏移量计算缩放比例: " + scale);// 应用缩放item.localScale = new Vector3(scale, scale, 1f);}// 如果用户停止滑动,则吸附到最近的年份if (scrollRect.velocity.magnitude <= 20.0f){SnapToNearestYear();Debug.Log("不移动了!");}}private void GenerateYearText(int year){GameObject yearText = Instantiate(yearTextPrefab, contentRectTrans);yearText.transform.SetAsFirstSibling();yearText.transform.GetComponent<Text>().text = year.ToString();}void SnapToNearestYear(){RectTransform closestItem = null;foreach (RectTransform item in items){float distance = Mathf.Abs(center - item.position.y);if (distance < 35)// 根据需求调整阈值{closestItem = item;Debug.Log("装入了一个Item");}}// 将最近的年份吸附到ScrollView的中心if (closestItem != null){// 计算需要移动的距离float distanceToMove = center - closestItem.position.y;// 将ScrollView的内容向上或向下移动,使最近的年份对象出现在ScrollView的中心scrollRect.content.anchoredPosition += new Vector2(0f, distanceToMove);}}
}

 将脚本挂载在Canvas上,并将相应物体拖入。

此处原理可以参考我这两篇文章:如何在 Unity 中创建带有缩放效果的滚动视图?(简单方法) 

在Unity 中创建带有缩放效果的滚动视图(具有吸附效果的实现与优化)?

三、总结 

通过本文探讨了在Unity中创建年份选择器的基本步骤,无论是在日历应用、历史游戏还是其他类型的应用中,一个功能完善的年份选择器都能够为用户提供更好的体验,提升应用的质量和竞争力。希望本文能够对读者在Unity开发中实现年份选择器有所帮助,为其未来的项目开发提供有益的指导和参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/709373.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派驱动编译

驱动编译前提&#xff1a;驱动代码的编译需要提前编译号的内核 驱动&#xff08;3种实现方法&#xff0c;2条路线&#xff09;_驱动编写三种方法-CSDN博客 驱动的编写_驱动编写-CSDN博客 一、概念 1.1、驱动认识 1、裸机程序中是直接操控硬件的&#xff0c;操作系统…

力扣-跳跃游戏

问题 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 解答 class Solu…

C++ 入门(八)— 常量和字符串

常量和字符串 常量变量常量表达式编译时优化 Constexpr 变量std::string字符串输出 std::coutstd::string可以处理不同长度的字符串字符串输入 std::cin用于输入文本std::getline()不要按值传递Constexpr 字符串 std::string_view可以使用许多不同类型的字符串进行初始化可以接…

v69.字符

1.字符类型 1.1 可以将char类型的变量赋值为整数&#xff0c;也可以赋值为字符! 注意字符要用单引号 ’ ’ 而不是双引号 每一个字符在计算机内部都有一个值去表达它。字符’1’ 在计算机里表示的十进制的整数值为49&#xff0c;就像’A’表示十进制值65。 1.2 scanf 与 p…

C++面试宝典第33题:数组组成最大数

题目 给定一组非负整数nums,重新排列每个数的顺序(每个数不可拆分)使之组成一个最大的整数。注意:输出结果可能非常大,所以你需要返回一个字符串而不是整数。 示例1: 输入:nums = [10, 2] 输出:"210" 示例2: 输入:nums = [3, 30, 34, 5, 9] 输出:"…

【查漏补缺你的Vue基础】Vue数据监听深度解析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

【rust】10 project、crate、mod、pub、use、项目目录层级组织、概念和实战

文章目录 一、项目目录层级组织概念1.1 cargo new 创建同名 的 Project 和 crate1.2 多 crate 的 package1.3 mod 模块1.3.1 创建嵌套 mod1.3.2 mod 树1.3.3 用路径引用 mod1.3.3.1 使用绝对还是相对? 1.3.4 代码可见性1.3.4.1 pub 关键字1.3.4.2 用 super 引用 mod1.3.4.3 用…

阿里Java开发手册(黄山版) LeetCode刷题手册 免费下载

目录 一、阿里Java开发手册(黄山版) 二、LeetCode刷题手册 三、获取方式 今天给大家推荐两个程序员的辅助利器&#xff01;都是平时开发&#xff0c;刷算法能经常用到的书籍&#xff0c;怕百度云分享会失效&#xff0c;获取方式在最下面&#xff0c;永久有效。 一、阿里Jav…

C++ 反向迭代器的设计与实现

在本文开始之前&#xff0c;先明晰几个 关键词 的含义&#xff08;T : 模板参数&#xff09;&#xff1a; Ref : T& / const T&Ptr : T* / const T* 一、反向迭代器设计的上帝视角 我们希望将 反向迭代器 设计成一种适配器——传 list::iterator 得到 list 的反向迭代…

Lastools工具使用

Lastools工具使用 1、介绍 官网链接 常用的功能 las2las可以进行点云拼接las2txt可以将点云中的有效信息转换为txt文档&#xff08;如xyz坐标&#xff09;lasmerge可以将多个LAS/LAZ文件合并为一个文件Laszip将LAS文件高速压缩到LAZ而不会丢失信息las2text将LAS/LAZ转换为可…

C++初阶:模版相关知识的进阶内容(非类型模板参数、类模板的特化、模板的分离编译)

结束了常用容器的介绍&#xff0c;今天继续模版内容的讲解&#xff1a; 文章目录 1.非类型模版参数2.模板的特化2.1模版特化引入和概念2.2函数模版特化2.3类模板特化2.3.1全特化2.3.1偏特化 3. 模板分离编译3.1分离编译概念3.2**模板的分离编译**分析原因 1.非类型模版参数 模板…

设计模式(五)-观察者模式

前言 实际业务开发过程中&#xff0c;业务逻辑可能非常复杂&#xff0c;核心业务 N 个子业务。如果都放到一块儿去做&#xff0c;代码可能会很长&#xff0c;耦合度不断攀升&#xff0c;维护起来也麻烦&#xff0c;甚至头疼。还有一些业务场景不需要在一次请求中同步完成&…

如何在Linux系统Docker部署Wiki.js容器并结合内网穿透实现远程访问本地知识库

文章目录 1. 安装Docker2. 获取Wiki.js镜像3. 本地服务器打开Wiki.js并添加知识库内容4. 实现公网访问Wiki.js5. 固定Wiki.js公网地址 不管是在企业中还是在自己的个人知识整理上&#xff0c;我们都需要通过某种方式来有条理的组织相应的知识架构&#xff0c;那么一个好的知识整…

适用Java SpringBoot项目的分布式锁

在分布式系统中&#xff0c;常用到分布式锁&#xff0c;它有多中实现方式&#xff0c;如&#xff1a;基于redis&#xff0c;database&#xff0c;zookeeper等。Spring integration组件有这三种服务的分布式锁实现&#xff0c;今天来看看用的比较多的redis和database实现方式。 …

【EI会议征稿通知】2024年第三届生物医学与智能系统国际学术会议(IC-BIS 2024)

2024年第三届生物医学与智能系统国际学术会议&#xff08;IC-BIS 2024&#xff09; 2024 3rd International Conference on Biomedical and Intelligent Systems (IC-BIS 2024) 2024年第三届生物医学与智能系统国际学术会议&#xff08;IC-BIS 2024&#xff09; 将于2024年4月…

为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactive 局限性问题&#xff1a; reactive本身存在一些局限性&#xff0c;可能会在开发过程中引发一些问题。这需要额外的注意力和处理&#xff0c;否则可能对开发造成麻烦。数据类型限制&#xff1a; reactive声明的数据类型仅限于对象&#xff0c;而…

Html零基础入门教程(非常详细)

文章目录 1.认识HTML2.html 框架3.HTML常见标签4.HTML语法特征5.列表 1.认识HTML html是超文本标记语言: 目前最新版本是html5,由w3c(万维网联盟)完成标准制定。 声明文档的类型是html5 超文本标记语言。 HTML &#xff0c;全称“Hyper Text Markup Language&#xff08;超文…

LNMP架构(搭建论坛+博客)

目录 一、LNMP架构概述 1、LNMP架构的概念 2、LNMP架构的优点 二、编译安装nginx软件 1、准备工作 1.1 关闭防火墙 1.2 安装依赖包 1.3 创建运行nginx用户 1.4 压缩包解压 2、编译与安装 3、添加nginx自启动文件 三、编译安装mysql软件 1、准备工作 1.1 安装mysq…

利用R语言进行聚类分析实战(数据+代码+可视化+详细分析)

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

width:100%和width:auto有啥区别

项目中使用了with属性&#xff0c;突然好奇auto 和 100% 的区别&#xff0c;特地搜索实践总结了一下观点 一、 width属性介绍二、 代码带入三、 分析比较四、 总结 一、 width属性介绍 width 属性用于设置元素的宽度。width 默认设置内容区域的宽度&#xff0c;但如果 box-siz…