unity中的UI先容

在unity中，UI组件是创建用户界面的关键元素，内置的UI基于unityEngine.UI定名空间，提供了多种预界说的UI组件和工具用于创建用户界面
  1. Canvas（画布）

功能：Canvas是全部UI元素的根对象，其决定了UI元素怎样渲染以及怎样相应屏幕分辨率的变革
范例：

• Screen Space - Overlay:UI元素直接绘制在屏幕上，不受摄像机影响
  
• Screen Space - Camera:UI元素相对于某个摄像机绘制
  
• World Space:UI元素作为3D天下的对象，可以受摄像机视角影响
  

利用方法：

• 在Hierarchy视图中右键选择UI->Canvas创建一个新的Canvas
  
• 选择Canvas,然后在Inspector视图中设置其Render Mode和干系属性
  

2. Image（图像）

功能：用于表现图像和颜色
属性：

• Source Image:设置图像的Sprite
  
• Color:设置图像的颜色和透明度
  
• Type:可以选择Simple(平常)、Sliced(切片)、Tiled(平铺)等范例
  

利用方法：

• 在 Hierarchy 视图中右键选择 UI -> Image 创建一个新的 Image
  
• 选中Image，然后在Inspector视图中设置Source Image和其他属性
  

3. Button（按钮）

功能：用于创建可点击的按钮
属性：

• Text:按钮上的文本
  
• Image:按钮的配景图像
  
• Transition:按钮的过渡效果（Color Tint、Sprite Swap、Animation）
  
• On Click():按钮点击时触发的事故
  

利用方法：

• 在 Hierarchy 视图中右键选择 UI -> Button 创建一个新的按钮
  
• 选中按钮，然后在Inspector视图中设置Text、Image和其他属性
  
• 在On Click()事故中添加须要实行的函数
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class ButtonHandler : MonoBehaviour
5. {
6.     public void OnButtonClicked()
7.     {
8.         Debug.Log("Button Clicked!");
9.     }
10. }

复制代码

4. Text（文本）

功能：用于表现文本
属性：

• Text:表现的文本内容
  
• Font:利用的字体
  
• Color:文本的颜色
  
• Alignment:文本的对齐方式
  
• 
  
  

利用方法：

• 在Hierarchy视图中右键选择UI->Text创建一个新的文本
  
• 选中文本，然后在Inspector视图中设置Text、Font和其他属性
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class TextManager : MonoBehaviour
5. {
6.     public Text myText;
7.    
8.     void Start()
9.     {
10.         myText.text = "Hello, Unity!";
11.     }
12. }

复制代码

如安在代码中利用Text：

1. using UnityEngine;
2. using TMPro;
4. public class PlayerMovement : MonoBehaviour
5. {
6.     public int score = 0;
7.     public TextMeshProUGUI textComponment;
8.     public float moveSpeed = 5f;
10.     void Update()
11.     {
12.         //获取水平和垂直输入
13.         float horizontalInput = Input.GetAxis("Horizontal");
14.         float verticalInput = Input.GetAxis("Vertical");
16.         //计算移动方向
17.         Vector3 moveDirection = new Vector3(horizontalInput, 0, verticalInput).normalized;
19.         //应用移动
20.         transform.Translate(moveDirection * moveSpeed * Time.deltaTime);
21.     }
23.     // 碰撞器
24.     //private void OnCollisionEnter(Collision collision)
25.     //{
26.     //  if (collision.gameObject.tag == "food")
27.     //    {
28.     //        Destroy(collision.gameObject);
29.     //    }
30.     //}
32.     private void OnTriggerEnter(Collider other)
33.     {
34.         if (other.tag == "food")
35.         {
36.             score++;
37.             textComponment.text = score.ToString();
38.             Destroy(other.gameObject);
39.         }
40.     }
41. }

复制代码

若须要利用text，则须要引入TMPro，在界说了textComponment组件后，之后会在unity中出现此组件，然后将Text(TMP)拖到组件框中即可在代码中利用

5. Input Field（输入框）

功能：用于吸取用户输入的文本
属性：

• Text: 当前输入的文本
  
• Placeholder：输入框为空时表现的占位文本
  
• Character Limit：输入的最大字符数
  
• Line Type: 输入框的行范例（单行、多行、隐蔽输入）
  
• On End Edit：输入框失去焦点时触发的事故
  

利用方法：

• 在 Hierarchy 视图中右键选择 UI -> Input Field 创建一个新的输入框
  
• 选中输入框，然后在Inspector视图中设置Text、Placeholder或其他属性
  
• 在On End Edit事故中添加须要实行的函数
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class InputFieldHandler : MonoBehaviour
5. {
6.     public InputField myInputField;
8.     public void OnInputFieldEndEdit(string text)
9.     {
10.         Debug.Log("Input: " + text);
11.     }
12. }

复制代码

6. Toggle（切换按钮）

功能：用于创建可切换的按钮
属性：

• Is On: 当前的状态（开或关）
  
• Graphic: 切换按钮的图像
  
• On Value Changed: 切换按钮状态改变时触发的事故
  

利用方法：

• 在 Hierarchy 视图中右键选择 UI -> Toggle 创建一个新的切换按钮
  
• 选中切换按钮，然后在 Inspector 视图中设置 Is On 和其他属性
  
• 在 On Value Changed 事故中添加须要实行的函数
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class ToggleHandler : MonoBehaviour
5. {
6.     public Toggle myToggle;
8.     public void OnToggleValueChanged(bool isOn)
9.     {
10.         Debug.Log("Toggle is: " + (isOn ? "On" : "Off"));
11.     }
12. }

复制代码

7. Slider（滑动条）

功能：用于创建可拖动的滑动条
属性：

• Value: 当前的值
  
• Min Value: 最小值
  
• Max Value: 最大值
  
• On Value Changed: 滑动条值改变时触发的事故
  

利用方法:

• 在 Hierarchy 视图中右键选择 UI -> Slider 创建一个新的滑动条
  
• 选中滑动条，然后在 Inspector 视图中设置 Value、Min Value、Max Value 和其他属性
  
• 在 On Value Changed 事故中添加须要实行的函数
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class SliderHandler : MonoBehaviour
5. {
6.     public Slider mySlider;
8.     public void OnSliderValueChanged(float value)
9.     {
10.         Debug.Log("Slider value: " + value);
11.     }
12. }

复制代码

8. Dropdown（下拉菜单）

功能: 用于创建下拉菜单
属性:

• Options: 下拉菜单的选项列表
  
• Value: 当前选中的选项索引
  
• On Value Changed: 选中选项改变时触发的事故
  

利用方法:

• 在 Hierarchy 视图中右键选择 UI -> Dropdown 创建一个新的下拉菜单
  
• 选中下拉菜单，然后在 Inspector 视图中设置 Options、Value 和其他属性
  
• 在 On Value Changed 事故中添加须要实行的函数
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class DropdownHandler : MonoBehaviour
5. {
6.     public Dropdown myDropdown;
8.     public void OnDropdownValueChanged(int index)
9.     {
10.         Debug.Log("Selected option: " + myDropdown.options[index].text);
11.     }
12. }

复制代码

9. Scroll Rect（滚动地区）

功能: 用于创建可滚动的地区
属性:

• Content: 滚动地区的内容
  
• Horizontal: 是否启用水平滚动
  
• Vertical: 是否启用垂直滚动
  
• Scroll Sensitivity: 滚动的灵敏度
  

利用方法:

• 在 Hierarchy 视图中右键选择 UI -> Scroll Rect 创建一个新的滚动地区
  
• 选中滚动地区，然后在 Inspector 视图中设置 Content、Horizontal、Vertical 和其他属性
  

1. using UnityEngine;
2. using UnityEngine.UI;
4. public class ScrollRectHandler : MonoBehaviour
5. {
6.     public ScrollRect myScrollRect;
8.     void Update()
9.     {
10.         if (Input.GetKeyDown(KeyCode.UpArrow))
11.         {
12.             myScrollRect.verticalNormalizedPosition += 0.1f;
13.         }
14.         if (Input.GetKeyDown(KeyCode.DownArrow))
15.         {
16.             myScrollRect.verticalNormalizedPosition -= 0.1f;
17.         }
18.     }
19. }

复制代码

10. Layout组件

功能: 用于主动分列 UI 元素
常见范例:

• Horizontal Layout Group: 水平分列子元素
  
• Vertical Layout Group: 垂直分列子元素
  
• Grid Layout Group: 网格分列子元素
  
• Content Size Fitter: 主动调解内容的巨细
  
• Aspect Ratio Fitter: 保持内容的宽高比
  

利用方法:

• 选择须要应用结构的 GameObject
  
• 在 Inspector 视图中点击 Add Component，选择相应的 Layout 组件
  
• 设置 Layout 组件的属性，如 Child Alignment、Child Force Expand 等