首页 > 其他 > 详细

uGUI练习(五) ScrollView

时间:2014-09-15 17:28:39      阅读:2662      评论:0      收藏:0      [点我收藏+]

一、相关组件

  • ScrollRect
  • Mask
  • Grid Layout Group
  • Scrollbar

二、步骤

1、创建一个Panel,命名为ScrollRect,添加 ScrollRect组件

bubuko.com,布布扣

2、在ScrollRect下创建一个子Panel,命名为Grid,添加Grid Layout Group 组件

bubuko.com,布布扣

3、在Grid下,创建一个Image,按Ctrl+D ,Copy出多个Image

bubuko.com,布布扣

4、在Scene视图,可以看到Image的排列(注意:排列成了两行)

bubuko.com,布布扣

5、让Grid下的Image排列成一行;做法:拉伸Grid的长度,让它变长

bubuko.com,布布扣

6、在Game视图,看到Image已经超出了Scroll Rect

bubuko.com,布布扣

7、给Scroll Rect添加Mask组件

bubuko.com,布布扣

8、添加完Mask组件之后,Image就不再超出了,但此时仍然不能Drag它

bubuko.com,布布扣

9、设置参数

bubuko.com,布布扣

10、设置完参数之后,就能Drag了

bubuko.com,布布扣

2.2 添加Scrollbar

11、创建一个Panel,命名HScrollbar,添加 Scrollbar 组件

bubuko.com,布布扣

12、在HScrollbar下 创建一个空的GameObject,命名Stretch ,添加 Rect Transform组件,设置Stretch为All

bubuko.com,布布扣

13、在Stretch 下 创建一个Image,命名 Handler

bubuko.com,布布扣

14、为HScrollbar设置好Handler参数

bubuko.com,布布扣

15、同时为Scrollbar设置Horizontal Scrollbar

bubuko.com,布布扣

三、Scroll View 效果

bubuko.com,布布扣

uGUI练习(五) ScrollView

原文:http://www.cnblogs.com/zhaoqingqing/p/3973167.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!