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

原创文章如需转载请注明：转载自雨松MOMO程序研究院本文链接地址: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)表示灰色的小点，它们的位置是需要根据滑动事件而改变的。

 

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

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

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

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

 

historyInit.cs

001 using UnityEngine;
002 using System.Collections;
003 using System.Collections.Generic;
004
005 public class historyInit  :MonoBehaviour
006 {
007
008     //相册列表的每一个item
009     public GameObject prefab;
010     //灰色的小点
011     public GameObject prefabhui;
012     //白色的小点
013     public GameObject prefabbai;
014     //另外一个显示面板
015     //用来放置灰色、白色小点
016     public Transform  ponit;
017     //白色小点的临时对象
018     private GameObject bai;
019
020     //链表，用来记录每一个相册中的一些用户信息
021     List users = new List();
022     //灰色、白色小点下方的起始位置。
023     int start;
024
025     void Start ()
026     {
027         //将当前面板对象储存在全局静态变量中
028         Globe.ListPanel = gameObject;
029         loadSQL ();
030         initItem();
031     }
032
033     //以前是读取数据库
034     //写例子程序就没必要使用数据库了
035     //这里直接写4个死值，当然数量是灵活使用的
036
037     void loadSQL ()
038     {
039         //表示一共向U3D世界中添加横向4个相册队列
040         for(int i =0; i< 4; i ++)
041         {
042             //简单的对象储存
043             string  name =  "momo =" + i;
044             string  age =  "26 = " + i;
045             string  height = "183 ="+ i;
046             users.Add(new UserData(name,age,height));
047         }
048
049     }
050
051     void initItem()
052     {
053         //因为下方灰色 白色的小点需要根据相册列表的数量来计算居中显示
054         int size = users.Count;
055         //乘以16表示计算所有小点加起来的宽度
056         int length = (size - 1) * 16;
057         //得到下方灰色 白色 小点的居中起始位置
058         start = (-length) >>1;
059
060         for(int i=0; i< size; i++)
061         {
062             //把每一个相册加入相册列表
063             GameObject o  =(GameObject) Instantiate(prefab);
064             //设置这个对象的父类为 当前面板
065             o.transform.parent = transform;
066             //设置相对父类的坐标，这些值可根据自己的情况而设定，
067             //总之就是设置相册列表中每一个item的坐标，让它们横向的排列下来就行
068             o.transform.localPosition = new Vector3(25 + i* 243,-145f,-86f);
069             //设置相对父类的缩放
070             o.transform.localScale= new Vector3(0.7349999f,0.66f,0.7349999f);
071
072             //得到每一个user的信息
073             UserData data = users[i];
074             //遍历每一个相册对象的子组件，
075             UILabel []label = o.GetComponentsInChildren();
076             //拿到UILabel并且设置它们的数据
077             label[0].text = data.age;
078             label[1].text = data.height;
079             label[2].text = data.name;
080
081             //把每一个灰色小点加入3D世界
082             GameObject hui  =(GameObject) Instantiate(prefabhui);
083             //设置灰色小点的父类为另外一个面板
084             hui.transform.parent = ponit;
085             //设置每一个灰色小点的位置与缩放，总之让它们居中排列显示在相册列表下方。
086             hui.transform.localPosition = new Vector3(start + i* 16,-120f,0f);
087             hui.transform.localScale= new Vector3(8,8,1);
088
089             //深度 因为是先在屏幕下方绘制4个灰色的小点， 然后在灰色上面绘制白色小点
090             //表示当前的窗口ID 所以深度是为了设置白色小点在灰色小点之上绘制
091             hui.GetComponent().depth = 0;
092         }
093
094         //下面的数据是把当前初始化的数据放在一个static类中
095         //在Move脚本中就可以根据这里的数据来判断了。
096         //滑动列表的长度
097         Globe.list_count = size -1;
098         //相册每一项的宽度
099         Globe.list_offset = 243;
100         //当前滑动的索引
101         Globe.list_currentIndex = 0;
102         //点击后打开的新游戏场景
103         Globe.list_go_name= "LoadScene";
104
105         //把白色小点也加载在3D世界中
106         bai  =(GameObject) Instantiate(prefabbai);
107         //设置它的深度高于 灰色小点，让白色小点显示在灰色小点之上
108         bai.GetComponent().depth = 1;
109         //设置白色小点的位置
110         setBaiPos();
111     }
112
113     void Update()
114     {
115         //当用户滑动界面
116         //在Update方法中更新
117         //当前白色小点的位置
118         setBaiPos();
119     }
120
121     void setBaiPos()
122     {
123         //Globe.list_currentIndex 就是当前界面的ID
124         //根据ID 重新计算白色小点的位置
125         bai.transform.parent = ponit;
126         bai.transform.localPosition = new Vector3(start + Globe.list_currentIndex* 16,-120f,-10f);
127         bai.transform.localScale= new Vector3(8,8,1);
128
129     }
130 }

 

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

 

 

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

01 using UnityEngine;
02 using System.Collections;
03
04 public class Move : MonoBehaviour {
05
06     //是否触摸
07     bool isTouch = false;
08     //是否向左滑动
09     bool isRight = false;
10     //是否向右滑动
11     bool isLeft = false;
12     //是否正在滑动中
13     bool isOnDrag = false;
14
15     //滑动中事件
16     void OnDrag (Vector2 delta)
17     {
18         //为了避免事件冲突
19         //这里只判断一个滑动的事件
20         if(!isTouch)
21         {
22             if(delta.x > 0.5)
23             {
24                 //向左滑动
25                 isRight = true;
26                 isOnDrag = true;
27             }else if(delta.x < -0.5)
28             {
29                 //向右滑动
30                 isLeft = true;
31                 isOnDrag = true;
32             }
33             isTouch = true;
34         }
35     }
36
37     //滑动后松手调用OnPress事件
38     void OnPress()
39     {
40         //重新计算当前界面的ID
41         if(Globe.list_currentIndex < Globe.list_count && isLeft)
42         {
43             Globe.list_currentIndex++;
44         }
45
46         if(Globe.list_currentIndex >0 && isRight)
47         {
48             Globe.list_currentIndex--;
49         }
50
51         //表示一次滑动事件结束
52         isTouch = false;
53         isLeft = false;
54         isRight = false;
55     }