unity学习56：旧版legacy和新版TMP文本输入框 InputField学习

目录

1 旧版文本输入框 legacy InputField 

1.1 新建一个文本输入框

1.2 InputField 的子物体构成

1.3 input field的的component

1.4 input Field的属性

2 过渡 transition

3 控件导航 navigation

4 占位文本 placeholder

5 文本 text

5.1 文本内容，用户来input

5.2 内容类型 content type

5.3 line type 

5.4  光标 caret相关

5.5 其他

6 相关触发事件

7 代码

7.1 UI相关代码必须先引用  UnityEngine.UI

7.2 声明 InputField类型的变量，然后在unity里拖动和获取到这个控件

7.3  然后再 inputField下面的创建新事件，并关联到脚本的对应函数

7.4 测试代码

8 新版TMP InputField

8.1 子物体的构成，结构有变换，功能差不多

8.2  属性有一些不同，大部分相同

8.3 事件不一样

9 新版 TMP InputField 代码差别

9.1 改变，新包 TMPro

9.2 改变，新类型TMP_InputField

9.3 其他绑定方式类似

9.4 代码实测

---

1 旧版文本输入框 legacy InputField 

1.1 新建一个文本输入框

1.2 InputField 的子物体构成

主物体/主控件 InputField 下面包含2个文本

1. 一个是place holder  //占位文本
2. 一个是text               //就是用户输入时的显示文本

1.3 input field的的component

• rect transform
• canvas render
• image
• input Field

1.4 input Field的属性

• actable 可交互性
• 如果不可交互，就无法选中了，类纯看的图片

2 过渡 transition

• 过渡 transition
• 类前面的button

3 控件导航 navigation

• 多个控件之间的导航，类前面的button
• 没仔细看，以后再说

4 占位文本 placeholder

• 点击 placeholder  会跳转到子物体placeholder 
• 然后在placeholder  上面修改文本内容

5 文本 text

5.1 文本内容，用户来input

• 就是用户的文本输入的内容
• 注意是用户来input
• 一般这里不应该填写内容，如果填写了就会覆盖 place holder
• 而且需要用户自己删掉，可能是提示必须填的文本格式？

• 虽然不填内容，等用户来填写
• 但是各种对文本的 控制，都可以提前设置
• 比如
• character limit 字符数限制

5.2 内容类型 content type

• 整数int
• 小数
• 密码, 会自动屏蔽为***
• 字母
• 电邮
• 等等

5.3 line type 

5.4  光标 caret相关

5.5 其他

移动时输入会弹出一个键盘？

6 相关触发事件

• on  value changed
• on submit
• on end edit

7 代码

7.1 UI相关代码必须先引用  UnityEngine.UI

• 开头需要添加
• using UnityEngine.UI

7.2 声明 InputField类型的变量，然后在unity里拖动和获取到这个控件

• 脚本中，先声明 public InputField inputField1;
• 因为这个脚本挂载canvas上面
• 然后拖动关联到canvas下面的脚本的公共变量上
• 注意，需要让unity可读到显示，都必须声明为public

7.3  然后再 inputField下面的创建新事件，并关联到脚本的对应函数

• 然后再 inputField下面的创建新事件 on value changed
• 把脚本所在的canvas挂上去
• 从右边找到 脚本，然后找到脚本里的新建的函数 inputTextChanged

7.4 测试代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class TestUI : MonoBehaviour
{public InputField inputField1;// Start is called before the first frame updatevoid Start(){using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class TestUI : MonoBehaviour
{public InputField inputField1;// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}// Update is called once per framepublic void buttonClick(){Debug.Log("buttonClick");}public void InputTextChanged(){Debug.Log("InputTextChanged");Debug.Log(inputField1.text);}}}// Update is called once per framevoid Update(){}// Update is called once per framepublic void buttonClick(){Debug.Log("buttonClick");}public void InputTextChanged(){Debug.Log("InputTextChanged");Debug.Log(inputField1.text);}}

8 新版TMP InputField

8.1 子物体的构成，结构有变换，功能差不多

8.2  属性有一些不同，大部分相同

8.3 事件不一样

• on value changed
• on end edit
• on select
• on deselect

9 新版 TMP InputField 代码差别

9.1 改变，新包 TMPro

• using TMPro;
• 因为TMP使用的包不一样

9.2 改变，新类型TMP_InputField

• public TMP_InputField inputField2;
• 文本框的类型，完全不同

9.3 其他绑定方式类似

9.4 代码实测