Unity UI系统（2）

9月 10 2022

| 下拉组件

小演示：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class L5_10Demo : MonoBehaviour
{
    private Dropdown dropdown;
    void Start()
    {
        dropdown = GetComponent<Dropdown>();
        dropdown.onValueChanged.AddListener(DropdownOnValueChanged);
    }
    void DropdownOnValueChanged(int value)
    {
        Debug.Log(value);
    }
}

Scroll View 组件

| 遮罩组件

加一个 Mask 即可

| 滚动视图组件

小演示：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class L5_11Demo : MonoBehaviour
{

    private ScrollRect scrollRect;

    void Start()
    {
        scrollRect = GetComponent<ScrollRect>();
        scrollRect.onValueChanged.AddListener(ScrollRectOnValueChanged);
    }

    void ScrollRectOnValueChanged(Vector2 value)
    {
        Debug.Log(value);
    }
}

表格布局组件

| 使用

类似背包这种想要排列整齐的时候，一般就会使用 Grid Layout Group 表格布局组件，会自动管理其下方所在其他 UI元素的大小、位置等信息，在层级面板中右键中并没有表格布局组件

要先创建一个空的游戏物体 –》手动添加 Grid Layout Group

| 主要属性

Padding：整个表格的边距
Cell Size：成员的尺寸
Spacing：成员的间距
Start Coener：行 / 列第一个成员从什么位置开始
Start Axis：横着开始还是竖着开始
Child Alignment：子对象对齐，如果布局元素未填满所有可用空间，则应用这个对齐方式
Constraint：将表格限制为固定数量的行或列

UI 布局

| RectTransform 常用属性

POS：UI 游戏物体的 X、Y、Z坐标，但是 Z轴很少使用
Width Height：UI 游戏物体的宽和高
Anchors： 锚点，可以让游戏物体相对于父物体来定位
Pivot：中心的，0 ~ 1
Rotation：旋转
Scale：缩放

| 锚点定位

1.相对父物体什么位置进行定位 2.相对父物体进行怎样的弹性拉伸

Canvas 画布

| 画布

UI 的根节点就是 Canvas，意味着 UI 游戏物体都要放在 Canvas 下，才可以得到正确的显示

一个场景中 Canvas 可以存在多个，并且可以同时生效

Canvas 游戏物体由三个组件组成：

Canvas：画布
Canvas Scaler：画布比例
Graphic Raycaster：射线检测

| 相关组件

Render Mode： 渲染模式

Screen Space-Overlay 模式：Canvas 将置于屏幕最上层，自动填充屏幕，不会被其他模式的Canvas或 2D / 3D 物体遮挡
Screen Space-Camera 模式：Canvas 将置于相机前方，此时在 Canvas 和相机中间的2D / 3D 物体将显示在 UI 上面，利用这一点，可以实现在 UI 界面展示 3D 模型
- Render Camera：对应的渲染相机，也就是该 Canvas 显示在哪个 Camera 前面
- Plane Distance：Canvas 与 Camera 的距离
World Space 模式：Canvas 将作为一个游戏对象显示在 3D 场景内
- Event Camera：接收 UI 事件的 Camera
Pixel Pefect：安美像素，边缘更加清晰
Sort Order：画布排序，场景中具备多个 Canvas 时才有意义
Canvas Scaler 也是屏幕适配的主要方式，一般通过该组件就可以完成适配

UI Scaler Mode 缩放模式：

Constant Pixel Size 模式：固定像素大小，不论屏幕分辨率尺寸大小如何变化，像素保持原有大小不变
- Scale Factor：缩放倍数
Scale With Screen Size 模式：屏幕自适应常用方式
- Reference Resolution：参考分辨率，进行屏幕适配，自动缩放 UI 大小时，将以此作为参考

UI 事件

| 事件介绍

按钮点击就是事件，但不止点击这一种，比如鼠标悬浮、鼠标按下、鼠标弹起、鼠标拖拽等等。UI本身也并不是一个按钮，要通过给游戏物体创建脚本来实现

| 事件接口

脚本中添加 using UnityEngine.EventSystems; 事件相关命名空间

脚本需要继承事件接口，并实现对应方法即可

如下：

IPointerClickHandler ：鼠标点击
IPointerDownHandler ：鼠标按下
IPointerUpHandler ：鼠标弹起
IPointerEnterHandler ：鼠标进入
IPointerExitHandler ：鼠标退出
IBeginDragHandler ：开始拖拽
IDragHandler ：拖拽中
IEndDragHandler ：停止拖拽

L5_15Demo：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class L5_15Demo : MonoBehaviour,IPointerClickHandler,IPointerDownHandler,IPointerUpHandler,IPointerEnterHandler,IPointerExitHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        Debug.Log("OnPointerClick");
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        Debug.Log("OnPointerDown");
    }
    public void OnPointerUp(PointerEventData eventData)
    {
        Debug.Log("OnPointerUp");
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        Debug.Log("OnPointerEnter");
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        Debug.Log("OnPointerExit");
    }
}

L5_15Demo2：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class L5_15Demo2 : MonoBehaviour,IBeginDragHandler, IDragHandler, IEndDragHandler
{
    public void OnBeginDrag(PointerEventData eventData)
    {
        Debug.Log("OnBeginDrag");
    }

    public void OnDrag(PointerEventData eventData)
    {
        Debug.Log("OnDrag");
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Debug.Log("OnEndDrag");
    }
}

👾森木清树👾

Unity Study