UGUI学习笔记(三)交互组件

古城微笑少年丶 2023-09-27 07:19 253阅读 0赞

一、Selectable基类

Selectable类是所有交互组件的基类
a67f5f116941985e0ce99364117fdb43.png

  • Interactable:设置组件是否接受输入。如果设置为false,则交互和过渡状态都将设置为禁用状态
  • Transition:设置过渡状态。包含「None」无状态效果、「Color Tint」颜色改变效果、「Sprite Swap」精灵改变效果、「Animation」动画改变效果
  • Navigation:设置导航。包含「None」无键盘导航、「Horizontal」水平导航、「Vertical」垂直导航、「Automatic」自动导航、「Explicit」自定义导航
  • Visualize:显示导航线

Transition

「Transition」选项提供了不同的过渡效果供用户设置。
当选择「Color Tint」选项时,可以定义对焦、失焦、按下等状态时控件的颜色
d2c803a558ce9cdaca2d8d9a237e68a1.gif

当选择「Sprite Swap」选项时,可以设置各个状态下控件显示的精灵
c8d18a69022abc0ca72ad225d3655fba.gif

当选择「Animation」选项时,点击「Auto Generate Animation」,Unity就会自动创建一个动画状态机,并添加了各个状态。我们只需要自定义每个状态的动画即可
69de2a18ecd1273869ca5d84db8cffaa.png

Navigation

「Navigation」选项用来设置控件间的导航。根据选择的不同方向,可以按对应的方向键跳转到相邻的其他控件,或从其他控件跳转会当前控件。点击「Visualize」可以显示导航线。
3c5e6e06907ec138eea444c958de62ba.png

比如上图中,目前的焦点在「结束游戏」按钮上。根据导航线,按「上」方向键时,焦点就会到「开始游戏」按钮上;按「下」方向键,焦点就会到中间的白块上。。。

二、Button按钮

Button是最基本的交互组件,它除了Selectable基类提供的属性外,只多了个OnClick事件绑定。通过绑定指定脚本的指定方法,就可以在按钮点击时触发该方法。
f14e14cb6756831d70e3667b77bd74a9.gif

三、Toggle复选框

Toggle控件除了基类提供的属性外,还有如下选项

  • Is On:复选框在开始时是否选中
  • Toggle Transition:复选框变化时的效果,可以选择「None」无效果、「Fade」淡入淡出
  • Graphic:用于指定复选标记的图像
  • Group:用来指定复选框组。在同一组的复选框是互斥的。
  • On Value Changed:绑定选项改变事件

7d643744037963549a57288556888b8e.gif

四、Slider滑动条

Slider滑动条允许用户通过拖动鼠标从预定范围中选择数值

  • Fill Rect:设定填充区域的图形
  • Handle Rect:设定控制柄的图形
  • Direction:设置滑动方向
  • Min Value:最小值
  • Max Value:最大值
  • Whole Numbers:是否将滑动条约束为整数
  • Value:滑动条当前数值
  • On Value Changed:数值改变事件

0df344371d9683432eecd7110504b31f.gif

五、Scrollbar滚动条

滚动条与滑动条的区别在于,滑动条通过滑动来改变目标值,一般用于音量、亮度调节等场景;滚动条则是事先设置好值,通过滚动改变目标的比例,一般用于改变滚动视野显示区域等。

  • Handle Rect:设定控制柄的图形
  • Direction:设置滚动方向
  • Value:滚动条的初始位置值,范围为 0.0 到 1.0
  • Size:控制柄在滚动条内的比例大小,范围为 0.0 到 1.0
  • Number Of Steps:滚动条允许的不同滚动位置的数量
  • On Value Changed:数值改变事件

af8734e3ccad197ffd6f7379ee45b4c7.gif

六、Dropdown下拉选单

在新版的Unity中,原生的Dropdown已被标记为过时,官方推荐使用Text Mesh Pro中的Dropdown。不过用法与原生的基本相同。

  • Template:下拉列表模板
  • Caption Text:当前所选选项的文本组件
  • Caption Image:当前所选选项的图像组件
  • Placeholder:默认显示内容
  • Item Text:列表项的文本组件
  • Item Image:列表项的图像组件
  • Value:当前所选选项的索引。0 代表第一个选项,1 代表第二个,依此类推
  • Alpha Fade Speed:下拉列表淡入淡出的速度,数越大越慢
  • Options:选项列表,可为每个选项指定一个文本字符串和一个图像
    1b2770bfeae6ab2eff36706f841395ac.gif

七、InputField文本框

与Dropdown一样,目前官方推荐使用Text Mesh Pro中的文本框控件。这里因为属性比较多,所以直接贴图片了。使用起来也很简单,此处不再详述。
0d5804c3cebe8e021cfe4f5f1bdd6631.png

八、Scroll View滚动框

  • Content:指定展示的内容
  • Horizontal:启用水平滚动
  • Vertical:启用垂直滚动
  • Movement Type:移动类型,包含「Unrestricted」不受限制、「Elastic」回弹、「Clamped」粘合
  • Inertia:内容移动时是否开启惯性
  • Scroll Sensitivity:滚动灵敏度
  • Viewport:视口,也就是展示内容的区域
  • Horizontal Scrollbar:水平滚动条

    • Visibility:滚动条在不需要时是否自动隐藏
    • Spacing:滚动条与视口的间距
  • Vertical Scrollbar:垂直滚动条
    eca9f9653524724bf6332b2b22829eba.gif

发表评论

表情:
评论列表 (有 0 条评论,253人围观)

还没有评论,来说两句吧...

相关阅读