UG1L2——文本和按钮控件

本章代码关键字

1
2
3
4
5
6
7
8
Rect                //描述UI控件位置尺寸信息的结构体
Texture                //图片信息类
GUIContent            //综合信息类，可以让Label控件同时显示图片与文字，可以设置tooltip信息
GUI.tooltip            //可以获取当前鼠标或者键盘选中的GUI控件对应的tooltip信息
GUIStyle            //自定义样式类，可以控制文本的样式
GUI.Label()            //绘制文本控件，还可以通过GUIContent和GUIStyle修改显示样式
GUI.Button()        //绘制按钮控件，如果在按钮的范围内按下并抬起就会返回true
GUI.RepeatButton()    //绘制长按按钮控件，只要在按钮范围内按下就会一直返回true

GUI绘制的共同点

它们都是GUI公共类中提供的静态函数，直接调用即可，它们的参数大同小异
主要参数如下：

  • 位置参数：Rect​：x, y, w, h​（其中，x和y是位置参数，w和h是尺寸参数）
  • 显示文本参数：string​
  • 图片信息参数：Texture​
  • 综合信息参数：GUIContent​
  • 自定义样式参数：GUIStyle​

每一种控件都有多种重载 都是各个参数的排列组合
必备的参数内容 是 位置信息和显示信息

文本控件

虽然IMGUI不能所见即所得，但是我们可以在运行时随时修改rect​，用来调节位置与尺寸
该方法可以绘制文字或者图片，取决于你在第二个参数传入的是字符串还是Texture​
当显示的是图片时，只修改Rect​的宽是没有效果的，因为图片一定是等比例缩放，因此修改图片的高才能改变图片尺寸
(与后面的图片绘制相比，这里的图片类似于插入到文本中的，而不是单独作为图片或者背景图绘制)

1
2
3
4
5
6
7
8
9
public Texture tex;
public Rect rect;

private void OnGUI()
{
    //基本使用
    GUI.Label(new Rect(0, 0, 100, 20), "唐老狮欢迎你");
    GUI.Label(rect, tex);
}

综合使用

如果想要UI控件又要显示字符串又要显示图片，需要使用GUIContent​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using UnityEngine;

public class Lesson2 : MonoBehaviour
{
    public Rect rect1;
    public Rect rect2;
    public GUIContent content;

    private void OnGUI()
    {
        //综合使用
        GUI.Label(rect1, content);
        //可以获取当前鼠标或者键盘选中的GUI控件 对应的 tooltip信息
        Debug.Log(GUI.tooltip);
    }
}

​GUIContent​​包含：Text​​，Image​​和Tooltip​​

​image​

其中Text​​，Image​​就是图片和文字综合显示，图片显示在前，文字显示在后，改变Rect​​的高只能改变图片大小
而Tooltip​​是隐藏的提示信息，不能直接显示出来，可以靠GUI.tooltip​​这种方法来调用当前鼠标或键盘选中的Label​​的Tooltip​​

自定义样式

当我们想要修改UI控件显示的样式（例如字体大小和字体样式），需要使用GUIStyle​

1
2
3
4
5
6
7
public GUIStyle style;

private void OnGUI()
{
    //自定义样式
    GUI.Label(new Rect(0, 0, 100, 20), "style", style);
}

​GUIStyle​的参数如下：

​image​

  • Name: 名字

  • Normal: 正常显示时

    • Background: 背景图
    • Text Color: 文本颜色

  • Hover: 鼠标悬停在控件上时（同上）

  • Active: 按下控件时（同上）

  • Focused: 具有键盘焦点时（同上）

  • On Normal: 处于启用状态时（同上）

  • On Hover: 处于启用状态时且鼠标悬停在上方时（同上）

  • On Active: 启用并按下时（同上）

  • On Focused: 启用并具有键盘焦点时（同上）

  • Border: 背景图像边框

    • 左、右、顶部、底部

  • Margin: 与其他控件边距

    • 左、右、顶部、底部

  • Padding: 边缘到内容开始出间隔空间，控制文本或图片的偏移

    • 左、右、顶部、底部

  • Overflow: 要添加到背景图图像的额外空间

    • 左、右、顶部、底部

  • Font: 控件字体，不设置使用默认

  • Font Size: 字体大小

  • Font Style: 字体风格（加粗、斜体）

  • Alignment: 对齐方式

  • Word Warp: 是否自动+换行

  • Rich Text: 是否启用富文本（HTML样式标记）

  • Image Position: 图片位置

    • Image Left: 图片在左
    • Image Above: 图片在上
    • Image Only: 仅图片
    • Text Only: 仅文本

  • Content Offset：文本位置偏移

  • Fixed Width: 固定宽，用于设置背景图的宽，
    不设置默认使用Rect的宽

  • Fixed Height: 固定高，用于设置背景图的高，
    不设置默认使用Rect的高

按钮控件

​GUI.Button()​会绘制一个按钮，并返回一个bool​值，返回按钮是否被点击（在按钮范围内按下再松开），
配合if语句即可实现点击时要处理什么的逻辑

按钮控件同样可以使用GUIContent​和GUIStyle​
其中GUIContent​会使按钮上同时显示图片和文字，GUIStyle​可以具体修改图片的背景图，字体大小等，使用方法相同

1
2
3
4
5
6
7
8
9
10
11
12
13
public Rect btnRect;
public GUIContent btnContect;
public GUIStyle btnStyle;

private void OnGUI()
{
    //只有在按钮图标按下并在按钮图标抬起才能触发这个
    if (GUI.Button(btnRect, btnContect, btnStyle))
    {
        //处理我们按钮点击的逻辑
        Debug.Log("被点击了");
    }
}

检测长按的按钮

​GUI.RepeatButton​同样会绘制按钮，只要在长按按钮范围内，按下鼠标就会一直返回true​，配合if语句即可实现按下时要处理什么的逻辑

1
2
3
4
5
6
7
8
9
10
11
12
public Rect btnRect;
public GUIContent btnContect;
public GUIStyle btnStyle;

private void OnGUI()
{
    //只要在长按按钮范围内，按下鼠标就会一直触发
    if (GUI.RepeatButton(btnRect, btnContect))
    {
        Debug.Log("正在被按住");
    }
}