参考
【Unity3D-UGUI系列】（六）Panel 容器组件详解
【Unity3D-UGUI系列】（十）Slider 滑动条组件详解
【Unity3D-UGUI系列】（九）Scrollbar 滚动条组件详解
【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解
一、Panel
Panel 容器组件又叫面板组件，实际上就是一个容器，在其中可以放置其他的UI元素。
当移动这个容器组件的时候，这个容器中的其他UI元素也会跟着移动，这样可以方便的做一些屏幕自适应的调整，或者一组UI元素进行统一的调整。使用Panel容器组件可以使整个UI结构更加清晰，可以容器里面嵌套容器。
Panel容器只有一个Image组件。这个组件很简单，就是其他UI元素的容器。这个组件的Image可以作为这个容器中的UI元素的整体的背景。
二、Slider
Slider是一个滑动条组件，一般用来制作血条或者进度条。
Slider和Scrollbar都是滑动条组件，那么他们直接有啥区别呢：
- Slider更偏向于用来改变一个数值，比如说血条、进度条，或者改变声音的大小等。
- Scrollbar则是改变目标比例的组件，是一个百分比0-100%，例如改变滚动视野的显示区域。
image.png
- Background 背景图
- Fill Area 填充区域
- Fill 填充对象
- Handle Slider Area 滑动条滑动区域
- Handle 滑动条
Slider slider;
void Start()
{
slider = transform.Find("Slider").GetComponent<Slider>();
slider.onValueChanged.AddListener(OnValueChanged);
}
void OnValueChanged(float value) {
Debug.Log("当前滑动条的进度:"+slider.value);
}
三、ScrollBar
image.png
- Sliding Area 滑动条的滑动区域。
- Handle 滑动条
四、ScrollView
ScrollView 滚动视图组件是一个滚动显示内容的组件，比如说要显示背包、商城这种有大量物品时，可以用ScrollView 滚动视图组件做滚动显示。其他的像是滚动表格、长篇内容显示等，可以用ScrollView做很好的处理。
1.简单示例
image.png
image.png
其中，ScrollRectPanel指定背景是绿色，宽高为200*300,并且加个Mask，宽高范围外的不作显示；上面的ScrollRect组件只选Vertical，表示竖向拖动。
image.png
GridLayoutPanel指定背景是红色，宽高为200*400，也就是更高一些。在ScrollRectPanel不勾选Mask组件时，拖动GridLayoutPanel能看到红色的移动轨迹。
2.组件属性介绍
- Content 滚动的内容区域。其中所有子物体，都会显示在滚动内容区中
- Horizontal 是否启动水平滚动
- Vertical 是否启动垂直滚动
- Movement Type 滑动框的弹性模式，有 Unrestricted不受限，Elastic 弹性，Clamped 夹紧三种模式
- Elasticity Elastic弹性模式中的反弹量，在其他弹性模式没有这个参数
- Inertia 惯性，拖动结束后会根据惯性继续移动，未设置时尽在拖动时移动
- Deceleration Rate 减速率，决定停止移动的速度，速率为0时立即停止运动，1时永不停止
- Scroll Sensitivity 灵敏度，滚轮时的灵敏程度
- Viewport 视口，是 Content 的父物体
- Horizontal Scrollbar 底部的水平滚动条
- Visibility 能见度，如果显示的内容没有超出 Viewport 的话自动隐藏，也可以选择展开视口
- Spacing 选择自动隐藏并展开视口时，滚动条和视口之间的空间
- Vertical Scrollbar 竖直滚动条
3.Movement Type
设置Unrestricted不受限弹性模式时，拖动结束后松开滚动框，它会根据惯性做减速运行，直到速度为0，并且这个拖动范围不受限制，可能会拖出到视口外面的情况，通常不建议采用这种模式。
选择Elastic弹性模式，拖动结束后松开滚动框，会根据弹性变量来进行回弹。拖动范围受到限制，拖动超过范围后会有回弹的效果。
Clamped夹紧模式，就跟我们平时拖动的操作感觉差不多了，无论是拖到最上面还是最下面都不会有任何动作了。还带有范围控制，不能拖到视口外了。
4.滚动条Visibility
image.png
- permanent 永久显示，选择后滚动条将会一直显示
- Auto Hide 自动隐藏，只有在 Content 不超出 Viewport 的范围的情况下才会隐藏
- Auto Hide And Expand Viewport 自动隐藏，并扩展视口
- Spacing 在Auto Hide And Expand Viewport模式生效，拖动一下数值就知道干啥的了，是内容与滚动条的间距
5.ScrollView 滚动视图监听事件
ScrollView 滚动视图的监听事件返回值是一个Vector2的值。所以，我们也需要定义一个带有Vector2参数的函数。比如说，我们需要知道ScrollView是否被拖动，以及是否拖动到顶部或者尾部，就可以使用下面的代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ScrollViewTest : MonoBehaviour
{
private ScrollRect m_ScrollView;
void Start()
{
m_ScrollView = GameObject.Find("ScrollRectPanel").GetComponent<ScrollRect>();
m_ScrollView.onValueChanged.AddListener(ScrollValueChange);
}
private void ScrollValueChange(Vector2 ve2)
{
Debug.Log("正在拖动滚动框" + ve2.ToString());
if (ve2 == new Vector2(1, 1))
{
Debug.Log("滚动框在顶部");
}
if (ve2 == new Vector2(0, 0))
{
Debug.Log("滚动框在尾部");
}
}
}
网友评论