Unity3D实现分页系统
程序员文章站
2022-06-09 10:12:11
在有些情况下,有很多列表不能一次性显示完整,需要对其进行分页处理博主自己也写了一个分页系统,在这里记录下来,方便以后直接拿来使用这篇文章demo也将上传给大家下载参考:先展示下效果图:·效果图一·效果...
在有些情况下,有很多列表不能一次性显示完整,需要对其进行分页处理
博主自己也写了一个分页系统,在这里记录下来,方便以后直接拿来使用
这篇文章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上
最后需要将条形框回车事件绑定上去
这样一个完成简单分页系统
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。