uGUI练习(六) ScrollView

简介:



练习目标

练习uGUI的滑动组件

一、相关组件

  • ScrollRect
  • Mask
  • Grid Layout Group
  • Scrollbar

二、步骤

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

image

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

image

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

image

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

image

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

image

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

image

7、给Scroll Rect添加Mask组件

image

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

image

9、设置参数

image

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

Scroll View-1

2.2 添加Scrollbar

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

image

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

image

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

image

14、为HScrollbar设置好Handler参数

image

15、同时为Scrollbar设置Horizontal Scrollbar

image

三、Scroll View 效果

Scroll View

四、补充

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

步骤1:

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

image

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

image

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

image

步骤2:

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

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

image

我知道有两个方法:

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

image

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

image

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

image

image

步骤2.2

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

scrollview

附注

Unity5.0Beta UIMask bug

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

bug1

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

bug2

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


本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/3973167.html,如需转载请自行联系原作者

相关文章
|
6月前
|
XML Java API
23. 【Android教程】轮播滚动视图:ViewFlipper
23. 【Android教程】轮播滚动视图:ViewFlipper
177 2
|
Web App开发 API 容器
CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件
CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件
280 0
|
容器
利用CustomScrollView实现更有趣的滑动效果
本篇介绍了 CustomScrollView 的基本用法以及 SliverAppBar 的使用,通过 SliverAppBar 可以让导航栏的滑动更有趣。
837 0
利用CustomScrollView实现更有趣的滑动效果
SwiftUI极简教程07:ScrollView滚动视图的使用
SwiftUI极简教程07:ScrollView滚动视图的使用
1482 0
SwiftUI极简教程07:ScrollView滚动视图的使用
|
Android开发 容器
Android开发 - 解决DialogFragment在全屏时View被状态栏遮住的问题
我的上一篇文章:设置DialogFragment全屏显示 可以设置对话框的内容全屏显示,但是存在在某些机型上顶部的View被状态栏遮住的问题。经过测试,发现了一种解决办法,在DialogFragment的onCreateView()中添加一个布局监听器: @Override public View.
2479 0
|
前端开发 Java Android开发
自定义View——画板
今天实现的是画板效果 image 实现原理 image 根据触摸事件返回的坐标点绘制path路径 @Override public boolean onTouchEvent(MotionEvent event) { x = event.
1019 0
|
Android开发 容器 Java
Android取消RecyclerView、ListView、ScrollView、HorizontalScrollView滑动到边缘闪现灰白色水波纹动画
Android取消RecyclerView、ListView、ScrollView、HorizontalScrollView滑动到边缘闪现灰白色水波纹动画 标准的Android RecyclerView、ListView、ScrollView、HorizontalScrollView滑动到边缘,会闪现灰白色水波纹动画,以这样大的动画效果提示用户已经滑动到边缘,没法再滑动了。
3062 0
|
前端开发 Android开发
01.自定义View(ArcView弧形进度条)
开始重新学习一下自定义View的相关知识,借鉴了一些网上的文章,目前在跟这位博主学习,大家可以关注一下 作者:红橙Darren 链接:https://www.
1124 0