UIScrollView

制作滚动视图,也就是我们常用的ScrollView

那什么是滚动视图呢?就是我们游戏中常见可以拖动来选择东西的页面,例如我们的任务列表,可以通过拖动来滚动的就是滚动视图了。

我们常用于任务视图,选择卡牌,选择背包装备等等地方。还有就是我们常见的其实网页上右侧的可以上下滑动来滚动浏览网页的内容。 滚动视图的目的是为了解决同类内容过多,一个UI版面显示不下的情况,如果同类内容过多,我们一般可以采取设置多个页面,然后通过翻页浏览的方式来浏览,但是很明显,滚动视图会比翻页更方便,因为在移动设备上面我们可以很方便的滑屏进度滚动,在PC上的话可以通过滚轮来进行滚动。我们只要遵循一个版面显示不完很多同类的内容的时候为了让用户很方便的进行浏览,那么就可以使用滚动视图。

一、创建滚动视图 滚动视图的创建方式有两种,一种是通过菜单直接创建,或者自己来拼接,他们的基本原理都差不多,目的都是凑齐几个基本核心组件。 接下来我们来了解一下最简单的创建方式。 (1).选择要创建滚动视图的UI节点,ScrollView将会在这个UI节点物体下作为子物体进行创建 (2).单击Unity顶部的NGUI菜单,选择Creat、选择ScrollView,这样将会自动创建一个ScrollView的子物体在选择的UI节点下 (3).然后我们将这个ScrollView改成我们自己想要修改的名字,便于后期管理

目前为止我们只是创建的一个最基本的滚动视图视窗,现在还无法进行拖动看效果,因为滚动视图是相对比较复杂的UI控件组合,所以我们后面会慢慢来讲解它到底是如何工作起来的。

二、滚动视图的核心组件UIPanel

我们创建了滚动视图之后,发现它身上自动附带了3个组件,UIPanel,UIScrollView,Rigidbody。其中Rigidbody这个是NGUI为了优化UI被移动等的性能开销而自动附加的,我们的UIPanel和UIScrollView则是核心的组件,他们就构成了滚动视图最基本的窗口。

UIPanel这个组件之前有讲过了,由于这里我们创建的是ScrollView,UIPanel都被设置为契合我们使用的状态如下如图所示

首先是深度Depth直接被设置为了1,可以让它在最上层显示,同时我们可以看到它的Clipping被自动设置为了SoftClip,之前我们讲过这是UIPanel的面板剪辑,也就是UIPanel可以让自己的面板上只剪辑一块区域出来进行显示,这样在剪辑区域之外的UI元件就看不见了。

Clipping一共提供了3种模式 1.None无剪辑模式,这种模式下面,滚动视窗中的物体可以被拖动,但是视窗因为没有剪辑,所以是没有边界,这将可能导致内容被拖出屏幕外再也拖不会来。其实说白一点就是说这个是没有底部的,拖出到屏幕外了就拖不会来了。 2.SoftClip柔和剪辑模式,我们一般都会使用这种模式来制作ScrollView,在这种模式下,Panel将会剪辑一块可视区域出来显示,这个被剪辑出来的区域以外的部分将会被剪辑掉而无法显示出来。那么下面的参数具体什么含义呢?根据字面意思,其实就是控制偏移,中心点,大小,以及边缘柔和度的,具体的我们在Unity中来查看吧。 3.Constrain but don't Clip 这种模式下是指视窗会尽量地包含所有的内容但是不剪辑他们,效果大约等同于有边界,但是边界是全屏,无法完全将内容拖到屏幕外面去,只要在屏幕范围内,都能看到内容,内容并不会被剪辑掉。

三、滚动视图核心组件UIScrollView

刚才我们了解了UIPanel是滚动视图中控制视窗大小的核心组件,而UIScrollView则是滚动视图中控制滚动功能的核心组件,没有UIScrollView组件的视窗是无法进行滚动的,上图就是我们的UIScrollView的内容了,接下来我们来了解一下它参数的含义 (1).ContentOrigin 这是滚动视图所包含的内容的起点,默认设置为左上角 (2).Movement 内容移动方向,就是滚动视图的滚动方向,包含自由方向和自定义方向 (3).DragEffect拖动效果,有三种效果,None,拖到哪里算哪里,手指停下或者离开则视图立刻也会停下;Momentum,就是会有一个惯性的移动,会更加的自然,这样可以让用户较少次或者较小距离的滑动来获取更多的内容更加的方便和自然;MomentumAndSpring,这种方式和上一种很像,不过它有一个区别就是移动到越界的时候会像弹簧一样回到正常的视窗范围。 (4).ScrollWheelFactor滚轮因素的设定,这个值越大,那么滚动就会越灵敏 (5).MomentumAmount动能因素的设定,这个值越大,滑动惯性也就越大,前提当然是DragEffect有动能效果 (6).Restrict Within Panel 选中后拖动将会被限制在Panel内,这个是默认勾选的,如果不勾选这个选项,则将会导致内容被拖动到视窗剪辑部分以外再也无法回来。 (7).CancelDragIfFits当它刚好适合视窗内是,则自动退出拖动 (8)SmoothDragStart 在开始的时候拖动平滑功能,勾选以后我们拖动内容会让速度从0开始变为我们拖动的速度,而不是直接就跳过来,会有一种平滑自然的效果,不然会感觉很生硬。 (9)模拟iOS系统的拖动,这个是一种为了增强拖动体验的选项 (10)给滚动视窗添加滚动条,这个后面我们讲解实际功能的时候会详细给大家来讲解

四、让视图的内容可以被拖动

说了那么多,我们的滑动视图现在都还没正式的使用起来,依然没有看到效果,因为我们现在还不知道怎么样去拖动内容,如果只是填充一些内容进去,我们会发现,及时有ScrollView也无法滑动里面的内容,这是因为需要对ScrollView所包含的内容进行一些配置,这样才能够使他拖动起来。

例如我们这里添加的一个大的背景底板图片,我们现在要让这个底板图片可以被滑动进行浏览,这就是滚动视图的意义所在了。我们选中这一个底版的图片,为其添加一个boxcollider(如果这个还不会的话,那就说明你前面的课程看跳了,回头看吧孩子)

因为大家都知道要响应鼠标事件或者点击事件的话,必须要有boxcollider,然后我们在为其添加一个核心组件DragScrollView,附加方式可以在Inspector面板中单击AddComponet来输入你需要添加的DragScrollView即可找到,添加好了这个组件之后无需进行任何设置,运行游戏时它会自动地去读取父物体中的ScrollView。

然后运行游戏,拖动视窗内的这个地板图片,发现已经可以通过拖动来浏览了,可以拖动的方向则是ScrollView中的Movement选项中设置的图片 。

results matching ""

    No results matching ""