Unity3D实现分页系统

作者: 爱的旋律88
来源: 51数据库
2021-09-21

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

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

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

先展示下效果图：

·效果图一

·效果图二

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

工程目录结构如下图：

在每个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上

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

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

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