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中运行就没有任何问题了。

十、最终完美效果图

FairyGUI循环列表相关推荐

FairyGUI进阶-滑动列表虚拟列表循环列表
1.虚拟列表置顶子项居中(初始化) int itemIndex = _list.ChildIndexToItemIndex(midIndex);_selectid = itemIndex;_list. ...
FairyGUI使用——列表居中放大动画
Unity:2021.1.14flc1 FairyGUI:4.2.0 效果图这里的代码基于循环列表的基础上改进的,可以参考FairyGUI使用--循环列表 FairyGUI内部设置 list的大小要 ...
python数据结构与算法：单向循环列表
单向循环列表:python实现,及其对应的增删查检操作 ##################### P4.9-P4.12 循环链表 ########################### #cod ...
【Python基础】Python轻量级循环-列表推导式
概述 Python 列表推导式(list comprehension)利用其他列表创建新的列表,工作方式类似于for循环,使用列表推导式可以快速生成一个列表,或者根据某个列表生成满足指定需求的列表 ...
vue循环如何传参数 php,vue循环列表动态数据的处理方法（代码）
本篇文章给大家带来的内容是关于vue循环列表动态数据的处理方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 调用方法:Vue.set( target, key, value ...
微信小程序实现循环列表下拉功能（点击事件）
在微信小程序里有下拉功能如果循环列表当执行点击事件的时候就会同时执行.下面主要实现了循环列表的点击事件操作.(也有数据里面嵌套数据) wxml <view class="sele ...
用java解决约瑟夫循环问题,Java实现循环列表解决约瑟夫环问题
约瑟夫环:共有n个人围成一圈,从1开始报数,数到m的人出圈,求最后幸运者序号?? 下面用Java实现循环列表解决这个问题: package com.iteye.ljmdbc7a; import jav ...
页面中php传值后循环列表js获取点击的id
页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...
第一个Flutter demo——实现无限循环列表
第一个Flutter demo(一) 参照flutter官网,实现第一个Flutter应用.第一部分:实现无限循环列表第一部分功能介绍: 从零开始创建了一个 Flutter 应用: 编写 Dart ...

FairyGUI循环列表

FairyGUI循环列表

一、导入资源

二、新建按钮

三、设计列表

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

五、打包发布

六、Unity中显示

七、编写代码

八、运行效果

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

十、最终完美效果图

FairyGUI循环列表相关推荐

最新文章

热门文章