在许多应用程序和游戏中,年份选择是一个常见的需求。无论是在日历应用程序中查看事件,还是在历史类游戏中选择时间段,年份选择器都是用户体验的重要组成部分,下面实现一个简易的年份选择器。
一、效果预览:
目录
一、效果预览:
二、步骤
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开发中实现年份选择器有所帮助,为其未来的项目开发提供有益的指导和参考。