UGUI学习笔记3——UI组件

Button

button自带image组件。用于设定按钮的UI图片。
button组件上有三部分内容

Interactable

表示是否可用,不勾选按钮无法点击。

Transition

用来显示按钮的在不同状态下的变换。可以选颜色,图片,动画三种。

color tint,和NGUI上的设置基本一样。
color multiplier以设定的数值对每个过度的着色进行叠加,这使得颜色值大于1,这对增亮一些基色非白色或者增亮一些alpha通道小于全透明的图像元素很有帮助(官方文档的翻译)。
fade duration 是颜色淡入淡出的秒数。

sprite swap就是变换图片

animation变换动画,需要添加一个animator组件,点击auto generate animation创建一个动画控制器。打开animation窗口,就可以录制在不同状态下的动画。一般只用在第一帧或者时间为零的地方设置一下最终状态,就会自动处理。如果在animation里设置多帧,则处在当前状态时会在循环播放。
如果多个按钮是同一种动画效果,可以都用同一个animator

键盘控制时的导航,一般保持默认设置Automatic。

OnClick

点击事件和NGUI类似。选择目标object,可以选择上面所有组件以及组件上的方法。可以用OnClick委托的自定义方法必须是public void 的无参数或一个int,float,string,bool,object类型的参数。

Image

最基本的显示图片的UI
source image:图片源,只能用texture为sprite的图片,为空时就显示颜色
color:颜色
material:材质
raycast target目前官方文档上还没有,字面意思是射线目标,猜测是是否接受射线。
image type:同NGUI,是图片的填充模式。
simple和filled模式中的preserve aspect勾选时是保持原比例填充.
sliced模式中fill center是指边界内是否填充。
filled模式中的clockwise是值填充的方向是顺时针还是逆时针。

Raw Image

一般用来不需要交互的图片。可以显示任意texture的图片。

Text

文本部分基本和NGUI相同.
best fit是自动选择最合适的字体,下面需要设置最大和最小字体。
字体的效果只有普通,加粗和斜体,描边成为一个新的组件outline。
rich text勾选后允许使用文本标签,这可以让你在行内使用类HTML标签格式化文本。可以用标签改变一段文本中字体大小颜色等等。

Toggle

开关,相同的组件不再赘述。附带了background的image,checkmark的image,和一个label描述
Toggle Transition 是现实选框时是否淡入淡出,对于默认的勾不是很明显,如果用自定义的图片做开关,就能看出效果。
Group可以设定一个带有toggle group的组件。制定同一个group的toggle可以实现单选。
点击事件接受一个bool值的方法。

Input Field

自带placeholder,text两个带text组件的子物体。
Text component显示文字的组件。
character limit字母数限制,0为无限制。
content type内容模式,预设了很多种,比NGUI多很多,也可以选择预设中的custom,完全自定义。
line type行的模式,有单行Single Line,自动换行Multi Line Submit,用户可以输入回车换行Multi Line Newline三种模式。
placeholder默认显示的提示输入文字。
Hide Mobile Input因此移动设备上原生的输入框(还没测试过)。
两个UI事件On Value Change接受一个string类型的变量,每当输入内容改变时执行。
End Edit接受一个string类型的变量,当按回车或点击输入框以外的地方执行事件。

UI Slider

滑动杆
interactable,transition,navigation和button相同。如果要设置外部数值来影响滑动条显示的话,例如血条,需要把interactable关上,以免可以拖动。
fill rect填充的物体
handle rect滑杆
属性都很好理解,和NGUI相似。
自带一个on value changed的事件,用法和button的OnClick一样,如果调用的是接受float类型参数的方法,则会根据滑动条上的值输入参数。这个效果对int参数方法无效,即使勾选了whole numbers。

Scroll Rect

可以滑动的快,可以用来做连续的大地图。官方教程里是先创建一个空物体,然后添加Scroll Rect组件,这个物体放在Canvas下,在添加一个image作为子物体图片。
content就是可以拖动的大图。
movement type是滑动的模式。Unrestricted自由的,滑出边界之后还可以滑,一般不选这个。Elastic 有弹性,拖到边界处会弹回,可以设置弹回的距离。Clamped固定的,拖到边界会停止,没有弹回效果。
Deceleration Rate减速率,当鼠标松开时,继续滑动减速率。1就不减速,0是松开就停止滑动。
Viewport视口,默认就是自身,可以设置为别的带有rect transform的物体。
事件On Value Changed接受一个vector2的参数。

Scroll Bar

滑动条,同Slider
value只有0-1。size是滑块的大小。number of steps设置为0就是无缝滑动,其他数值是从一边到另一边要滑动的次数。

Mask

遮罩。和image同时使用,可以限制scroll rect显示的范围。当然用法不限于在这里。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值