码迷,mamicode.com
首页 > 其他好文 > 详细

uGUI练习(五) ScrollView

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

标签:style   blog   http   color   ar   for   2014   sp   log   

一、相关组件

  • 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

标签:style   blog   http   color   ar   for   2014   sp   log   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!