FairyGUI循环列表

FairyGUI循环列表

实现效果：在Unity中，通过鼠标可以循环浏览列表，并且浏览当前页时，有一个近大远小的效果。

一、导入资源

二、新建按钮

三、设计列表

四、装载器动态加载图片按钮

如果有上万个按钮，我们不可能一个个创建，这时候就需要在Unity中动态加载图片按钮的资源，故此引入装载器。

按钮大小是248×378，那么装载器也应该是248×378。然后将其位置归为0，0。


再次进入列表，给它多添加几个对象。

五、打包发布

六、Unity中显示

七、编写代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class LoopList : MonoBehaviour
{
    
    private GComponent mainUI;
    private GList list;
    void Start()
    {
    
        mainUI = GetComponent<UIPanel>().ui;
        list = mainUI.GetChild("n0").asList;  //n0是FairyGUI中的列表
        list.SetVirtualAndLoop();  //把列表设置为虚拟列表（FGUI规定：如果使用列表，则必须使用虚拟列表）
        list.itemRenderer = RenderListItem;  //调用list里面的渲染函数，它是一个委托类型的变量，所以要给它赋值一个方法
        list.numItems = 5;  //设置列表长度
    }
    
    private void RenderListItem(int index, GObject obj)
    {
    
        GButton button = obj.asButton;
        button.icon = UIPackage.GetItemURL("LoopList", "n" + (index + 1));  //动态获取URL
    }
}

编译运行，回到Unity发现报错。原来在FairyGUI中忘记拖入项目资源了，手动拖入即可。


再次重新发布一下

此时，回到Unity，运行结果如下。发现“第二章”、“第三章”下边的图片都是“第一章”下边的图片。什么原因呢？因为之前我们在FairyGUI中给了Button1一个渲染，显然这是不可以的。所以我们要把它本身的图片渲染给删掉。直接通过icon对它加载就可以了。



还有一个地方就是，找到LoopList列表，把它的溢出处理设置为“水平滚动”。

再次发布，运行一切正常。

八、运行效果

九、进一步完善——近大远小的特效

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;

public class LoopList : MonoBehaviour
{
    
    private GComponent mainUI;
    private GList list;
    void Start()
    {
    
        mainUI = GetComponent<UIPanel>().ui;
        list = mainUI.GetChild("n0").asList;  //n0是FairyGUI中的列表
        list.SetVirtualAndLoop();  //把列表设置为虚拟列表（FGUI规定：如果使用列表，则必须使用虚拟列表）
        list.itemRenderer = RenderListItem;  //调用list里面的渲染函数，它是一个委托类型的变量，所以要给它赋值一个方法
        list.numItems = 5;

        list.scrollPane.onScroll.Add(DoSpecialEffect);
        DoSpecialEffect();
    }

    private void DoSpecialEffect()
    {
    
        float listCenter = list.scrollPane.posX + list.viewWidth / 2;
        //scrollPane是当前列表的宽度；viewWidth是列表自身宽度
        for (int i = 0; i < list.numChildren; i++)  //numChildren是当前渲染的对象，也就是运行时Game中能看见的个数
        {
    
            GObject item = list.GetChildAt(i);
            float itemCenter = item.x + item.width / 2;
            float itemWidth = item.width;
            float distance = Mathf.Abs(listCenter - itemCenter);
            if (distance < itemWidth)
            {
    
                float distanceRange = 1 + (1 - distance / itemWidth) * 0.2f;
                item.SetScale(distanceRange, distanceRange);
            }
            else
            {
    
                item.SetScale(1, 1);
            }
        }
    }
    private void RenderListItem(int index, GObject obj)
    {
    
        GButton button = obj.asButton;
        button.SetPivot(0.5f, 0.5f);  //设置锚点为中心位置
        button.icon = UIPackage.GetItemURL("LoopList", "n" + (index + 1));  //动态获取URL
    }
}

将列表和按钮分别与容器做一下关联

发布后在Unity中运行就没有任何问题了。

十、最终完美效果图