Unity3D基础学习 NGUI Example 7-Scroll View(Panel)制作固定包裹栏，点击传递参数显示物体

最终效果如下：

实现ScrollView主要是NGUI的三个脚本“UIDraggable Panel”，“UIGrid”，“UIDrag Panel Contents”

1.首先创建一个UIRoot 2D

更改Anchor为Anchor-Left，并设置UIAnchor的Side属性为Left；

2.在Panel 添加一个Panel，并命名为ClippedPanel；添加脚本UIDragpanel

 

3.建立ScrollView表格：在ClippedPanel中新建子物体（快捷键：Shift+Alt+N），命名为Grid，并添加UIGrid脚本，Compoent>NGUI>INteraction>Grid

4.添加需要显示滚动的子物体，在UIGrid下新建子物体，Item，在Item下添加Sprite，并在Item添加Drag Panel Contentst脚本，Compoent>Ngui>Interation >Drag Panel contents

然后NGUI — Attach a Collider。这里是很重要的，如果不Attach a Collider，将不会收到拖动的事件。然后Ctrl+D 复制粘贴几个Item，点击运行，Grid就会自动把Item排列，如下图，然后选中所有Item，缩放他们的大小，然后更改UIGrid中Cell Height和Cell Width的大小，是他们互相适应，什么意思大家都懂得。

现在运行，就发现很简单的ScrollView就出来了。

5，更改UIGrid布局，因为是横向滑动，与我们的要求不符，更改UIGrid中Arrangment属性，为Vertical，点击Repostion Now ，你就发现图标全部纵向排列了，

再更改Max Per Line属性，该属性的意思是一行最多几个子对象（当你排列方式为横向时），或者一列最多几个子对象（当你排列方式为纵向时）。

我们输入6，点击Reposition Now ，就会发现排列方式如下：

显示的的确是6行，当到达6行时，另起一列。

6，更改滑动方向，当你运行时，你会发现，怎么我把排列方式设为纵向，它还是横向滑动，没错，这时我们需要修改UIDraggablePanel属性，选中ClippedPanel，修改Scale属性X=1，在X轴方向左右移动，Y=1，在Y轴方向上下移动，Z=1，呵呵，没效果，可能是因为我们建的是2DNGUI的缘故。把Scale值设为0,1,0，点击运行，此时就会发现Item跟着鼠标点击上下滑动。

7，修改ClippedPanel,设定滑动范围。我们会发现，Item会随着我们鼠标随意上下翻滚，没有界限，一直到所有Item全部消失，这种效果绝对不行。

选中ClippedPanel，修改Clipping属性为SoftClip，并修改其他位置，中心等属性，使之与Grid相适应，也适当修改UIGrid的位置

.Clipping就是对当前Panel进行裁剪，设置裁剪后显示的区域，使之滚动区域和滚动表格相符合。运行一下，就会看到基本雏形。

9，制作背景，和滚动条。完善一下这个滚动视图，在panel下新建一个Panel，命名为UIPanel，添加一个Sprite命名为Background

卧槽，不知道怎么回事，出现个好严重的ＢＵＧ了，先写到这

。。。

SHIT不知道是我改了什么，NGUi全乱了，自带的Demo也显示的不正常，重新导入NGUI也不行，最后把Unity卸了，还不想你跟，把注册表删干净了，重装一遍才正常，无语啊！！！！！！！！！！！！

接着说

9，制作背景，和滚动条。完善一下这个滚动视图，在panel下新建一个Panel，命名为UIPanel，新建子物体为BackGround,在他下面再添加两个Sprite，制作背景图片和前景图片，随便选两张，效果如图

再在UIPanel下添加一个Scroll Bar，与Background同级，默认是横向的更改Direction为纵向，放到Grid右边，然后选择ClippedPanel让他与Scrollbar 关联。把Scroll Bar整个拖到UIDragglepanel的Vertical Scrollbar上，那么选择如图

，如果你绑定的是纵向滑杆，那选择Horizontal ScrollBar。

点击运行，查看效果。

或许你会发现，滑动鼠标滚轮时效果怎么不对，方向是反的，我是遇到这样情况，第一种方法把Scroll Wheel Factor改成1，第二种方法，找到NGUi自带脚本，UIDraggablePanel，找到Scroll函数

这是相应鼠标滚轮的函数，将mScroll +=改为-=，如图，即可

对了，如果想让鼠标滑过Item有效果的话，添加UIButton Scale脚本，点击运行。

好的，前期UI工作做完，接下来是后台代码了。

首先说说思路，点击Item，获取当前点击的Item是哪个，传给需要显示物体的方法，根据传来的参数，显示物体。

首先在每个Item上都添加UIButtonMessage脚本 Compoent>NGUI>Interation>ButtonMessage,用于发送传递信息

在场景中新建一个Cube，用于接收传递参数的对象。将Cube拖到UIButton Message中的Target上，functionname自定义，看你在Cube上接收函数是什么就是什么

说一下让鼠标显示当前Item图片的方法。

 string showObjName;//接受UI传来的要显示物体的名字

UISprite sprite;//当前传递的Sprite：
   GameObject  lastSpriteObj=null;

 /// <summary>
    /// 接受点击的Sprite信息，显示对象
    /// </summary>
    /// <param name="obj">点击的按钮对象</param>
    void showObject(GameObject obj)
    {
                    if (obj.GetComponentInChildren<UISprite>().enabled)//如果当前点击的是已显示的Sprite按钮
            {
                if (lastSpriteObj != null)//如果不是第一次传值
                {
                    if ((obj != lastSpriteObj)&&(sprite!=null))//如果本次传值与上次传值不同并且当前Sprite不等于空
                    {
                        lastSpriteObj.GetComponentInChildren<UISprite>().enabled = true;//显示上次点击的Sprite
                     
                    }
                }
                sprite = obj.GetComponentInChildren<UISprite>();//获得传来的对象的子物体组件<UISprite>
                UICursor.Set(sprite.atlas, sprite.spriteName);//设置鼠标图片
                obj.GetComponentInChildren<UISprite>().enabled = false;//隐藏本次点击的sprite
                readyCreate = true;
                lastSpriteObj = obj;
                

            }
            else//如果当前点击的是不显示的Sprite
            {
                if (sprite == null)//如果当前Sprite为空，即已经实例化了物体
                {
                    return;
                }
                else
                {
                    if (obj == lastSpriteObj)
                    {
                        readyCreate = false;
                        obj.GetComponentInChildren<UISprite>().enabled = true;
                        UICursor.Clear();
                        return;
                    }
                }
            }
           }

主要就是通过传来的GameObject信息，获得他的子控件中是UISprite名字的控件，通过NGUI自带的类UICursor.Set()来设置 ，还有判断当前鼠标点击对应Item的Sprite时，隐藏Item上的Sprite，当本次点击与上次点击不符时，隐藏本次Item上的Sprite，显示上次点击的Item上的Sprite。