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

news2025/4/22 12:24:17

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

一、效果预览：

一、效果预览：

二、步骤

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的RectTransform
    
    
    private 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上，并将相应物体拖入。