欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Unity3D实现分页系统

程序员文章站 2022-06-09 10:12:11
在有些情况下,有很多列表不能一次性显示完整,需要对其进行分页处理博主自己也写了一个分页系统,在这里记录下来,方便以后直接拿来使用这篇文章demo也将上传给大家下载参考:先展示下效果图:·效果图一·效果...

在有些情况下,有很多列表不能一次性显示完整,需要对其进行分页处理

博主自己也写了一个分页系统,在这里记录下来,方便以后直接拿来使用

这篇文章demo也将上传给大家下载参考:

先展示下效果图:

Unity3D实现分页系统

·效果图一

Unity3D实现分页系统

·效果图二

总的来说,要考虑到的逻辑情况还是有点的

工程目录结构如下图:

Unity3D实现分页系统

在每个uipage下有一个image框,用来编辑当前是那一页,默认activate=false

整个思路是当点击uipage获取里面的页数数值,根据这个数值刷新下uipage的text值

在确定哪个uipage下的image的activate为true

将以下脚本组件挂载到uipage上

using system.collections;
using system.collections.generic;
using unityengine;
using unityengine.eventsystems;
using unityengine.ui;
 
public class uipage : eventtrigger
{
 public image image = null;
 public image getimage
 {
 get
 {
 if (image = null)
 {
 image = this.transform.getchild(0).getcomponent<image>();
 }
 return image;
 }
 set
 {
 image = value;
 }
 }
 
 public text text = null;
 public text gettext
 {
 get
 {
 if (text = null)
 {
 text = this.transform.getchild(1).getcomponent<text>();
 }
 return text;
 }
 set
 {
 text = value;
 }
 }
 
 
 //点击ui_page
 public override void onpointerclick(pointereventdata eventdata)
 {
 if (this.transform.getchild(1).getcomponent<text>().text == "..." || this.transform.getchild(1).getcomponent<text>().text == "")
 {
 return;
 }
 
 pagegrid pg = pagegrid.getinstance;
 
 //如果点击的是前面几个ui(点击的是1-5)
 if (int.parse(this.transform.getchild(1).getcomponent<text>().text) < pagegrid.getinstance.uipagearray.length)
 {
 string text = this.transform.getchild(1).getcomponent<text>().text;
 
 //更新显示
 pagegrid.getinstance.upadateuipagefromhead();
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(text);
 if (uipage)
 {
 pagegrid.getinstance.activatuipageimage(this.gameobject);
 }
 }
 //点击最后几个(点击的是最后4个)
 else if (int.parse(this.transform.getchild(1).getcomponent<text>().text) >= pagegrid.getinstance.maxpageindex - 3)
 {
 string text = this.transform.getchild(1).getcomponent<text>().text;
 
 //更新显示
 pagegrid.getinstance.updateuipagefromend();
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(text);
 if (uipage)
 {
 pagegrid.getinstance.activatuipageimage(uipage.gameobject);
 }
 }
 else
 {
 string text = this.transform.getchild(1).getcomponent<text>().text;
 
 //更新显示
 pagegrid.getinstance.updateuipagefrommiddle(text);
 
 /*由于数字向后移动,故image显示位置不需要改变*/
 }
 }
}

在做完了uipage的点击事件后,需要实现页面跳转(左右按钮的点击实际也是一个跳转)

using system.collections;
using system.collections.generic;
using unityengine;
using unityengine.ui;
 
/// <summary>
/// 管理uipage
/// </summary>
public class pagegrid : monobehaviour
{
 //在初始化时最大的页数
 public int maxpageindex = 100;
 
 
 [hideininspector]
 public uipage[] uipagearray { get; set; }
 
 private static pagegrid _instance;
 public static pagegrid getinstance
 {
 get
 {
 if (_instance == null)
 {
 _instance = gameobject.findgameobjectwithtag("pagegrid").getcomponent<pagegrid>();
 }
 
 return _instance;
 }
 }
 
 private void start()
 {
 //获取其子节点uipage组件
 uipagearray = this.getcomponentsinchildren<uipage>();
 
 //初始化子节点ui显示
 upadateuipagefromhead();
 }
 
 /// <summary>
 /// 在uipage上更新
 /// </summary>
 public void upadateuipagefromhead()
 {
 //从一开始计数
 int headpageindex = 1;
 
 int n_pageheadindex = headpageindex;
 
 //页数大于uipage数(大于6)
 if (maxpageindex > uipagearray.length)
 {
 foreach (var item in uipagearray)
 {
 //倒数第二个
 if (headpageindex - n_pageheadindex == uipagearray.length - 2)
 {
  item.transform.getchild(1).getcomponent<text>().text = "...";
 }
 //倒数第一个
 else if (headpageindex - n_pageheadindex == uipagearray.length - 1)
 {
  item.transform.getchild(1).getcomponent<text>().text = maxpageindex.tostring();
 }
 else
 {
  item.transform.getchild(1).getcomponent<text>().text = headpageindex.tostring();
 }
 
 headpageindex++; 
 }
 }
 //页数等于uipage数
 else if (maxpageindex == uipagearray.length)
 {
 foreach (var item in uipagearray)
 {
 item.transform.getchild(1).getcomponent<text>().text = headpageindex.tostring();
 
 headpageindex++;
 }
 }
 else
 {
 for (int i = 0; i < maxpageindex; i++)
 {
 uipagearray[i].transform.getchild(1).getcomponent<text>().text = headpageindex.tostring();
 
 headpageindex++;
 }
 }
 }
 
 
 /// <summary>
 /// 在uipage上更新
 /// </summary>
 public void updateuipagefromend()
 {
 //页数大于uipage数(大于6)
 if (maxpageindex > uipagearray.length)
 {
 int count = maxpageindex;
 for (int i = uipagearray.length - 1; i > 0; i--)
 {
 if (i == 0)
 {
  uipagearray[i].transform.getchild(1).getcomponent<text>().text = "1";
 }
 else if (i == 1)
 {
  uipagearray[i].transform.getchild(1).getcomponent<text>().text = "...";
 }
 else
 {
  uipagearray[i].transform.getchild(1).getcomponent<text>().text = count.tostring();
  count--;
 }
 }
 }
 else
 {
 int count = 1;
 for (int i = 0; i < maxpageindex; i++)
 {
 uipagearray[i].transform.getchild(1).getcomponent<text>().text = count.tostring();
 count++;
 }
 }
 }
 
 /// <summary>
 /// 在uipage中间更新
 /// </summary>
 public void updateuipagefrommiddle(string number)
 {
 int count = int.parse(number);
 for (int i = 0; i < uipagearray.length; i++)
 {
 if (i == 0)
 {
 uipagearray[i].transform.getchild(1).getcomponent<text>().text = "1";
 }
 else if (i == 1 || i == uipagearray.length - 2)
 {
 uipagearray[i].transform.getchild(1).getcomponent<text>().text = "...";
 }
 else if (i == uipagearray.length - 1)
 {
 uipagearray[i].transform.getchild(1).getcomponent<text>().text = maxpageindex.tostring();
 }
 else
 {
 uipagearray[i].transform.getchild(1).getcomponent<text>().text = count.tostring();
 count++;
 }
 }
 }
 
 
 
 //需要和服务器交互todo
 public void activatuipageimage(gameobject uipage)
 {
 //将全部uipage的image取消激活
 foreach (var item in uipagearray)
 {
 item.transform.getchild(0).gameobject.setactive(false);
 }
 
 uipage.transform.getchild(0).gameobject.setactive(true);
 }
 
 /// <summary>
 /// 按文本内容查询
 /// </summary>
 /// <param name="text"></param>
 public uipage finduipagewithtext(string text)
 {
 foreach (var item in uipagearray)
 {
 if (item.transform.getchild(1).getcomponent<text>().text == text)
 {
 return item;
 }
 }
 
 return null;
 }
 
 private uipage finduipagewithimage()
 {
 foreach (var item in uipagearray)
 {
 if (item.transform.getchild(0).gameobject.activeinhierarchy)
 {
 return item;
 }
 }
 
 return null;
 }
 
 
 /// <summary>
 /// 页面跳转
 /// </summary>
 public void jumppage()//这里用于输入框回车事件
 {
 //获取输入信息
 string number = gameobject.findgameobjectwithtag("pageinputfield").getcomponent<inputfield>().text;
 if (string.isnullorempty(number))
 {
 return;
 }
 
 
 //查询前面几个ui(点击的是1-4)
 if (int.parse(number) < pagegrid.getinstance.uipagearray.length - 1)
 {
 pagegrid.getinstance.upadateuipagefromhead();
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(number);
 if (uipage)
 {
 gameobject obj = uipage.gameobject;
 
 pagegrid.getinstance.activatuipageimage(obj);
 }
 }
 //查询最后几个(点击的是最后4个)
 else if (int.parse(number) >= pagegrid.getinstance.maxpageindex - 3)
 {
 pagegrid.getinstance.updateuipagefromend();
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(number);
 if (uipage)
 {
 gameobject obj = uipage.gameobject;
 
 pagegrid.getinstance.activatuipageimage(obj);
 }
 }
 else
 {
 updateuipagefrommiddle(number);
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(number);
 if (uipage)
 {
 gameobject obj = uipage.gameobject;
 
 pagegrid.getinstance.activatuipageimage(obj);
 }
 }
 }
 
 
 /// <summary>
 /// 跳转
 /// </summary>
 /// <param name="str"></param>
 public void jumppage(string str)
 {
 //获取输入信息
 string number = str;
 
 
 //查询前面几个ui(点击的是1-4)
 if (int.parse(number) < pagegrid.getinstance.uipagearray.length - 1)
 {
 pagegrid.getinstance.upadateuipagefromhead();
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(number);
 if (uipage)
 {
 gameobject obj = uipage.gameobject;
 
 pagegrid.getinstance.activatuipageimage(obj);
 }
 }
 //查询最后几个(点击的是最后4个)
 else if (int.parse(number) >= pagegrid.getinstance.maxpageindex - 3)
 {
 pagegrid.getinstance.updateuipagefromend();
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(number);
 if (uipage)
 {
 gameobject obj = uipage.gameobject;
 
 pagegrid.getinstance.activatuipageimage(obj);
 }
 }
 else
 {
 updateuipagefrommiddle(number);
 
 uipage uipage = pagegrid.getinstance.finduipagewithtext(number);
 if (uipage)
 {
 gameobject obj = uipage.gameobject;
 
 pagegrid.getinstance.activatuipageimage(obj);
 }
 }
 }
 
 /// <summary>
 /// 页面选择按钮
 /// </summary>
 /// <param name="selection">(向左:-1)( 向右:1)</param>
 public void onbtnright(string selection)
 {
 uipage uipage = pagegrid.getinstance.finduipagewithimage();
 if (uipage)
 {
 //当前页面是最后一页或者是第一页
 if (int.parse(uipage.transform.getchild(1).getcomponent<text>().text) == maxpageindex && selection == "1" || int.parse(uipage.transform.getchild(1).getcomponent<text>().text) == 1 && selection == "-1")
 {
 return;
 }
 else
 {
 //跳转页面
 jumppage((int.parse(uipage.transform.getchild(1).getcomponent<text>().text) + int.parse(selection)).tostring());
 }
 }
 }
}

将该脚本挂载到父节点pagegrid上

Unity3D实现分页系统

最后需要将条形框回车事件绑定上去

Unity3D实现分页系统

这样一个完成简单分页系统

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。