初识UGUI

Name	功能
Canvas	画布
Canvas Scaler	画布缩放
Graphic Raycaster	图形射线检测
RectTransform	矩形变换组件
Image,RawImage	图片
Button	按钮
Dropdown	下拉列表
Slider	滑动条
Scrollbar	滚动条
Scroll Rect	滚动视图
Toggle	开关
Toggle Group	开关组
Text	文本
InputField	输入框
Shadow.Outline	阴影，轮廓
Mask。RectMask2D	遮罩
Canvas Group	画布组
Vertical Layout Group、Horizontal Layout Group	垂直和水平布局
Grid Layout Group	网格布局
Layout Element	布局元素
Content Size Fitter	内容尺寸适配
Aspect Ratio Fitter	按比例适配
DefaultControls	创建内置 UI 控件

Canvas

描述

可用于屏幕渲染的元素。
画布上的元素在场景渲染之后渲染（从附加的摄像机或使用覆盖模式）。

RenderMode

ScreenSpaceOverlay	使用 2D Canvas 在场景末端渲染
应用场景	一般情况下都是使用该模式渲染
Pixel Perfect	强制画布中的元素按像素对齐。仅在 renderMode 为屏幕空间时适用启用 pixelPerfect 可使元素看起来更清晰，避免出现模糊。但是，如果许多元素被缩放或旋转过，或者使用了微妙的动画位置或缩放，则禁用 pixelPerfect 可能比较好，这样可使移动更为平滑
Sort Order	排序图层中的画布顺序,值大的会覆盖值小的
Target Display	用于覆盖模式，将显示 UI 画布的显示索引。 该设置指示画布渲染到指定的显示中。 支持的最大辅助显示（例如显示器）数量为 8。

ScreenSpaceCamera	使用在 Canvas 上配置的 Camera 渲染
应用场景	当物体需要在UI前的时候使用
Render Camera	指定渲染画布的摄像机
Plane Distancse	画布距离
Sorting Layer	画布在排序层中的顺序
Order in Layer	当前排序层中的渲染顺序，值越大越靠前

WorldSpace	使用场景中可渲染该层的任意 Camera 渲染。
应用场景	当仅调整层级已无法满足需求时使用
Event Camera	处理UI事件的相机

Additional Shader Channels

获取或设置要在创建 Canvas 网格时使用的附加着色器通道的遮罩

Name	说明
None	不需要其他着色器参数
TexCoord1	在网格顶点上包含UV1
TexCoord2	在网格顶点上包含UV2
TexCoord3	在网格顶点上包含UV3
Normal	在网格顶点上包含法线
Tangent	在网格顶点上包含切线

需要关注的变量或方法

Name	说明
scaleFactor	用于缩放整个画布，同时仍使其适合屏幕。仅在 renderMode 为屏幕空间时适用
ForceUpdateCanvases	强制所有画布更新其内容 依赖于最新布局或内容的代码可以调用该方法，以确保它在依赖它的代码前执行
willRenderCanvases	在即将开始 Canvas 渲染前调用的事件

内联Canvas

在Canvas 里面添加的 Canvas 组件
一般用于弹出之类的。例如 Dropdown 组件 点击之后需要弹出选择框

Name	说明
Pixel Pefect	继承 Root Canvas 的 Pixel Perfect 或 打开 或 关闭
Override Sorting	是否 覆盖画布的排序
Sort Order	渲染顺序

注意：
当使用内联 Canvas 的时候需要添加 Graphic Raycaster 组件

Canvas Scaler

描述

用于控制画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容，包括字体大小和图像边框。
用于自适应UI布局

UI Scale Mode

Constant Pixel Size	不管屏幕尺寸如何变化，UI元素保持固定缩放系数
Scale Factor	按此系数缩放画布中的所有 UI 元素。

Scale With Screen Size	根据Screen Match Mode设置对设计分辨率进行缩放
referenceResolution	UI布局设计使用的分辨率
Screen Match Mode	在当前分辨率的宽高比不适应参考分辨率时，用于缩放画布区域的模式。
Match	缩放权重

Scale With Screen Size	说明
Match Width Or Height	匹配宽度或高度
Expand	水平或垂直扩展画布
Shrink	水平或垂直裁剪画布

Constant Physical Size	UI元素始终保持相同的物理尺寸
Physical Unit	用于指定位置和大小的物理单位
Fallback Screen DPI	在屏幕 DPI 未知时采用的 DPI
Default Sprite DPI	用于 Sprite 的每英寸像素，使其“Pixels Per Unit”设置与“Reference Pixels Per Unit”设置匹配。

Reference Pixels Per Unit

默认创建的Cube 为 1X1单位 当Sprite 设置了 Pixels Per Unit = 100 后
该图将会以 1单位 100 像素 的方式绘制

UI的绘制图像绘制将会以 1单位 pixelsPerUnit 像素 的方式绘制
pixelsPerUnit = spritePixelsPerUnit / referencePixelsPerUnit

小知识

假设设计分辨率为 720 X1280 当选择 Scale With Screen Size
并且 Screen Match Mode 选择 Match Width Or Height
match 应该为0
反过来当设计分辨率为1280 X 720 match 就应该为1
权重向小的数值设置，可确保UI不会超出屏幕外

Graphic Raycaster

描述

用于对 Graphic 元素进行射线投射的 BaseRaycaster

ignoreReversedGraphics

是否应考虑背对射线投射器的图形。
当UI旋转到背面的时候，如果值为真，射线是有效的

blockingObjects

将阻挡图形射线投射的对象的类型。

Name	说明
None	没有对象可以阻挡射线
Two D	当射线投射到具有2D Collider的对象上时，Collider将会阻挡射线穿透
Three D	当射线投射到具有3D Collider的对象上时，Collider将会阻挡射线穿透
All	当射线投射到具有Collider的对象上时，Collider将会阻挡射线穿透

假如UI前有一个Sprite 并且 拥有 Box Collider 2D
Sprite 后面有一个Button
此时选择 blockingObjects 为 Two D 或 All
点击 Sprite 后，Button 并不会响应

Blocking Mask

将阻挡图形射线投射的层
没有勾选的层将会忽略

RectTransform

描述

矩形的位置、大小、锚点和轴心信息。
RectTransforms 用于 GUI，不过也可以用于其他情况。 它用于存储和操作矩形的位置、大小和锚定，并支持各种形式的缩放（基于父 RectTransform）。

rect

返回本地空间中计算的矩形，该属性为只读属性
x = pivot.x X -width
y = pivot.y X -height

Anchor （描点）

anchorMin： 父 RectTransform 中左下角锚定到的标准化位置
anchorMax： 父 RectTransform 中右上角锚定到的标准化位置
unity 包含一些预设的值

当按住 Alt 键 点击这些预设的时候将会 重新设置RectTransform的坐标以及大小

pivot

此 RectTransform 中围绕其旋转的标准化位置

当 Canvas 的RenderMode 非 ScreenSpaceOverlay 时
旋转 RectTransform 将会得到一个从视觉上为 3D 模式的UI
并且在屏幕空间中射线检测将不再是矩形
可方便做一些特殊形状的检测，美术也不需要绘制3D视图的UI

在上图情况下，射线检测形状将会是左边粉色区域
注意：
在已旋转的情况下对pivot再设置得到的
实际距离为 移动距离 投影到已旋转角度面上的距离
当然 Unity 也为我们预设了一些值，打开Anchor Presets
按住 shift 键 点击 这些预设将会 重新设置 pivot 以及 RectTransform的坐标以和大小

offset

offsetMin = 矩形左下角相对于左下锚点的偏移
offsetMax = 矩形右上角相对于右上锚点的偏移

anchoredPosition

此 RectTransform 的轴心相对于锚点参考点的位置。
锚定位置是考虑锚点参考点的 RectTransform 轴心位置。 锚点参考点是锚点的位置。如果锚点不在一起，则 Unity 会使用轴心位置作为参考来估算四个锚点位置。

anchoredPosition计算方式

        var rt = GetComponent();
        var parent = rt.parent as RectTransform;
        var anchor = (rt.anchorMax - rt.anchorMin) * rt.pivot;
        var anchorMin = parent.rect.size * rt.anchorMin;
        var anchorStartPos = parent.rect.size * anchor;
        var pivotPos = anchorMin + rt.offsetMin + rt.rect.size * rt.pivot;
        var anchoredPosition = anchorStartPos - pivotPos + anchorMin;
        rt.anchoredPosition = -anchoredPosition;

使用一个 Anchors 和 pivot 都是 0 的 Image 观察坐标计算

    void ShowAnchoredPosition(Vector2 pos,Vector2 pivotPos)
    {
        anchoredPositionImg.sizeDelta = new Vector2( Mathf.Abs(pos.x),Mathf.Abs(pos.y));
        if (pos.x > 0)pos.x = 0;
        if (pos.y > 0) pos.y = 0;
        anchoredPositionImg.anchoredPosition = pivotPos + pos;
    }

需要关注的变量或方法

Name	说明
SetInsetAndSizeFromParentEdge	设置此矩形相对于父矩形指定边缘的距离，同时也会设置其大小 调用此方法可同时设置锚点 anchoredPosition 和 sizeDelta，不过只会设置水平或垂直分量（具体取决于为内嵌指定的边缘）
SetSizeWithCurrentAnchors	使 RectTransform 计算的矩形在指定轴上具有给定大小 此方法可使用当前锚定生成给定大小。如果父 RectTransform 更改大小，则矩形的大小可能会更改。如果打算保持大小，则 RectTransform 锚点应设置为不拉伸，或是每当父大小更改时都再次调用此方法

Image,RawImage

RawImage	当图像不需要过多交互的时候使用该组件
Texture	需要显示的图像纹理
Color	叠加的颜色
Raycast Target	是否可以被射线检测到
Set Native Size	设置RectTransform的Size为图像大小
UV Rect	uv偏移

Image	unity
Source Image	纹理格式为Sprite的图片资源
Image Type	图像显示类型

ImageType

Simple	整张图像完整显示，根据边框大小拉伸
Preserve Aspect	无论图片的外形放大还是缩小，都会一直保持初始的长宽比例
Use Sprite Mesh	使用图片网格接受射线检测

Sliced	如果图片裁切过，根据图片边框拉伸，中心不变，图片的四个角会保持原状
Fill Center	是否显示填充中心

Filled	如果图片裁切过，四个角将会保持原状，中心平铺
Fill Center	是否显示平铺中心

Filled	根据填充方式、填充起点、填充比例决定图片显示哪一部分
Fill Method	填充方法
Fill Origin	填充起点
Fill Amount	填充比例

动态加载图片

    public Image image;
    void Start()
    {
        image = GetComponent();
        image.sprite = Resources.Load("img");
        image.SetNativeSize();
    }

异步加载图片

    IEnumerator LoadSprite(string imgName,Action action)
    {
        var request = Resources.LoadAsync(imgName);
        yield return request;
        if(request.asset==null)
        {
            Debug.Log($"Failed to load picture {imgName}");
            yield break;
        }
        action.Invoke(request.asset as Sprite);
    }

Button

描述

标准按钮，可通过单击来触发事件

Interactable

用于启用或禁用对可选择 UI 元素进行选择的功能

transition

过渡的类型，当状态更改时将应用于 targetGraphic。

Color Tint	根据其所处的状态更改按钮的颜色
Target Graphic	目标图形
Normal Color	默认状态下的颜色
Highlighted Color	突出显示时的颜色
Pressed Color	按下控件时的颜色
Disabled Color	禁用时控件的颜色
Color Multiplier	颜色乘以当前值，一般用于提亮颜色
Fade Duration	颜色过度持续时间(秒为单位)

Sprite Swap
Target Graphic	目标图形
Highlighted Sprite	突出显示的精灵
Pressed Sprite	按下时显示的精灵
Disabled Sprite	禁用时显示得精灵

Animation
Normal Trigger	普通状态动画
Highlighted Trigger	突出显示时的动画
Pressed Trigger	按下时显示的动画
Disabled Trigger	禁用时显示的动画

添加单击事件

        var button = GetComponent();
        button.onClick.AddListener(() => {
            Debug.Log("按下了按钮");
        });

        button.onClick.AddListener(OnButton);
        void OnButton()
        {
            Debug.Log("按下了按钮");
        }

Dropdown

描述

标准下拉列表，在单击时提供选项列表，可以选择其中一个选项。
下拉列表组件是 Selectable。选择某个选项时，控件的标签和/或图像会更改，以显示所选选项。
当下拉列表事件发生时，会向 onValueChanged 的所有注册监听器发送一个回调。

Name	说明
Transition	参考Interactable
Template	下拉列表的模板的矩形变换
Caption Text	用于保存当前所选选项的文本的 Text 组件
Caption Image	用于保存当前所选选项的图像的 Image 组件
Item Text	用于保存列表项的文本的 Text 组件
Item Image	用于保存列表项的图像的 Image 组件
value	该值是 Dropdown 中当前选择内容的索引号。0 代表 Dropdown 中的第一个选项，1 代表第二个，依此类推

需要关注的变量或方法

Name	说明
AddOptions	基于 OptionData 对象的列表将多个选项添加到 Dropdown 的选项
ClearOptions	清除 Dropdown 中的选项列表
Hide	隐藏下拉列表
Show	显示下拉列表

添加事件

        var dropdown = GetComponent();
        dropdown.onValueChanged.AddListener(index => {
            StringBuilder stringBuilder = new StringBuilder();
            stringBuilder.AppendLine($"选中 {index}");
            var option = dropdown.options[index];
            if (string.IsNullOrEmpty(option.text))
            {
                stringBuilder.AppendLine($"text:{option.text}");
            }
            if(option.image!=null)
            {
                stringBuilder.AppendLine($"image Name:{option.image.name}");
            }
            Debug.Log(stringBuilder.ToString());
        });

Slider

描述

标准滑动条，可在最小和最大值之间移动。
滑动条组件是一个 Selectable，它对填充、手柄或两者进行控制。填充（使用时）从最小值跨越到当前值，而手柄（使用时）遵循当前值。
填充和手柄 RectTransform 的锚点是由 Slider 驱动的。可以使用 Slider 将填充和手柄定向到 GameObject 的子级，也可以在中间放置中间 RectTransform 以进行额外控制。
当滑动条值发生更改时，会向 Slider.onValueChanged 的所有注册监听器发送一个回调。

Name	说明
Transition	参考Interactable
Fill Rect	用作滑动条填充的可选 RectTransform
Handle Rect	用作滑动条手柄的可选 RectTransform
Direction	滑动条的方向，从最小值到最大值
Min Value	滑动条的最小允许值
Max Value	滑动条的最大允许值
Whole Numbers	是否应只允许此值为整数值
value	滑动条的当前值

添加事件

        var slider = GetComponent();
        slider.minValue = 0;
        slider.maxValue = 100;
        slider.wholeNumbers = true;
        var value = slider.value;
        slider.onValueChanged.AddListener(v=> {
            Debug.Log($"old value: {value}");
            Debug.Log($"current value: {v}");
            value = v;
        });

Scrollbar

描述

具有大小可变控制柄的标准滚动条，可在 0 到 1 之间拖动该滚动条。
滑动条组件是一个 Selectable，它控制一个控制柄，该控制柄遵循当前的 value 并根据 size 属性确定大小。
控制柄 RectTransform 的锚点是由 Scrollbar 驱动的。可以使用 Scrollbar 将控制柄定向到 GameObject 的子级，也可以在中间放置中间 RectTransform 以进行额外控制。
当滚动条的值发生更改时，会向 onValueChanged 的所有注册的监听器发送一个回调。

Name	说明
Transition	参考Interactable
Handle Rect	用于控制柄的 RectTransform
Dirction	滚动条的方向，从最小值到最大值
Value	滚动条的当前值，在 0 到 1 之间
Size	滚动条控制柄的大小，其中 1 表示控制柄填充整个滚动条
Number Of Steps

添加事件

        var scrollbar = GetComponent();
        var value = scrollbar.value;
        scrollbar.onValueChanged.AddListener(v=> {
            Debug.Log($"old value: {value}");
            Debug.Log($"current value: {v}");
            value = v;
        });

Scroll Rect

描述

用于使子 RectTransform 滚动的组件。
ScrollRect 将不自行执行任何裁剪。在与 Mask 组件组合后，它可以变为滚动视图。

Name	说明
Content	可以滚动的内容。应为 GameObject 的子项，其中包含 ScrollRect
Horizontal	是否应启用水平滚动
Vertical	是否应启用垂直滚动
Movement Type	在内容移动至滚动矩形之外时使用的行为
Inertia	是否应启用运动惯性
Deceleration Rate	移动减速的速率
Scroll Sensitivity	对滚轮和触控板滚动事件的敏感性,值越大，表示敏感性越高
Viewport	引用作为内容 RectTransform 的父级的视口 RectTransform
Horizontal Scrollbar	可选的 Scrollbar 对象，已链接至 ScrollRect 的水平滚动
Vertical Scrollbar	可选的 Scrollbar 对象，已链接至 ScrollRect 的垂直滚动
Visibility	滚动条的可见性模式
Spacing	滚动条与视口之间的空间

Movement Type	在内容移动至滚动矩形之外时使用的行为
Unrestricted	不受限的移动。始终移动内容
Elastic	弹性移动。允许临时将内容移至容器范围之外，但会将其弹性拉回
Clamped	被限制的移动。不能将内容移至其容器范围之外

Visibility	用于滚动条可见性的行为
Permanent	始终显示滚动条
AutoHide	当此轴不需要滚动时，自动隐藏滚动条。视口矩形将不更改
AutoHideAndExpandViewport	当此轴不需要滚动时，自动隐藏滚动条并扩大视口矩形

一个简陋的滚动列表

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

/// 

/// 使用接口作为数据源，方便日后修改
/// 
public interface IItemData { }
public class ItemData:IItemData
{
    public string title;
}
public class ScrollView
{
    Transform itemTemplate = null;
    ScrollRect scrollRect;
    /// 

    /// 渲染item回调事件
    /// 
    public Action onRenderItem;
    /// 

    /// 数据源列表
    /// 
    public readonly List datas = new List();
    /// 

    /// 用于显示的数据的UI
    /// 
    readonly List items = new List();

    public ScrollView(ScrollRect scrollRect)
    {
        this.scrollRect = scrollRect;
        //以Content下第一个子对象作为模板
        if(scrollRect.content.childCount>0)
        {
            itemTemplate = scrollRect.content.GetChild(0);
            itemTemplate.gameObject.SetActive(false);
        }
    }

    public void OnRender()
    {
        //模板为空说明设置有错无需渲染
        if (itemTemplate == null)
            return;

        //如果渲染对象比数据源少，创建渲染对象
        if (items.Count < datas.Count)
        {
            var count = datas.Count - items.Count;
            while (count-- != 0)
            {
                var go = GameObject.Instantiate(itemTemplate);
                go.SetParent(scrollRect.content);
                items.Add(go);
            }
        }

        for (var index = 0; index < items.Count; index++)
        {
            var active = index < datas.Count;
            items[index].gameObject.SetActive(active);
            if (!active)
                continue;

            //渲染对象
            onRenderItem?.Invoke(items[index],datas[index]);
        }
    }
}
public class Test : MonoBehaviour
{
    ScrollView scrollView;
   
    void Start()
    {
        var scrollRect = GetComponent();
        scrollView = new ScrollView(scrollRect);

        //具体渲染
        scrollView.onRenderItem = (item,itemData) => 
        {
            var data = itemData as ItemData;
            var title =item.GetComponentInChildren();
            title.text = data.title;
        };

        //填充数据
        for(var i=0;i<20;i++)
        {
            scrollView.datas.Add(new ItemData { title = i.ToString() });
        }

        //开始渲染
        scrollView.OnRender();
    }
}

添加事件

        var scrollRect = GetComponent();
        scrollRect.onValueChanged.AddListener(v=> 
        {
            Debug.Log($"scrollbar value:{v}");
        });

Toggle

描述

具有开/关状态的标准开关
Toggle 组件是 Selectable，它控制显示开/关状态的子图形。
当开关事件发生时，会向 Toggle.onValueChanged 的所有注册监听器发送一个回调。

Name	说明
Transition	参考Interactable
isOn	返回或设置 Toggle 是否处于 on 状态
Toggle Transition	开关切换淡入淡出过度
Graphic	受此开关影响的图形
Group	开关所属的组

添加开关事件

        var toggle = GetComponent();
        toggle.onValueChanged.AddListener(value=> {
            Debug.Log($"{toggle.name} 是否打开：{value}");
        });

Toggle Group

描述

一个代表一组 Toggle 的组件

allowSwitchOff

是否允许不打开任何开关?

遍历添加开关事件

        var toggleGroup = GetComponent();
        foreach(var toggle in toggleGroup.ActiveToggles())
        {
            toggle.onValueChanged.AddListener(v=> 
            {
                Debug.Log($"{toggle.name} 是否打开：{v}");
            });
        }

Text

描述

用于向屏幕绘制字体数据的默认 Graphic

Name	说明
Text	此 Text 显示的字符串
Font	文本使用的 Font
Font Style	文本使用的 FontStyle
FontSize	Font 渲染时应使用的大小
LineSpacing	行间距，指定为字体行高的一个因子。值为 1 时将生成标准行间距
Rich Text	此 Text 是否支持富文本
Alignment	文本相对其 RectTransform 的定位
Align By Geometry	使用字形几何形状的范围（而不是字形指标）执行水平对齐
Horizontal Overflow	水平溢出模式
Vertical Overflow	垂直溢出模式
Best Fit	是否允许文本自动调整大小
Color	此 Graphic 的基色
Material	用户设置的 Material

Font Style	文本使用的 FontStyle
Normal	未应用特殊样式
Bold	应用于您的文本的粗体样式
Italic	应用于您的文本的斜体样式
BoldAndItalic	应用于您的文本的粗体和斜体样式

Alignment	文本相对其 RectTransform 的定位
UpperLeft	文本锚定在左上角
UpperCenter	文本锚定在上侧并水平居中
UpperRight	文本锚定在右上角
MiddleLeft	文本锚定在左侧并垂直居中
MiddleCenter	文本水平和垂直居中
MiddleRight	文本锚定在右侧并垂直居中
LowerLeft	文本锚定在左下角
LowerCenter	文本锚定在下侧并水平居中
LowerRight	文本锚定在右下角

Horizontal Overflow	水平溢出模式
Wrap	到达水平边界时，文本将自动换行
Overflow	文本可以超出水平边界

Vertical Overflow	垂直溢出模式
Truncate	到达垂直边界时，将裁剪文本
Overflow	到达垂直边界时，将继续生成文本

Best Fit	是否允许文本自动调整大小
Min Size	最小字体大小
Max Size	最大字体大小

cachedTextGenerator

生成可见 Text 时使用的已缓存的 TextGenerator

code

        var t = GetComponent();
        t.text = "hello world";

InputField

描述

将简单的标签转换为可交互的输入字段。

Name	说明
Transition	参考Interactable
TextComponent	将用于将文本渲染到屏幕的 Text 组件
Text	输入字段的当前值
Character Limit	输入字段可以输入的字符数限制为 0 = 无限
Content Type	指定输入文本内容的类型
Placeholder	这是一个可选的“空”图形，用于表明 InputField 文本字段为空
Caret Blink Rate	输入光标的闪烁率，定义为每秒的闪烁周期发生次数
Caret Width	光标的宽度（以像素为单位）
Custom Caret Color	自定义光标颜色
Selection Color	突出显示的颜色，以显示选择了哪些字符
Hide Mobile Input	应隐藏移动键盘输入
Read Only	将 InputField 设置为只读

ContentType	指定输入文本内容的类型
Standard	允许所有输入
Autocorrected	允许所有输入并在支持它的平台上执行自动校正
IntegerNumber	允许使用整数值（正或负）
DecimalNumber	允许使用小数（正数或负数）
Alphanumeric	允许使用字母 A-Z、a-z 和数字 0-9
Name	InputField 用于输入名称，并且每个单词的首字母强制采用大写形式。请注意，用户可以通过删除自动采用大写形式的字母来规避首字母大写规则
EmailAddress	用于输入电子邮件地址的输入
Password	允许所有输入，并通过将其显示为星号字符来隐藏输入的字符
Pin	允许使用整数，并通过将其显示为星号字符来隐藏输入的字符
Custom	允许用户定义的设置的自定义类型

Line Type	LineType 用于描述 InputField 的行为
SingleLine	只允许输入 1 行。可以水平滚动，但无换行。按 Enter 将提交 InputField
MultiLineSubmit	支持垂直滚动和溢出的多行 InputField。按返回键将提交
MultiLineNewline	支持垂直滚动和溢出的多行 InputField。按返回键将插入换行符

Input Type	输入字段期望的数据类型
Standard	标准移动键盘
AutoCorrect	自动更正移动键盘
Password	密码移动键盘

Keyboard Type	支持的不同触摸屏幕键盘类型枚举
Default	目标平台的默认键盘布局
ASCIICapable	具有标准 ASCII 键的键盘
NumbersAndPunctuation	具有数字和标点符号键的键盘
URL	具有 URL 输入键的键盘
NumberPad	具有标准数字键的键盘
PhonePad	布局适合键入电话号码的键盘
NamePhonePad	具有字母数字键的键盘
EmailAddress	具有适用于键入电子邮件地址的额外键的键盘
Social	具有社交媒体（如 Twitter）上常用的符号键的键盘
Search	除空格键外还有“.”键的键盘，适合键入搜索词

Character Validation	允许添加到字符串的字符类型
None	无验证。任何输入均有效
Integer	允许使用整数值（正或负）
Decimal	允许使用小数（正数或负数）。 允许使用字符 0-9、.（点）和 -（破折号/减号）。只允许将破折号用作第一个字符。字符串中只允许有一个点
Alphanumeric	允许使用字母 A-Z、a-z 和数字 0-9
Name	只允许使用名称并且强制采用大写形式
EmailAddress	允许使用可以在电子邮件地址中使用的字符

添加事件

        var inputField = GetComponent();
        // 按下回车键或者失去焦点
        inputField.onEndEdit.AddListener(v=> {
            Debug.Log($"current value : {v}");
        });

        //字符验证，如果输入的是c 则替换为 q
        inputField.onValidateInput += (str,charIndex,addChar) => {
            if(addChar == 'c')
            {
                addChar = 'q';
            }
            return addChar;
        };

        //每次value被改变时都会触发
        inputField.onValueChanged.AddListener(v=> {
            Debug.Log($"input value : {v}");
        });

Shadow、Outline

Shadow

使用 IVertexModifier 向图形中添加轮廓

Name	说明
effectColor	用于特效的颜色
effectDistance	阴影到图形的距离
useGraphicAlpha	阴影是否应从图形中继承 Alpha

Outline

使用 IVertexModifier 向图形中添加轮廓。
修改生成的顶点，以向同级 Graphic 中添加轮廓。

Name	说明
effectColor	用于特效的颜色
effectDistance	阴影到图形的距离
useGraphicAlpha	阴影是否应从图形中继承 Alpha

Mask、RectMask2D

Mask

用于遮罩子元素的组件。
使用此元素后，对于同级 Graphic 向模板缓冲区写入 0 的位置，已启用遮罩的任何子元素都将进行遮罩。
仅显示图像中 alpha 不为 0 的像素

Show Mask Graphic

显示与遮罩渲染区域关联的图形

RectMask2D

2D 矩形遮罩，可对遮罩外的区域进行裁剪/遮罩。
RectMask2D 的行为方式与 Mask 组件相似。区别在于它有一些限制。
RectMask2D： *仅适用于 2D 平面 *要求遮罩中的元素共面。 *不需要模板缓冲区/额外的绘制调用 *需要较少的绘制调用 *剔除在遮罩区域之外的元素。

demo

图中黄色区域为被遮挡部分，实际运行中不可见

Canvas Group

描述

一种可放置 Canvas 的元素，可用于修改子 Alpha、Raycasting、Enabled 状态。
画布组可用于修改子元素的状态。
随时间推移逐渐消失的窗口就是这样的一个示例。通过修改该组的 Alpha 值，将对子元素产生影响。最终的 Alpha 将是任何嵌套的组与画布元素的 Alpha 相乘的结果。
也可以将画布组配置为不阻止射线投射（在计算图形射线投射时，将忽略该组中的所有内容），以及元素是否可交互。

Name	说明
alpha	设置组的 Alpha
interactable	该组是否可交互（组下的元素是否处于启用状态）
blocksRaycasts	该组是否阻止射线投射（允许碰撞）
ignoreParentGroups	该组是否应忽略父组

Vertical Layout Group、Horizontal Layout Group

Vertical Layout Group

将子布局元素依次向下布局。
VerticalLayoutGroup 组件用于将子布局元素依次向下布局。

Horizontal Layout Group

对子布局元素并排布局。
HorizontalLayoutGroup 组件用于对子布局元素并排布局。

Name	说明
Padding	在子布局元素周围添加的填充
Left	左边距
Right	右边距
Top	上边距
Bottom	下边距
Spacing	要在布局组中的布局元素之间使用的间距
Child Alignment	用于布局组中子布局元素的对齐方式
Child Controls Size	是否控制子项大小
Child Force Expand	是否要强制子项扩展以填充额外的可用空间

Grid Layout Group

描述

在网格中对子布局元素进行布局。
GridLayoutGroup 组件用于均匀网格（所有单元格都大小相同）中对子布局元素进行布局。单元格之间的大小和间距由 GridLayoutGroup 本身控制。子项对其大小没有影响。

Name	说明
Padding	在子布局元素周围添加的填充
Cell Size	要用于网格中的每个单元格的大小
Start Corner	第一个单元格应放置在哪个角上
Start Axis	单元格应首先放置在哪个轴上
Child Alignment	用于布局组中子布局元素的对齐方式
Constraint	要用于 GridLayoutGroup 的约束
Constraint Count	受约束的轴上应存在的单元格数

Corner	矩形中的四个角之一
UpperLeft	左上角
UpperRight	右上角
LowerLeft	左下角
LowerRight	右下角

Axis	可以处于水平或垂直方向的轴
Horizontal	水平
Vertical	垂直

Constraint	列数或行数方面的约束
Flexible	不约束列数或行数
FixedColumnCount	将列数约束为指定数量
FixedRowCount	将行数约束为指定数量

Layout Element

描述

将此组件添加至 GameObject，使其进入布局元素或覆盖现有布局元素中的值

Name	说明
ignore Layout	布局系统是否应忽略此 RectTransform
Min Width	可以向此布局元素分配的最小宽度
Min Height	可以向此布局元素分配的最小高度
Preferred Width	存在足够空间时，应向此布局元素分配的首选宽度
Preferred Height	存在足够空间时，应向此布局元素分配的首选高度
Flexible Width	存在额外的可用空间时，应向此布局元素分配的额外相对宽度
Flexible Height	存在额外的可用空间时，应向此布局元素分配的额外相对高度
Layout Priority	布局优先级

demo

创建一个 Vertical Layout Group 布局
勾选 Controls Size
取消勾选 Force Expand
子对象全部添加 Layout Element 重新定义子对象布局属性

Content Size Fitter

描述

调整 RectTransform 大小以适应其内容大小。
ContentSizeFitter 可以用于具有一个或多个 ILayoutElement 组件（如 Text、Image、HorizontalLayoutGroup、VerticalLayoutGroup 和 GridLayoutGroup）的 GameObject。

Name	说明
horizontalFit	用于确定宽度的适应模式
verticalFit	用于确定高度的适应模式
Unconstrained	不执行任何大小调整
MinSize	将大小调整为内容的最小大小
PreferredSize	将大小调整为内容的首选大小

demo

当Text 内容更新的时候 自动调整Text高度

Aspect Ratio Fitter

描述

调整 RectTransform 大小以适应指定宽高比

Name	说明
aspectMode	要用于强制实施宽高比的模式
aspectRatio	要强制实施的宽高比。这表示宽度除以高度

aspectMode	指定要用于强制实施宽高比的模式
None	不强制实施宽高比
WidthControlsHeight	更改矩形的高度以匹配宽高比，设置宽度组件自动设置高度
HeightControlsWidth	更改矩形的宽度以匹配宽高比，设置高度组件自动设置宽度
FitInParent	调整矩形大小，以便完整包含在父矩形中
EnvelopeParent	调整矩形大小，以便父矩形完整包含在其中

按比例显示图片

        var img = GetComponent();
        var aspectRatioFitter = GetComponent();
        img.texture = Resources.Load("img");
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;
        aspectRatioFitter.aspectRatio = img.texture.width / img.texture.height;

DefaultControls

描述

用于创建内置 UI 控件的默认实现的 Utility 类。

Name	说明
CreateButton	创建按钮。
CreateDropdown	创建下拉列表。
CreateImage	创建图像。
CreateInputField	创建输入字段。
CreatePanel	创建面板。
CreateRawImage	创建原始图像。
CreateScrollbar	创建滚动条。
CreateScrollView	创建滚动视图。
CreateSlider	创建滑动条。
CreateText	创建文本对象。
CreateToggle	创建开关。

        //创建默认按钮
        var button = DefaultControls.CreateButton(new DefaultControls.Resources());
        button.transform.SetParent(transform,false);