摘要

本文章是关于UGUI组件Slider的学习和总结
为了更好的学习，将从“自制模仿”的角度去分析该组件，并在最后自制一个简易的Slider作为结尾。

Slider基本要素

作为滑杆，它的主要特点在于滑动。因此它必然有一个支持拖拽的控件，并且拖拽是受到规则限制的，不能随意拖拽的。
从视效上看，滑杆必须能体现当前的滑动量，因此需要有一个支持动态改变长度的图片。
而从实际功能上看，它还要能表示当前的滑动幅度值。Slider和Toggle不同，Toggle是表现二元值的控件。而Slider则是可以表现连续值的控件。如果把完全关闭设置为0，完全开启设置为1，那么Slider没有滑动时为0，滑动过程中值从0到1渐变。

UGUI之Slider

Unity预设Slider组成分析

以上是Slider的展开图。通过观察可以得知，Slider，FillArea，HandleSliderArea是不参与图形渲染的组件，其中FillArea和HandleSliderArea的主要目的是在于Rectransform的自适应设置
Background是Slider的底部图片，而Fill则是用于表现滑动幅度的图片。Handle则是参与拖拽事件的图片
从实际交互体验来看，拖动滑动柄时，滑动柄和填充图片是通过改变拉伸方案以及设置锚点Anchor来实现移动的

Inspector窗口参数

简单观察可知我们可以把参数分成上下两部分，上半部分是与Button相同的参数，下半部分则是Slider特有的参数
查看上半部分target Graphic可知其渲染的对象是Handle，即实现拖拽交互的UI。因此该UI具有和Button相同的视效表现。
查看下半部分FillRect和HandleRect两个参数，它们都是Rect Transform类型，这两个参数主要在于控制指定UI，在交互过程中RectTransform的变化。
Direction则是设置交互的方式
MinValue和MaxValue则是设置在完全没有滑动时的值与滑动到底时的值
Whole Numbers是一个布尔值，它表示值是否为整数值，如果它为true那么下方的value只能表现为整数。如果与此同时min为0。max为1，那么value就会变成0/1二元值
value会根据滑动幅度以及上方三个参数的设置进行动态变化，该值可以被外界捕获

Slider常用成员

value：浮点型属性，可以获取当前值或设置新值，其中设置新值后UI滑动表现也会跟着改变
onValueChange：委托，可以添加事件监听，其中必须带有浮点型参数作为value的输入

自制Slider

仔细观察Slider的交互过程，可以发现填充图片和拖拽杆的移动是通过不断更新锚点并保持anchorPosition来实现的。具体过程比较复杂。我们则采用更为简单的方式：修改长度和横坐标（这意味着不做多样的拖拽布局如从上到下的滑杆等）
我们知道Slider只有父物体拥有Slider组件来实现包括拖拽在内的各种交互行为。而滑杆等都是没有特殊设置的存粹的图片。这说明它的内在实现重写了底层的射线检测逻辑。这里我们则利用射线检测可以穿透父物体的特点，将包括父物体在内的不需要接收射线检测的UI的Raycast Target设置为false，只保证只有滑杆能被检测到，这样就能使得仅滑杆能够表现出Button的交互视效，并为拖拽功能提供支持。
因为Slider涉及到较为复杂的RectTransform的知识点，因此这里仅给出部分实现。

public class CSlider : MonoBehaviour, IPointerEnterHandler, IPointerUpHandler, IPointerExitHandler, IPointerDownHandler, IPointerClickHandler,IDragHandler{#region Inspector Setting[SerializeField] private bool interactivable;[SerializeField] private Image targetImage;[SerializeField] private Text targetText;[SerializeField] private Color normalColor;[SerializeField] private Color highlightColor;[SerializeField] private Color pressedColor;[SerializeField] private Color selectColor;[SerializeField] private Color disableColor;[SerializeField] private RectTransform fillRect;[SerializeField] private RectTransform handleRect;[SerializeField] private float minValue;[SerializeField] private float maxValue;[SerializeField] private bool wholeNumebrs;[SerializeField] private float value;#endregion#region callBack Methodsprivate void Awake(){if (interactivable){if (targetImage != null)targetImage.color = normalColor;if (targetText != null)targetText.color = normalColor;}else{if (targetImage != null)targetImage.color = disableColor;if (targetText != null)targetText.color = disableColor;}}//聚焦public void OnPointerEnter(PointerEventData eventData){if (!Interactivable) return;//聚焦时，颜色变为高亮色if (targetImage != null)targetImage.color = highlightColor;if (targetText != null)targetText.color = highlightColor;}//失焦public void OnPointerExit(PointerEventData eventData){if (!Interactivable) return;if (targetImage != null)targetImage.color = normalColor;if (targetText != null)targetText.color = normalColor;}//点下public void OnPointerDown(PointerEventData eventData){if (!Interactivable) return;if (targetImage != null)targetImage.color = pressedColor;if (targetText != null)targetText.color = pressedColor;}//释放public void OnPointerUp(PointerEventData eventData){if (!Interactivable) return;if (targetImage != null)targetImage.color = selectColor;if (targetText != null)targetText.color = selectColor;}//点击public void OnPointerClick(PointerEventData eventData){onClickEvent?.Invoke(value);}public void OnDrag(PointerEventData eventData){//更新滑杆的位置//计算当前滑杆占比//根据占比设置新的value值//更新填充物的长度以及位置}#endregion#region code read-in references//点击委托public Action<float> onClickEvent { set; get; }//是否可交互public bool Interactivable { set => interactivable = value; get => interactivable; }//控制的渲染对象public Image TargetImage { set => targetImage = value; get => targetImage; }public Text TargetText { set => targetText = value; get => targetText; }//普通状态的颜色public Color NormalColor { set => normalColor = value; get => normalColor; }//聚焦状态的颜色public Color HighlightColor { set => highlightColor = value; get => highlightColor; }//点击状态的颜色public Color PressedColor { set => pressedColor = value; get => pressedColor; }//选中状态的颜色public Color SelectColor { set => selectColor = value; get => selectColor; }//禁用状态的颜色public Color DisableColor { set => disableColor = value; get => disableColor; }public RectTransform FillRect { set => fillRect = value; get => fillRect; }public RectTransform HandleRect { set => handleRect = value; get => handleRect; }public float MinValue { set => minValue = value; get => minValue; }public float MaxValue { set => maxValue = value; get => maxValue; }#endregion}

【UI界面开发】基本组件——滑杆相关推荐

【UI界面开发】基本组件概述
文章目录摘要基本交互方式基本交互内容指针信号按键信号摘要 UI界面开发离不开各种UI组件的组合以及相互配合,实现需求.而各种各样的UI组件都有它们的共同特点. 本文将总结UI组件的基本特点 ...
MFC识别XBox游戏手柄，并进行UI界面开发
一.效果展示直接上效果图: 二.利用XInput实现获取XBox游戏手柄数据在网上搜寻了很久,发现方法可以对游戏手柄进行测试,但是MFC版本以及完全版的很少有比较完全的资料,因此作为新手的我,正在 ...
QT学习开发笔记（项目实战之智能家居物联 UI 界面开发）
智能家居物联 UI 界面开发项目路径为 4/01_smarthome/01_smarthome/01_smarthome.pro,先看项目界面.项目界面如下,采用暗黑主题设计,结合黄色作为亮色,让 ...
安卓开发——UI界面开发
功能说明开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 页面顶部为页面标题页面底部为导航栏页面中部为内容展示界面开发技术 layout xml,控件,监听,fragm ...
【UI界面开发】基本组件——按钮
文章目录摘要 Button基本要素 UGUI之Button 自定义Button 利用鼠标接口自定义的键盘操作摘要本章就Button组件的一些知识进行总结.除了总结Unity自带的Button组 ...
HarmonyOS开发详解（四）——鸿蒙Page Ability功能及UI界面开发详解
HarmonyOS里面的界面通过Page Ability和Java UI一起来实现:讲述Page Ability就离不开Ability.在HarmonyOS里面把各种具备的能力进行抽象,叫做Abili ...
从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
工作中的UI界面开发的知识点1
1.//字符串转枚举 SceneType type = (SceneType)Enum.Parse(typeof(SceneType), sceneName); 2.鼠标移动图片 RectTransf ...
QT5.12 Ui界面开发项目：QOpenGLShaderProgram::uniformLocation(model): shader program is not linked
1. 版本介绍: (1)QT版本:QT5.12 +QT Creator 4.8 (2)编译器版本:windows msvc2017 32bit / 64bit 2. 问题描述: QOpenGLShad ...

【UI界面开发】基本组件——滑杆

文章目录

摘要

Slider基本要素

UGUI之Slider

Unity预设Slider组成分析

Inspector窗口参数

Slider常用成员

自制Slider

【UI界面开发】基本组件——滑杆相关推荐

最新文章

热门文章