Unity3d分页系统

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

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

这篇文章Demo也将上传给大家下载参考:点击打开链接

先展示下效果图:

Unity3d分页系统_第1张图片

·效果图一

Unity3d分页系统_第2张图片

·效果图二


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

工程目录结构如下图:

Unity3d分页系统_第3张图片

在每个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();
			}
			return image;
		}
		set
		{
			image = value;
		}
	}

	public Text text = null;
	public Text GetText
	{
		get
		{
			if (text = null)
			{
				text = this.transform.GetChild(1).GetComponent();
			}
			return text;
		}
		set
		{
			text = value;
		}
	}
	

	//点击UI_Page
	public override void OnPointerClick(PointerEventData eventData)
	{
		if (this.transform.GetChild(1).GetComponent().text == "..." || this.transform.GetChild(1).GetComponent().text == "")
		{
			return;
		}

		PageGrid pg = PageGrid.GetInstance;

		//如果点击的是前面几个ui(点击的是1-5)
		if (int.Parse(this.transform.GetChild(1).GetComponent().text) < PageGrid.GetInstance.uiPageArray.Length)
		{
			string text = this.transform.GetChild(1).GetComponent().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) >= PageGrid.GetInstance.maxPageIndex - 3)
		{
			string text = this.transform.GetChild(1).GetComponent().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;

			//更新显示
			PageGrid.GetInstance.UpdateUIPageFromMiddle(text);

			/*由于数字向后移动,故image显示位置不需要改变*/
		}
	}
}


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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

/// 
/// 管理UIPage
/// 
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();
			}

			return _instance;
		}
	}

	private void Start()
	{
		//获取其子节点UIPage组件
		uiPageArray = this.GetComponentsInChildren();

		//初始化子节点ui显示
		UpadateUIPageFromHead();
	}

	/// 
	/// 在UIPage上更新
	/// 
	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 = "...";
				}
				//倒数第一个
				else if (headPageIndex - n_pageHeadIndex == uiPageArray.Length - 1)
				{
					item.transform.GetChild(1).GetComponent().text = maxPageIndex.ToString();
				}
				else
				{
					item.transform.GetChild(1).GetComponent().text = headPageIndex.ToString();
				}

				headPageIndex++;		
			}
		}
		//页数等于UIPage数
		else if (maxPageIndex == uiPageArray.Length)
		{
			foreach (var item in uiPageArray)
			{
				item.transform.GetChild(1).GetComponent().text = headPageIndex.ToString();

				headPageIndex++;
			}
		}
		else
		{
			for (int i = 0; i < maxPageIndex; i++)
			{
				uiPageArray[i].transform.GetChild(1).GetComponent().text = headPageIndex.ToString();

				headPageIndex++;
			}
		}
	}

	
	/// 
	/// 在UIPage上更新
	/// 
	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 = "1";
				}
				else if (i == 1)
				{
					uiPageArray[i].transform.GetChild(1).GetComponent().text = "...";
				}
				else
				{
					uiPageArray[i].transform.GetChild(1).GetComponent().text = count.ToString();
					count--;
				}
			}
		}
		else
		{
			int count = 1;
			for (int i = 0; i < maxPageIndex; i++)
			{
				uiPageArray[i].transform.GetChild(1).GetComponent().text = count.ToString();
				count++;
			}
		}
	}

	/// 
	/// 在UIPage中间更新
	/// 
	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 = "1";
			}
			else if (i == 1 || i == uiPageArray.Length - 2)
			{
				uiPageArray[i].transform.GetChild(1).GetComponent().text = "...";
			}
			else if (i == uiPageArray.Length - 1)
			{
				uiPageArray[i].transform.GetChild(1).GetComponent().text = maxPageIndex.ToString();
			}
			else
			{
				uiPageArray[i].transform.GetChild(1).GetComponent().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);
	}

	/// 
	/// 按文本内容查询
	/// 
	/// 
	public UIPage FindUIPageWithText(string text)
	{
		foreach (var item in uiPageArray)
		{
			if (item.transform.GetChild(1).GetComponent().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;
	}


	/// 
	/// 页面跳转
	/// 
	public void JumpPage()//这里用于输入框回车事件
	{
		//获取输入信息
		string number = GameObject.FindGameObjectWithTag("PageInputField").GetComponent().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);
			}
		}
	}


	/// 
	/// 跳转
	/// 
	/// 
	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);
			}
		}
	}

	/// 
	/// 页面选择按钮
	/// 
	/// (向左:-1)( 向右:1)
	public void OnBtnRight(string selection)
	{
		UIPage uiPage = PageGrid.GetInstance.FindUIPageWithImage();
		if (uiPage)
		{
			//当前页面是最后一页或者是第一页
			if (int.Parse(uiPage.transform.GetChild(1).GetComponent().text) == maxPageIndex && selection == "1" || int.Parse(uiPage.transform.GetChild(1).GetComponent().text) == 1 && selection == "-1")
			{
				return;
			}
			else
			{
				//跳转页面
				JumpPage((int.Parse(uiPage.transform.GetChild(1).GetComponent().text) + int.Parse(selection)).ToString());
			}
		}
	}
}


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

Unity3d分页系统_第4张图片

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

Unity3d分页系统_第5张图片

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


博客地址:blog.liujunliang.com.cn(手动输入链接访问)

你可能感兴趣的:(游戏开发,Unity游戏开发)