【UI界面开发】基本组件——输入框

摘要

• 本文章主要总结UGUI中的InputField的功能，
• 为了更好地学习它的基本功能，在后面会思考如何利用基本UI实现简易的InputField

UGUI之InputField

Unity预制组成分析

• InputField由三个物体组成，其中两个子物体均只有Text组件。而实现功能的核心组件则挂在InputField上。
• 因此可以知道InputField是基于Text的基本功能，并丰富交互的。

Inspector窗口参数分析

• Input Field依然保持有基本的交互视效功能，因此这里不再重复。这里仅展示InputField独有的部分。
• 从上图中可以看出，InputField大体可以分成三部分：基本设置、扩展设置、事件

基本设置

• 基本设置主要的目的是确定关联文本框，设置文本输入限制，包括默认文本，文本长度，文本类型。

1. Text Component: 文本控件，它将对具体的文本实现实时编辑
2. Text: 易知是一个string成员，它将直接编辑Text Component中的文本内容，作为默认文本。同样Text Component自身的编辑将不被作用
3. Character Limit: 字符串长度限制，它是C#中的char类型，因此1表示16位而不是8位
4. Content Type：文本类型，有标准型，整型，邮箱，密码等，它们会对文本进行处理，包括如整型的输入限制，邮箱类型的输入校验，以及密码类型的文本显示转化等。
5. Line Type：文本行类型，包括单行，多行等

扩展设置

• 扩展设置则是有关提醒视效的设置，包括光标闪烁频率，光标宽度，选中文本的背景色等等。

事件

• 事件包括两个主要事件，一个是文本更改事件，一个是结束编辑事件

1. 文本更改事件：文本更改过程中实时调用
2. 结束编辑事件：按下回车等方式结束编辑后调用一次

自制InputField

分部说明

• 自制的关键在于解决如何在运行的时候输入。一个值得尝试的方法是利用鼠标进入事件来控制组件的聚焦，同时开启一个协程利用Unity自带方案持续监听用户输入，当用户通过指定方式失焦后结束协程。
• 首先这里不会再实现聚焦等通用交互，因为光标涉及到底层渲染，因此也不予以实现。

1. 首先根据需求设置对应的参数

[SerializeField] private Text textComponent;
[SerializeField] private string text;
[SerializeField] private int characterLimit;
[SerializeField] private ContentType contentType;
[SerializeField] private LineType lineType;
[SerializeField] private bool readOnly;

public enum ContentType {
    Standard,Interger,Password};
public enum LineType {
    SingleLine,MultipleLine};

如图，我们将陆续实现上述功能
2. 实现基本的输入和删除功能
通过观察知道，当我们在控件上点击时进入编辑状态，在控件外点击鼠标或者在编辑后回车将退出编辑状态。这里我们仅实现点击，利用接口IPointerEnter和IPointerExit来实现设置当前聚焦状态。再利用Update去判断Input输入

//使得文本组件的文本与该组件文本一致，即禁止绕过该组件直接编辑文本框内容
if (textComponent != null) textComponent.text = text;
if (readOnly) return;

//按下左键，根据聚焦情况设置编辑状态
if(Input.GetMouseButtonDown(0))
{
   
      isEditing = isFocus;
      print(isEditing);
}

if (!isEditing) return;

//获取输入
if (Input.GetKeyDown(KeyCode.Backspace)&&