Unity中如何实现一个简配版滑动条？

最新推荐文章于 2025-04-23 10:32:47 发布

小迷糊zzz

最新推荐文章于 2025-04-23 10:32:47 发布

阅读量648

点赞数 10

分类专栏： UGUI 文章标签： unity 游戏引擎

本文链接：https://blog.csdn.net/qq_45370509/article/details/144250909

版权

UGUI 专栏收录该内容

4 篇文章

订阅专栏

一、制作滑动条的步骤

创建一个UI对象SliderTest，删除这个对象上的其余组件，仅需要RectTransform组件，这个物体用来定义整个滑动条的大小，再绑定上后面写的一个脚本SlideerTest
在SliderTest下创建一个Image对象命名为Background，这个是用来设置滑动条下面那张图的背景，这个对象的矩形区域锚点最小值是(0,0)，锚点最大值是(1,1)。
在SliderTest对象下再创建一个Image对象命名为FillArea，这个对象是用来设置滑动条的填充区域，锚点最小值设置为(0,0)，最大值设置为(0,1)
在SliderTest对象下再创建一个Image对象Handler，这个这些用来显示滑动柄，锚点最小值设置为(0,0.5)，最大值设置为(0,0.5)
编写脚本，设置脚本参数

using UnityEngine;
using UnityEngine.EventSystems;
public class SliderTest : MonoBehaviour, IDragHandler
{
    /// <summary>填充区域</summary>
    public RectTransform fillArea;
    /// <summary>滑动柄</summary>
    public RectTransform handler;
    /// <summary>滑动最小值</summary>
    public float minFillNumber;
    /// <summary>滑动最大值</summary>
    public float maxFillNumber;
    /// <summary>整个滑动条的宽度</summary>
    private float totalWidth;
    /// <summary>当前滑动值</summary>
    private float value;

    private void Start()
    {
        totalWidth = (transform as RectTransform).sizeDelta.x;
        value = minFillNumber;
        ChangeManifestation(value);
    }

    public void OnDrag(PointerEventData eventData)
    {
        float offset = eventData.delta.x / totalWidth;
        float targetValue = value + offset;
        if (targetValue >= maxFillNumber) value = maxFillNumber;
        else if (targetValue <= minFillNumber) value = minFillNumber;
        else value = targetValue;
        ChangeManifestation(value);
    }

    private void ChangeManifestation(float target)
    {
        fillArea.anchorMax = new Vector2(target, 1);
        handler.anchoredPosition = new Vector2(target * totalWidth, handler.anchoredPosition.y);
    }
}

主要是应用到UGUI布局和拖拽的相关知识点

视频效果：

自制滑动条效果