练习目标

练习uGUI的滑动组件

一、相关组件

  • ScrollRect
  • Mask
  • Grid Layout Group
  • Scrollbar

二、步骤

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

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

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

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

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

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

7、给Scroll Rect添加Mask组件

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

9、设置参数

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

2.2 添加Scrollbar

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

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

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

14、为HScrollbar设置好Handler参数

15、同时为Scrollbar设置Horizontal Scrollbar

三、Scroll View 效果

四、补充

本周(2014年11月的最后一周),Unity4.6正式版发布了,我在新版本里用上面同样的步骤试用了ScrollView是可行的,但也发现有几个地方可能会让初学者迷惑,这里指出。

步骤1:

默认创建一个Panel是Stretch的,没有Width和Height,也就是它会撑满全屏幕

我们可以手工缩放它的大小成我们需要的,但此时它具有Anchor 特性,就是会根据屏幕来拉伸

所以建议,把panel的布局方式改一下,这里我选择的是Middle – Center,这样就可以控制Panel的大小为绝对值了

步骤2:

有可能你创建出来的Scroll,滑动不了内容。表现为:明明Grid下有很多Image,但它就是只能滑动那么一点点。(—!gif工具突然不能录制了!)

这是因为你的Grid的宽度不够!如所下图

我知道有两个方法:

方法1、给Grid选择固定列数,比如我有10个child,我就填10,填完之后,Grid Rect的宽度会自动帮你计算出来

方法2、自己计算,比如Grid下有10个Image,每个100x100,它们之前的spacing是x:10,y:10,那么我可以这样填

总之就是要把Grid下所有的Item都在同一直线上

步骤2.2

我在4.6正式版中,发现可以直接创建一个Scrollbar,就不需要手工的配置了,比较方便。

附注

Unity5.0Beta UIMask bug

有同学发现在unity5.0 beta片UI的mask组件有bug

bug1

给panel添加mask后,chid组件全部不可见,可能是mask把它们alpha设置成0了

bug2

同样的,还有同学在做背包时,发现click事件很容易被当作scroll事件,所以建议大家在做UI时,更新到4.6的正式版。

uGUI练习(六) ScrollView的更多相关文章

  1. uGUI练习(七) Drag And Drop

    练习目标 练习UI的拖放操作 一.相关组件 EventTrigger Canvas Group ScrollRect Mask Scrollbar 二.拖放练习 1.创建一个Panel,命名Panel ...

  2. uGUI练习 开篇

    一.准备阶段 1.Unity 4.6 Beta b18或更高版本(注:目前泄露版的Unity5.0Beta 对UI的支持并没有4.6 Beta那么好) 2.了解 Unity 2D Sprite的基础知 ...

  3. U3D面试题四

    1.配置Unity3D调试环境 在windows环境下,设置unity3d的编辑器调试环境方法: 点击“Edit‘---”Preferences“,弹出如下窗口 选择MonoDeveop即可. 在编辑 ...

  4. 『IOS』 遇到问题记录(长期更新)

    遇到的很多问题,解决后都是自己记着,以为不会忘记,之后却会想不起来了. 所以把今后解决的问题记录在这. 一. 在二级页面设置了CAlayer的代理,在返回一级页面报错: EXC_BAD_ACCESS( ...

  5. Unity3D UGUI之ScrollView弹簧效果

    unity3d版本5.3.2p4 UGUI中ScrollView包含Viewport(Content) ScrollView包含脚本.其Movement Type一共3个选项.Elastic就是弹簧效 ...

  6. 【转】(六)unity4.6Ugui中文教程文档-------概要-UGUI Animation Integration

    原创至上,移步请戳:(六)unity4.6Ugui中文教程文档-------概要-UGUI Animation Integration 5.Animation Integration(动画集成) 动画 ...

  7. UGUI ScrollView中显示模型和特效

    游戏开发中有时候会遇到在UI上显示模型和特效的需求,这次需要在ScrollView上显示.我们使用UGUI的Screen Space - Camera模式,修改模型和特效的layer使之显示在UI上面 ...

  8. 【Unity3D基础教程】给初学者看的Unity教程(六):理解Unity的新GUI系统(UGUI)

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点推荐.谢谢! 理解UGUI的基础架构 UGUI是Unity在4 ...

  9. NGUI学习笔记(六):ScrollView、Grid和Table

    下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例:   基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然, ...

随机推荐

  1. 开源项目Foq简介

        Foq是一个轻量级-线程安全的mocking类库.使用它来mock抽象类与接口这是我们通常的做法.Foq的名字来自Moq,如果你使用过Moq的话,自然后联想到它能做什么.Foq主要是为了F#的 ...

  2. sublimeCodeIntel 的配置

    在项目的根目录目录下建立.codeintel/config 但是在windows 需要进入dos 环境下建立.以点开头的文件夹和文件.资源管理器不允许创建点开头的文件或文件夹,但在命令提示符下是可以的 ...

  3. c++之函数重载(函数匹配)

    Case void f(); void f(int); void f(int, int); void f(double, double = 3.14); 匹配原则: 1)其形参数量与本次调用提供的实参 ...

  4. CSS属性选择器温故-4

    1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...

  5. ASP.NET验证码生成与识别

    一般验证码页面只输出一个图片而不进行其他业务处理,所以验证码一般放在一般处理程序(httpHandler)页面中,而如果将验证码生成代码放到一般处理程序中,要将生成验证码保存在Session中,这里我 ...

  6. ABAP modify screen:修改屏幕,实现隐藏、禁止输入字段

    Loop at screen会loop处理屏幕上的每一个组件,并对其做相应的处理. SELECTION-SCREEN: BEGIN OF BLOCK B1 WITH FRAME.PARAMETERS  ...

  7. Windows2008系统忘记密码的解决方法

    网上转载的,忘记密码不用发愁了.   windows2008系统忘记密码的解决方法: 利用放大镜的漏洞来重设密码 首先用系统盘来引导 选择修复计算机 然后打开命令提示符:先备份放大镜,然后用CMD替换 ...

  8. VS 2013打开.edmx文件时报类型转换异常

      供应商提交了项目代码,但在我的电脑上打开项目编译时一直报Entityframework 的 .edmx文件转换异常,而无法通过编译.   分析后认为可能是entityframework的类库不够新 ...

  9. UITabBar,UINavigationBar的布局和隐藏问题

    ---恢复内容开始--- 1. 前言 UITabBar,UINavigationBar非常的好用,但是毕竟是系统自带的,不受自己完全掌握,对于布局和隐藏会有一些问题,现在就来谈谈我的想法和一些问题. ...

  10. Android代码混淆官方实现方法

    首先查看一下 “project.properties” 这个文件: # This file is automatically generated by Android Tools.# Do not m ...