制作滚动视图(ScrollView)

怎样判断是否应当使用滚动视图

　　所谓的滚动视图，是指一个可以滑动的视窗，视窗大小和位置固定不变，视窗内的内容用户可以通过手指滑动或者拖动滚动天来进行滚动浏览。

　　滚动视图的目的是为了解决同类内容过多，一个UI版面显示不下的情况。如果同类内容过多，一般可以采取设置多个页面，然后通过翻页浏览的方式来浏览，但是很明显，滚动视图会比翻页更方便，因为在移动上可以很方便地花瓶进行滚动，在PC上可以通过鼠标的滚动进行滚动。

　　当需要判断是否应该使用滚动视图制作UI时，可以遵循以下规律：

　　(1)有很多同类内容一个版面显示不完，却必须要让用户很方便地进行浏览；

　　(2)它的核心目的是方便浏览；

 

创建滚动视图

　　1.第一种方法：使用预设直接创建

　　2.第二种方法：自己拼装

　　　　单击Unity顶部NGUI菜单，选择Create->ScrollView。

 

 

滚动视图核心组件UIPanel

　　(1)在ScrollView被生成时，为了让它能够在上层显示，所以它自动给Panel设定了一个深度，这个深度大小是当前情况下刚好可以显示在最上层的深度，也就是当前UIRoot的UI树中深度最大的Panel的深度+1。

　　(2)它的Clipping被自动设为了SoftClip。

　　Clipping提供了以下模式：

　　　　1.None

　　　　　　无剪辑模式，这种模式下，滚动视图中的物体可以被拖动，但是视窗因为没有剪辑，所以是没有边界的！这将可能导致内容被拖出屏幕外再也拖不回来。

　　　　2.SoftClip

　　　　　　柔和剪辑模式，一般会使用这种模式来制作ScrollView。

　　　　　　在这种模式下，Panel将会剪辑一块可是区域出来显示，这个被剪辑出来的区域以外的部分将会被剪辑掉而无法显示出来。

　　　　　　在柔和剪辑模式下，可以看到以下几个设置项。

　　　　　　　　Offset

　　　　　　　　　　视窗的偏移，以像素为单位，设置这个参数将会导致视窗以Panel的中心点为基准进行偏移。

　　　　　　　　Center

　　　　　　　　　　调整视窗的中心点，效果和Offset一样。

　　　　　　　　Size

　　　　　　　　　　视窗的大小，一般情况下，都需要调整视窗的剪辑窗口的大小，以此来匹配背景底板的大小。如果视窗Size比底板大，将会导致视窗内容会滑动出底板的边框，如果比底板小，则会导致视窗内容滑动还没有到底板边缘就已经被剪辑掉消失了。

　　　　　　　　Softness

　　　　　　　　　　剪辑边缘的柔和程度，视窗中，内容被拖动到边缘部分时，会有一个渐隐的效果。如果这个Softness的值设为0，则内容被拖动到边缘时，会被像刀切掉一样被剪辑掉。

　　　　3.Constrain but don't Clip

　　　　　　这种模式下是指视窗会尽量地包含所有内容但是不剪辑它们，效果等同于有边界但是边界为全屏，无法完全将内容拖到屏幕外面去，只要在屏幕范围内，都能看到内容，内容并不会被剪辑掉。

 

滚动视图核心组件UIScrollView

　　UIPanel是滚动视图中控制视窗大小的核心组件，而UIScrollView则是滚动视图中控制滚动功能的核心组件没有UIScrollView组件的视窗是无法进行滚动的。　　

　　1.ContentOrigin

　　　　这是滚动视图所包含的内容的起点，默认设置为左上角。

　　2.Movement

　　　　滚动视图的滚动方向，也就是内容的移动方向。一共提供了4种方式。

　　　　　　Horizontal

　　　　　　　　水平方向拖动，也就是左右。

　　　　　　Vertical

　　　　　　　　竖直方向拖动，也就是上下。

　　　　　　Unrestricted

　　　　　　　　自由拖动。

　　　　　　Custom

　　　　　　　　自定义方向，会弹出新的X和Y设置框，可以通过对X、Y的设置来定义一个特殊的方向。

　　3.Drag Effect

　　　　拖动效果。里面提供了3种效果。

　　　　　　None

　　　　　　　　无效果，拖到哪算哪。手指停下或者离开屏幕的一瞬间视图内容也停下了。

　　　　　　Momentum

　　　　　　　　带动能的拖动，也就是有一个惯性，当我们手指松开时，视窗内容还会继续朝之前的方向滑动一会儿，中途如果遇到边界才会立即停下，否则会等惯性没了才会自动停下。这种效果主要目的是让用户用最少的操作来滑动视图内容。

　　　　　　MomentumAndSpring

　　　　　　　　动能和弹性兼备的一种方式，这种方式和上一种动能方式很相似，区别在于，在这种方式下，当滑动内容拖到了视窗边界时，它可以被继续拖动“越界”，在松开手指时立即像弹簧一样弹回并回到正常视窗范围内。

　　4.Scroll Wheel Factor

　　　　滚轮因素的设定，这个值越大鼠标滚轮的滚动就会越灵敏。

　　5.Momentum Amount

　　　　动能因素的设定，这个值越大，滑动时的惯性就越大(前提是Drag Effect有动能效果)。

　　6.Restrict Within Panel

　　　　选中后拖动将会被限制在Panel内，这个是默认勾选的。如果不勾选这个选项，则将会导致内容被拖到视图的剪辑部分以外再也无法回来。

　　7.Cancel Drag If Fits

　　　　当它刚好适合视窗内时，则自动退出拖动。

　　8.Smooth Drag Start

　　　　在开始的时候拖动平滑，勾选上后，拖动时内容有一个速度从0变到拖动的那个速度的一种平滑自然的效果。如果不勾选，在开始滑动时，内容会瞬间与手指的速度一样，就像黏在手指上了一样，体验比较差劲。

　　9.IOS Drag Emulation

　　　　模拟iOS系统的拖动效果。这也是一种为了增强拖动体验的选项。

　　10.ScrollBars

　　　　为滚动视窗指定拖动条。这个设置是非必选项，可以设置也可以不设置，不设置的话滚动视窗一样能正常工作，因为在移动设备上，我们可以用手指滑动，在PC上可以通过按住鼠标键不放来拖动，而拖动条，可以理解为拖动的进度条。

　　　　拖动条一共可以指定两个，一个水平的、一个竖直的。

　　　　在Show Condition中设定拖动条出现的规则，有以下3中规则可选。

　　　　　　Always

　　　　　　　　不管什么情况，滑动条总是出现。

　　　　　　OnlyIfNeed

　　　　　　　　只有当需要的时候出现。即内容在滚动视窗内显示不完的时候，就会出现，如果在视窗内不需要拖动就可以看到全部内容，则不需要出现。

　　　　　　WhenDragging

　　　　　　　　当拖动时出现。只要拖动内容，它就一定会出现。

 

创建一个拖动条

　　 1.通过WidgetWizard(Legacy)创建

　　在Unity顶部NGUI菜单，选择Open选项，打开WidgetWizard(Legacy)。

　　在这个界面中，设定好图集和字体(如无需要可以不设定)后，在Template中选择ScrollBar，然后在Background中谁的那个它的底板的Sprite，在Foreground中设定拖动块的Sprite，在Direction中设定它的滑动方向。

　　2.通过PrefabToolBar创建

　　3.自己组装一个拖动条

　　拖动条具有以下特点：

　　　　(1)有一个底板槽来显示可以拖动的范围；

　　　　(2)有一个滑动块，可以在范围内滑动；

　　　　通过对比可以发现拖动条和进度条的区别：拖动条就是一个缺少表层进度条的可拖动进度条。

 

拖动条说明

　　(1)ScrollBar和UISlider创建的滑动条从本质上说工作原理是一模一样的。

　　(2)推荐使用UISlider，也就是制作进度条的方式来制作滑动条。

　　(3)滑动条就是一个没有Foreground的UISlider。

 

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

　　 为视图内的内容Attach一个BoxCollider，因为，既然需要拖动视图内的内容来查看，就必须让视图内的能接收到拖动事件，所以一定得有一个BoxCollider。

　　 为视图内的内容附加一个核心组件：Drag ScrollView，附加方式可以在Inspector面板中单击AddComponent->NGUI->Interaction->Drag ScrollView。添加好组件之后无需进行任何设置，运行游戏时它会自动地去读取父物体中ScrollView。

　　运行游戏，已经可以拖动视窗内的内容。

 

制作滚动视图时的注意事项

　　(1)通常情况下，滚动视图一定要有一个UIPanel来进行窗口编辑。这个UIPanel组件在创建ScrollView时会自动生成。

　　(2)拖动条对于滚动视图来说可有可无，没有它的滚动视图也能通过移动设备的触屏和PC设备的鼠标光标来进行滚动。

　　(3)滚动视图内包含的内容，一定要有一个BoxCollider，否则无法接受事件。

　　(4)滚动视图内包含的内容，一定要有一个DragScrollView组件，这个组件会和ScrollView相互作用，在运行时，它会自动去找到父物体中的ScrollView，然后和它相互作用，让视图内的内容可以被滚动起来。

　　(5)滚动视图的内容，最好放到创建的ScrollView节点下面作为子物体存在，这个可以免去大量的烦恼和隐患。

　　(6)滚动视图的滚动方向不要弄错了。

　　(7)滚动视图的剪辑窗口的尺寸一定要调整到位，尽量别去调整Clip的Center。

转载于:https://www.cnblogs.com/-soy/p/5875676.html