UGUI学习笔记

UGUI学习笔记

1.Text

基本知识点

扩展（如何使Text中内容文字逐个出现）

这里其实就是用到了string.Substring (int StartIndex ,int length ) 和一个try catch 防止报错

首先声明需要的变量

然后获得组件

最后写一个print方法 在uodate中调用

2.Image

在做有边框的UI时Sliced很好用！

技能冷却的制作（使用Filled属性）

首先 给image赋上sprite 就会出现Image Type 选择Filled

然后 Filled Method选择 Radial 360

最后 写一个脚本 获得image中的 fillamount 即可

3.Raw Image

基本知识点

实现动画效果

这里的X和Y通俗理解就是 Image中心点位置 - 图片中心点位置

（减小时 向右向上移动 ）

W和H 就是图片的水平和竖直方向大小与Image大小的比值

W=0.5 Y=0.5 可以得到图片左下角的四分之一

渐入动画

更改UV Rect的X 

切换动画

同样更改UV Rect的X值 但是不是一直改变

4.Button

Transition

Normal Color  无操作时

Highlighted Color  鼠标移到按钮位置时

Pressed Color 鼠标按下时

Selected Color 选择时

Color Tint 颜色变化

Sprite Swap 图片变化

Animation 动画变化

Naviation

是否可以利用鼠标上下左右 来控制Button的选择

On Click（）

这里好多大佬都建议直接用脚本实现 这里就不说了

Button.OnClick.AddListener(事件) // 用脚本来绑定按钮事件

5.toggle

基本知识点

Toggle.OnValueCahnge.AddListener((bool isOn)=>事件（isOn）)

6.Slider（滑杆）

实现音量大小控制

（Slider的Value和AduioSource的Value 同步）

实现血条控制

删除Handle Slide Area 并且将Slider的Value与CurrentHealth/MaxHealth同步

7.ScroLLbar

与Slider类似

Number Of Steps 表示 滑块滑动可以出现的情况数量

8.Dropdown（下拉框）

基本知识点

在选项旁边放置图片

在Item下面创建一个Image 调好位置

在Dropdown的Option属性中拖入选项的图片精灵

代码添加Option的方法

OnSelect事件

继承 ISelectHandler 类

并生成 OnSelect的方法

9.Input Field

基本知识点

响应事件

10.Scroll View