Unity3D | UGUI | Zzz记忆

Text

Text的属性

在 Unity 的 Hierarchy 面板上右键–>UI–>Text, 在 Inspector 面板上查看属性属性功能

Text 需要显示的文本
Font 显示文本的字体如：微软雅黑，宋体等
Font Style 显示文本的样式，有普通，粗体，斜体，粗体和斜体四种选项
Font Size 显示字体的大小
Line Spacing 行与行之间的垂直距离
Alignment 文本的水平和垂直方向的对齐方式
Align by Geometry 使用字形几何范围执行水平对齐，而不是字形度量
Horizontal Overflow 用于处理文本宽度超出文本框的情况的方法，有 Wrap (隐藏)和Overflow (溢出)两个选项
Vertical Overflow 用于处理文本高度超出文本框的情况的方法，有 Truncate (截断)和Overflow (溢出)两个选项
Best Fit 忽略 Size 属性，将文本合适的显示在文本框内
Color 文本的颜色
Material 用来渲染文本的材质

其中水平溢出和垂直溢出的两个选项效果：

Horizontal Overflow —— 水平溢出
- Overflow
- Wrap
Vertical Overflow —— 垂直溢出
- Truncate
- Overflow

字体

静态设置

我们想改变文本的字体的话，我们可以下载一些字体包导入到 Unity 中

Assets 目录下新建一个文件夹 Fonts 用来专门存放字体
然后 Font 属性中选择你导入的字体包就行了，也可直接拖动字体添加引用

动态设置

我们可以使用代码动态的设置Text的各种属性

using UnityEngine;
using UnityEngine.UI;

public class Font : MonoBehaviour
{
    public Text TestText;
    // Start is called before the first frame update
    void Start()
    {
        TestText.fontSize = 14;
        TestText.fontStyle = FontStyle.Normal;
        TestText.color = UnityEngine.Color.blue;
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

Image

Image 组件是 UGUI 中最常用的组件。作用：控制/显示图片

Image的属性

在 Unity 的 Hierarchy 面板上右键–>UI–>Image

Source Image 需要显示图片来源（文件引用）
Color 图片的颜色
Material 渲染图像的材质
Raycast Target 能否接收到射线检测
Image Type 图片的排列类型 Simple (普通模式)，Sliced (九宫格)，Tiled (平铺),Filed (填充)
Preserve Aspect 使图片保留现有尺寸
Set Native Size 将图像尺寸设置为原始图片的像素大小

图片导入设置

把图片放入工程目录。
为了在 Image 组件上使用我们想要的图片，我们需要将图片的纹理类型改为：Sprite/精灵，图片才可正常使用。
设置 Image 的 Source Image 属性, 找到我们导入的图片。

Image Type属性详解

Simple: 简单模式-Use Sprite Mesh：是否使用图片网格，勾选-此选项，我们的图片使用 Unity 帮我们生成的图片网格;
Sliced: 九宫格模式 Sliced九宫切图。效果：保证(除中间部分)，其他切图部分被拉伸不变形;
TiledL: 平铺模式
Filed: 填充，这个适合做技能冷却效果

Button

Button 组件是一个按钮组件。它在我们开发中经常使用，通过点击按钮：执行某些事件，动作，切换状态等

Button 属性

在Unity的 Hierarchy 面板上右键–>UI–>Button 一个Button对象比Image对象多了：

Button 组件
Text 子物体

Interactable 是否启用按钮，取消则按钮出去失效状态
Color 图片的颜色
Transition 按钮状态过渡的类型：None、 Color Tint 、 Sprotes Swap、Animation四种类型，默认为 Color Tint
Navigation 导航
On Click 按钮点击事件的列表。点击后执行哪些函数，在这里可以手动添加

通过脚本，动态绑定监听函数:

1 先获取到 目标对象的Button 组件
2 通过.onClick.Addlistener(函数) 的方式进行动态添加
3 如函数具有参数，可通过Lambda表达式 .onClick.AddListener(Lambda表达式) 动态添加
4 如函数具有参数，可通过委托 .onClick.AddListener(delegate {函数;}) 动态添加

Toggle –开关

我们在项目开发的时候，有时需要一个按钮，来模拟 / 控制开关,此时，如果用 Button 的话，作为开发者还需要自己写一些判定逻辑,来告诉电脑，这个 Button 按钮是打开、还是关闭

Create Toggle 创建开关组件: UI → Toggle 即可完成创建
Custom Template —— 可自定义调节模板: 可自由调节颜色/自由更换布局或是图片
Toggle 组件与 Button 不同之处

Graphic ：用来控制 Toggle 开关图片的显示/隐藏 2 IsOn ：用来表示 Toggle 开关状态 3 Group ：用来表示 Toggle 所属开关组/群

OnChangeValue —— 值改变时调用

下拉框

创建布局

创建下拉菜单模板右键层次列表→ UI → Dropdown
设置属性

Demo Script

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

public class DropDownTest : MonoBehaviour
{
    public Dropdown dropDown;
    // Start is called before the first frame update
    void Start()
    {
        dropDown = GameObject.Find("Dropdown").GetComponent<Dropdown>();
       //是否可以点击
        dropDown.interactable = true;

        #region 添加下拉选项，，，设置文字，底图
        //添加一个下拉选项
        Dropdown.OptionData data = new Dropdown.OptionData();
        data.text = "方案一";
        //data.image = "指定一个图片做背景不指定则使用默认"；
        dropDown.options.Add(data);

        //另一种添加方式 , 不过用起来并不比第一个方便，
        List<Dropdown.OptionData> listOptions = new List<Dropdown.OptionData>();       
        listOptions.Add(new Dropdown.OptionData("方案二"));
        listOptions.Add(new Dropdown.OptionData("方案三"));
        dropDown.AddOptions(listOptions);

        //设置显示字体大小
        dropDown.captionText.fontSize = 14;
        //dropDown.captionImage = "底图";
        //设置要复制字体大小
        dropDown.itemText.fontSize = 15;
        //dropDown.itemImage = "底图";

        //PS：我一般是使用循环 使用第一种形式添加
        #endregion

        #region 添加完成就可以使用了，那么当我们想要复用怎么办呢？，这时就用到了移除OptionData，下面的每个注释打开都是一个功能
        //直接清理掉所有的下拉选项，
        // dropDown.ClearOptions();
        //亲测不是很好用
        //dropDown.options.Clear(); 

        //对象池回收时，有下拉状态的，直接干掉... (在极限点击测试的情况下会出现)
        // if (dropDown.transform.childCount == 3)
        // {
        //     Destroy(dropDown.transform.GetChild(2).gameObject);
        // }

        //移除指定数据   参数：OptionData
        // dropDown.options.Remove(data);
        //移除指定位置   参数:索引
        // dropDown.options.RemoveAt(0); 
        #endregion

        #region 添加监听函数
        //当点击后值改变是触发 (切换下拉选项)
        dropDown.onValueChanged.AddListener((int v) => ConsoleResult(v));
        //若有多个，可以将自己当做参数传递进去，已做区分。
        //dropDown.onValueChanged_1.AddListener((int v) => OnValueChange(dropDown.gameobject,v));
        #endregion 
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    public int ConsoleResult(int value)
    {
        UnityEngine.Debug.Log("1231231");
        UnityEngine.Debug.Log(value);
        switch (value)
        {
            case 0:
            UnityEngine.Debug.Log("第一页");
            break;
            case 1:
            UnityEngine.Debug.Log("第二页");
            break;
            case 2:
            UnityEngine.Debug.Log("第三页");
            break;
        }
        return 1;
    }
}

这段代码的作用是

添加属性
绑定onValueChange事件我试过使用Unity自带的On Value Change事件。但是不成功。注意：需要另外再创建右键-> UI -> Create Empty. 然后把脚本跟创建的该Empty 绑定。然后在Drop Down里选择 DropDown

注意事项

手动添加监听事件，需绑定动态方法（Unity会自动生成）
设置自己需要的默认项，默认为 0 ，当下拉菜单弹起时，默认就是第一项
下拉菜单的机制，就是已经被选中的选项，如果再次点击是不会调用函数方法的！！！（也就是说，你已经选择了第一页，再次点击第一页，是不会调用任何函数的）

InputField

在 Unity 的 Hierarchy 面板上右键–>UI–>InputFiel

Placeholder ：用来提示用户的占位符
Text ：用来输入内容

属性

TextComponent 用来管理输入的文本组件
Text 输入的内容 ( 我们可以在代码中用 InPutField.text 获取到 )
Character Limit 字符限制类型，可以限制最大字符数的值。
Content Type 内容类型，定义输入内容接受/限制的字符类型
Line Type 行类型。单行、多行，多行回车换行
Placeholder 占位符，用来提示输入的内容，当点击输入框后会隐藏
Caret Blink Rate 输入框上的光标的闪烁频率
Selection Color 选中文本的背景颜色
Hide Mobile Input (iOS only) 隐藏移动输入内容，仅IOS有用

Content Type –内容类型

Standard 标准，可以输入任何字符
Auto corrected 自动更正，可以自动更正用户输入，并建议输入内容
Integer Number 整数，只允许输入整数
Decimal Number 十进制数，仅允许输入数字和小数点后一位
Alphanumeric 字母数字，允许字母和数字。无法输入符号
Name 名称(支持中文)自动将每个单词的首字母大写。(用户可以使用Delete键绕过大小写规则 )
Email Address 电子邮件地址，允许您输入最多包含一个@符号的字母数字字符串
Password 密码：用 * 表示输入的字符，从而隐藏输入内容。(允许符号)
Pin 用 * 号表示输入的字符。仅允许输入整数
Custom 自定义：允许自定义行类型、输入类型、默认键盘类型、字符验证

Line Type —— 行类型

Single Line 单行：仅允许文本在一行上
Multi Line Submit 多行自动换行：允许文本使用多行。仅在一行写满后使用新行
Multi Line Newline 多行回车新建行：用户可以随时通过按 Enter 键来新建行，继续输入

Custom —— 自定义

Default 目标平台的默认键盘
ASCLL Capable 带标准ASCII键的键盘。
Numbers And Punctuation 键盘与数字和标点符号键
URL 键盘与URL输入键
Number Pad 键盘与标准数字键
Phone Pad 键盘与适合键入电话号码的布局
NamePhone Pad 键盘与字母数字键
Email Address 带有适合键入电子邮件地址的其他键的键盘
Nintendo Network Account 带有网络账号键的键盘
Social 键盘与常用于社交媒体上的符号键，如Twitter
Search 键盘上带有“.” 空格键旁边的键，适合键入搜索词

Exemple

实现一个小 Demo：获取用户的账号密码：简单的搭建一个用户输入界面

两个 InputField 输入框分别命名： Account 和 Password
一个 Button 按钮
将密码的输入框的Content Type 改为 Password

我用代码将组键和函数绑定

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

public class EgInputField : MonoBehaviour
{
    public InputField Account; //账号输入框
    public InputField Password; //密码框
    public Button LoginButton; //登录按钮

    // Start is called before the first frame update
    void Start()
    {
        Account = GameObject.Find("Account").GetComponent<InputField>();
        Password = GameObject.Find("Password").GetComponent<InputField>();
        LoginButton.onClick.AddListener(Login);
    }
    public void Login()
    {
        UnityEngine.Debug.Log("1231231");
        print("账号: " + Account.text + "; 密码: " + Account.text);
    }
    // Update is called once per frame
}

Raw Image

Raw Image 组件是一个显示纹理贴图的组件，常用于与 RenderTexture 结合使用，映射相机画面与 Image 组件的区别是：

Image 显示Sprite 精灵图片；
Raw Image 可以显示任何纹理贴图。( 如：Texture 、Render Texture )

Raw Image 属性

在Unity的 Hierarchy 面板上右键–>UI–>Raw Image

Texture 用于显示的纹理贴图的引用
Color 图片的颜色
Material 渲染图像的材质
Raycast Target 能否接收到射线检测
UV Rect 控制 UI 矩形内的图像偏移和大小

文章目录

Unity3D | UGUI