滚动条与滑动条Slider不同,滚动条Scroll Bar 多了一个Size 参数(表示)

常用来做显示滚动的区域

如下面灰色区域滑动条的大小对应size的大小参数变化

【 untiy3d 】 用NGUI 制作滚动条Scroll Bar

一:制作Scroll Bar

新建一个空物体,里面加上BoxColider,作为触发点击功能

加上Scroll Bar脚本做滚动功能

二:制作背景图片

空物体下制作3个子物体sprite,并添加图片,设置深度

【 untiy3d 】 用NGUI 制作滚动条Scroll Bar

【 untiy3d 】 用NGUI 制作滚动条Scroll Bar

三:播放动画,查看效果

测试注意细节:

1、点击移动的范围是coliider的大小范围

2、滚动的范围是会根据size的大小设置,如果size为1则不能移动(说明当前页面是满页)

如下图的滑轮

【 untiy3d 】 用NGUI 制作滚动条Scroll Bar

    3、size不为1就可以滚动读条,size越小,滚动距离的越多

【 untiy3d 】 用NGUI 制作滚动条Scroll Bar

四:扩展

设置移动视图 ScrollView 配合滚动条使用

1、创建一个Panel包含一个网格,网格下有多个Sprite图片,

2、panel设置裁切效果SoftClip,并设置裁切范围

3、把滚动条Scroll Bar拖入 ScrollView

4、在Scroll View设置滑动方式

【 untiy3d 】 用NGUI 制作滚动条Scroll Bar

播放游戏,此时移动滑轮就可以移动Scroll View视图了

此时,裁切的红色框大小和Size大小是对应的

相关文章: