首页 > Unity3D频道 > 【NGUI研究院之Unity插件】 > NGUI研究院之自制 Scroll View实现触摸滚动相册效果(四)
2012
07-10

NGUI研究院之自制 Scroll View实现触摸滚动相册效果(四)

         MOMO与图灵合作的《Unity 3D游戏开发》没想到开售不到1个月就售罄了,心里实在是太高兴了。不过高兴归高兴,学习生活工作我是不能耽误的,加油哇咔咔。 NGUI系列的文章在上一章提到的活灵活现ListView相信大家已经熟练掌握,但是这些是满足不了程序猿的欲望的,哇咔咔~~NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处。但是NGUI提供的Scroll View很难实现类似Android 与 IOS 中的Scroll View 滚动相册的那种效果,至少MOMO没有很快的找到方法,不过程序猿的力量是伟大无穷的。虽然不能用它提供的API做出来,但是我们可以通过另外的手打巧妙的实现。不用担心MOMO会在这篇文章仔细向大家介绍如何实现自制Scroll View实现滚动相册。

        如下图所示,这是我们的工程页面,程序的实现原理是将相册在Unity3D世界中呈横向队列,摄像机固定的照射在第一个Item相册,当手指发生滑动事件时,计算向左滑动还是向右滑动,此时整体移动相册队列,而摄像机不动。为了让滑动效果更加好看我们需要使用插值计算滑动的时间,使滑动队列不是直接移动过去,而是以一定惯性移动过去。相册下方我们制作一个小白点用来记录当前滑动的位置,在做几个灰色的点表示队列一共的长度,滑动时下方的小白点也会跟随移动,这样就更想高级控件啦。当然小白点与小灰点是要根据item的数量居中显示的喔。

注解1:滚动相册一般可分为两种,第一种为数量已知的情况,第二种为数量未知的情况。因为第一种比较简单所以我们主要探讨第二种。

Script historyInit.cs: 该脚本用于相册队列的初始化工作。在这里初始化相册队列的数量,计算完毕让队列以横向线性的排列方式在Unity3D中。

Prefab item:每个相册的预设,我这里每个相册上还会有一些文字的描述,我需要动态的修改它们的内容。大家也可根据自己的情况制作自己的相册item。

Prefabhui:相册滚动时下方用来记录相册队列总数的灰色小点。

Prefabbai :相册滚动时下方用来记录当前滚动页面ID的白色小点。

Point :因为灰色、白色的点不能和相册队列在一个面板之上,否则会跟着相册队列移动而移动,所以这里将灰色白色的点放在两外一个面板之上。

注解2:这个面板上的4个item就是我们通过historyinit脚本初始化时动态生成赋值的、当界面发生触摸事件时,会整体移动该面板让自对象的相册队列跟随移动。

注解3:button0 – button3 是下方的Tabar。bai(Clone)表示白色的小点,hui(Clone)表示灰色的小点,它们的位置是需要根据滑动事件而改变的。

NGUI研究院之自制 Scroll View实现触摸滚动相册效果(四) - 雨松MOMO程序研究院 - 1

 

因为我们需要监听每一个Item的滑动事件,所以肯定要在每一个item预设之上绑定监听事件的脚本,如下图所示。

注解1:因为需要监听触摸滑动事件,所以肯定要绑定Box Collider组件,这个是NGUI的标准用法。

注解2:Move脚本用来监听向左滑动 向右滑动 点击事件。

注解3:这个就是每一个相册的item,在上图中挂在historyInit脚本之上。

NGUI研究院之自制 Scroll View实现触摸滚动相册效果(四) - 雨松MOMO程序研究院 - 2

 

historyInit.cs

 

如下图所示,我们可以看出Tabbar 、 下方记录界面的灰色、白色小点、摄像机  它们是不会发生改变的。唯一改变的就是面板之上的相册队列。为了让滑动界面的效果更加连贯,我们需要以插值的形式来计算真个相册面板的坐标。

 

NGUI研究院之自制 Scroll View实现触摸滚动相册效果(四) - 雨松MOMO程序研究院 - 3

 

触摸的事件全都写在Move.cs脚本中。

 

还有两个辅助的类,我也贴出来。

UserData.cs

 

Globe.cs 这个静态类用来共享记录多个脚本甚至多个场景所需的数据。

 

写到这里,本篇博文就写的差不多了。这篇文章我是用NGUI来实现的触摸滚动效果,仔细想想,其实不用NGUI完全也能实现这样的效果。在脚本中完全可以通过射线 以及 触摸的时间去计算当前用户操作的事件,这篇文章里的工程最后我是打包在Android上面的,效果挺不错,滑动的效果图不好截取我也不截取了,主要还是文章的书写内容,希望大家学习愉快,雨松MOMO祝大家晚安,哇咔咔,啦啦啦。

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

  1. 请问item(clone)和hui(clone)是什么啊?他们是什么类型的GameObject?而且希望能求到工程源文件,麻烦发到214137022@qq.com,谢谢了。。。

  2. 我也购买了博主大人的《unity3d 游戏开发》,真是入门的好教材,谢谢博主大人!另外博主大人这篇ScrollView的完整工程能发给我看一下吗?我的邮箱是m_iSnow@hotmail.com再次感谢!

  3. 请问如果scrollview的范围设置得比较大,但是里面的内容比较少,就会造成内容显示在区域中央,有没有方法当内容不够的时候,让内容显示在顶部?

    • 修改UIPanelpublic bool isTop=false;public Vector3 CalculateConstrainOffset (Vector2 min, Vector2 max) { float offsetX = clipRange.z * 0.5f; float offsetY = clipRange.w * 0.5f; Vector2 minRect = new Vector2(min.x, min.y); Vector2 maxRect = new Vector2(max.x, max.y); Vector2 minArea = new Vector2(clipRange.x – offsetX, clipRange.y – offsetY); Vector2 maxArea = new Vector2(clipRange.x + offsetX, clipRange.y + offsetY); if (clipping == UIDrawCall.Clipping.SoftClip) { minArea.x += clipSoftness.x; minArea.y += clipSoftness.y; maxArea.x -= clipSoftness.x; maxArea.y -= clipSoftness.y; } Vector2 v2 =NGUIMath.ConstrainRect(minRect, maxRect, minArea, maxArea); if(isTop&&(max.y-min.y)

  4. 看了你的书,但觉得自己还处于一个小小有基础的人,这个能给个源代码吗,谢谢谢。我的邮箱1975209805@qq.com

  5. 哈哈 在半个月前才入手一本momo的《unity3d 游戏开发, 看了下, 感觉不错。 还没有看完呢,最近工作上比较忙,没有花太多心思去看了,现在真怕积极性不够。有点担心自己….

  6. momo大神,可以共享Scroll View 滚动相册源文件参考吗。看不明白的地方可以参看源文件。或是发我邮箱258049898@qq.com

  7. 雨松老师,我制作了一个单体建筑模型旋转一周的序列贞动画。我怎么实现NGUI触摸右拖是正放动画,左拖是倒放动画,没拖动就停止播放,从来达到模拟三维模型旋转浏览。我也是刚看你的教程开始学的,但是自己做这个还是有很多地方不明白,老师能单独出个教程就好了,谢谢你。

  8. 早买你的书了,都看完了。能再出本进阶 提高的书吗。 我加你Q了,我自己做东西,老是有些东西想不明白,希望能指点一下,非常感谢 雨松老师

  9. 雨松老师能发个这个滚动相册的U3D包么,我是初学者看起还是有点模糊,想看看具体的会清楚点