Unity实用功能之UGUI实现页码翻页功能

这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

概述

在日常开发过程中，经常会遇到在UGUI中，有很多数据一页UI是显示不下的，需要用到翻页的功能。这时有的人可能会说，显示不下就使用滚动条呗，这种方法虽然可行，但是在很多项目中使用滚动条查看数据可能界面会有些丑，所以就需要用到翻页功能。

功能需求

实现翻页功能，当前页面的页码高亮显示，页码过多时，当前页面要在所有页码中间显示，有上一页，下一页的功能，点击对应页码跳转到对应页，显示对应页的数据

最终实现效果

UI搭建

一、搭建页面
首先搭建标题，一个Image背景加Text组成标题栏 搭建完标题之后搭建每一个条目，这里用到了Grid Layout Group组件，首先创建一个存放所有信息的父物体，添加自动排列组件，方便每条信息自动排列位置，设置每条信息长度和父物体的长度相同，然后设置间距等参数。父物体设置好之后，创建一个条目（创建一个即可，其余的使用预置体）。条目和题目一样，由一个Image和若干Text组成（Text个数根据要显示的信息定）。具体如下

二、搭建页码
搭建完信息界面，接下来就搭建翻页按钮。由7个按钮组成，其中两个是上下页，5个页码。首先创建一个父物体放置7个按钮，父物体使用到自动排列组件，这样的目的是，当有时候页码少于5页时，只显示3页时，自动排列这7个按钮。

代码编写

界面已经搭建完成，接下来就是编写脚本

一、显示条目及信息
首选创建一个数组，存放所有条目信息（后期可根据自己需求更改）

 private int[] itemID = new int[135];//135个数据
 //设置每个条目显示的数值
 for (int i = 0; i < itemID.Length; i++)
 {
     itemID[i] = i+1;
 }

接下来就是根据当前页码显示对应页面的数据

//开始索引，根据页数来，当前页面要显示的条目在是整体条目数组中的索引
int startIndex = 10 * page;

接下来就是显示条目，并且设置每个条目对应的数据

for (int i = startIndex; i < startIndex + 10; i++)
{
    if (i < itemID.Length)
    {
        //获取条目
        GameObject _item;

        if (i >= 10)
            itemIndex = i % 10;
        else
            itemIndex = i;
        _item = Item[itemIndex];

        //设置成绩条内容
        _item.transform.GetChild(0).GetComponent<Text>().text = itemID[i].ToString();
        //显示成绩条
        _item.SetActive(true);
    }
    else
        break;
}

二、设置页码显示
首先根据所有条目数，获取一共有多少页，要向上取整

 //总页数
 int pageCount = (int)Mathf.Ceil((float)itemCount / 10f);

当总界面少于5页时，需要隐藏几个页码，所以先设置一下页码的显示

  if (pageCount < 5)
  {
      for (int i = 0; i < pageBtn.Count; i++)
      {
          if (i < pageCount)
              pageBtn[i].gameObject.SetActive(true);
          else
              pageBtn[i].gameObject.SetActive(false);
      }
  }
  else
  {
      for (int i = 0; i < pageBtn.Count; i++)
      {
          pageBtn[i].gameObject.SetActive(true);
      }
  }

接下来就该设置页码了，当当前页码是1,2页的时候，页码没法居中显示，所以在前面显示即可。当当前页码大于2，且小于总页数-2,页码要居中显示。当页码是后两位的时候也无法居中显示，所以和1,2页相同，不需要居中。
1、当前页码小于等于3，正常显示，不需要向中间移动

if (nowPage <= 3)
{
    //前三个中的一个亮
    for (int i = 0; i < pageBtn.Count; i++)
    {
        pageBtn[i].transform.GetChild(0).GetComponent<Text>().text = (i + 1).ToString();
        if (i + 1 == nowPage)
            pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = Color.white;
        else
            pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = _color;
    }
}

2、中间的页码显示

 if (nowPage <= pageCount - 2 && nowPage >= 3)
 {
     //中间值亮
     for (int i = 0; i < pageBtn.Count; i++)
     {
         pageBtn[i].transform.GetChild(0).GetComponent<Text>().text = (nowPage + (i - 2)).ToString();
          if (i == 2)
              pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = Color.white;
          else
              pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = _color;
      }
  }

3、显示后两页页码

if (nowPage > pageCount - 2 && nowPage <= pageCount)
{
    //后2个中的一个亮 
    //当前选中倒数第二页
    if (nowPage == pageCount - 1)
    {
        for (int i = 0; i < pageBtn.Count; i++)
        {
            if (i == 3)
                pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = Color.white;
            else
                pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = _color;
        }
    }
    //当前选中倒数第一页
    else if (nowPage == pageCount)
    {
        for (int i = 0; i < pageBtn.Count; i++)
        {
            if (i == 4)
                pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = Color.white;
            else
                pageBtn[i].transform.GetChild(0).GetComponent<Text>().color = _color;
        }
    }
    for (int i = 0; i < pageBtn.Count; i++)
    {
        pageBtn[i].transform.GetChild(0).GetComponent<Text>().text = (pageCount - 4 + i).ToString();
    }
}

三、按钮点击事件 1、上一页
当前页码-1，然后调用设置页码界面

  void UpPageBtn()
  {
      //当前页是第一页，返回
      if (page == 0) return;
      page -= 1;
      ShowItem();
  }

2、下一页
当前页码+1，然后调用设置页码界面

 void NextPageBtn()
 {
     if (page + 1 == (int)Mathf.Ceil((float)itemID.Length / 10f)) return;
     page += 1;
     ShowItem();
 }

3、点击页码切换至对应界面（输入页码跳转也是这个代码）

 void ChangePageBtn(int _page)
 {
     page = _page - 1;
     ShowItem();
 }

到此代码就编写完成，然后记进行测试即可，项目源码见下方地址

源代码分享

GitHub下载地址：点击这里跳转下载

写在最后

所有分享的内容均为作者在日常开发过程中使用过的各种小功能点，分享出来也变相的回顾一下，如有写的不好的地方还请多多指教。欢迎大家相互学习进步。本片文章就先写到这里，希望对你能够有所帮助