我们在显示数据时有的数据比较多，手机内存有限，我们不可能分配很多的控件来显示这些数据，分页是一个不错的选择。比如玩家交易行。我们现在封装一个自己简单的分页控件来显示玩家交易行。
分页控件的原理其实很简单，我们事先分配一定的控件来重复显示这些数据。我们的分页控件要留出两个接口:1,上一页，下一页的事件给用户完成数据的请求；2,用户自定义的填充策略，因为数据怎么显示摆放是用户的自由的。
我们先放一个panel作为整个分页控件的父级，并为panel添加自己喜欢的背景,效果如图:
接下来添加为控件添加头部中部和底部的panel，头部panel摆放我们的关闭按钮，标题等内容。中部panel摆放我们的数据内容。底部panel摆放我们的上下一页按钮文字。效果如图:
为中部的panel添加headerPanel充当表头，添加一个ScrollView做我们的数据域。效果如果。
好了，我们一个简单的分页控件做好了。接下来我们为分页控件添加分页脚本。
1 using UnityEngine; 2 using UnityEngine.UI; 3 using System.Collections.Generic; 4 using System.Collections; 5 using System; 6 using UnityEngine.EventSystems; 7 8 namespace Pagination 9 { 10 /// <summary> 11 /// 列表头内容 12 /// </summary> 13 public class Header 14 { 15 public Header() 16 { 17 width = 0; 18 } 19 20 public Header(string _text, int _width) 21 { 22 text = _text; 23 width = _width; 24 } 25 26 /// <summary> 27 /// 表头内容 28 /// </summary> 29 public string text { get; set; } 30 31 /// <summary> 32 /// 表头宽 33 /// </summary> 34 public int width { get; set; } 35 } 36 37 /// <summary> 38 /// 分页类 39 /// </summary> 40 public class Paging : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler 41 { 42 //分页委托,以便用户能使用上下按钮事件 43 public delegate void PageHandler(int _page); 44 //数据填充策略委托,以便用户使用自己策略填充数据 45 public delegate void FullDataHandler(GameObject _itemObj, List<string> _dataList); 46 47 //填充策略委托实例 48 public FullDataHandler fullDatahandler; 49 //分页委托实例 50 public PageHandler pagehandler; 51 //表头内容 52 public List<Header> headers; 53 //列表项对象 54 List<GameObject> itemList = new List<GameObject>(); 55 //列表数据 56 private List<List<string>> datatable = new List<List<string>>(); 57 58 [NonSerialized] 59 [HideInInspector] 60 public bool headerVisble; //表头的可见 61 public int headerHeight = 20; //表头高 62 public int pageSize = 0; //单页数量 63 public int pageCount = 1; //总页数 64 public Text headerItem; //表头预制物体 65 public Text pageFootText; //页数文本 66 public GameObject headerPanel; //表头panel 67 public GameObject contentArea; // 68 public GameObject listItem; //列表项 69 70 private int _curPage = 0; //当前页 71 public int curPage 72 { 73 get 74 { 75 return _curPage; 76 } 77 } 78 79 void Start() 80 { 81 StartCoroutine("OnCreateObject"); 82 } 83 84 /// <summary> 85 /// 初始化ui 86 /// </summary> 87 /// <returns></returns> 88 IEnumerator OnCreateObject() 89 { 90 yield return new WaitForSeconds(.01f); 91 92 CreateHeader(); 93 CreateListItem(); 94 InitFoot(); 95 96 //第一次填充 97 OnPrevPage(); 98 } 99 100 /// <summary> 101 /// 初始化表头 102 /// </summary> 103 private void CreateHeader() 104 { 105 int xpos = 0; 106 if (headers != null) 107 { 108 foreach (var h in headers) 109 { 110 Text txt = Instantiate(headerItem); 111 112 if (txt != null) 113 { 114 txt.text = h.text; 115 txt.transform.SetParent(headerPanel.transform); 116 txt.transform.localPosition = new Vector3(xpos, 0, 0); 117 txt.rectTransform.anchorMin = new Vector2(0, 0.5f); 118 txt.rectTransform.anchorMax = new Vector2(0, 0.5f); 119 txt.rectTransform.pivot = new Vector2(0, 0.5f); 120 txt.rectTransform.localScale = new Vector3(1, 1, 0); 121 txt.rectTransform.sizeDelta = new Vector2(h.width, headerHeight); 122 123 xpos += h.width; 124 } 125 } 126 } 127 } 128 129 /// <summary> 130 /// 初始化列表项 131 /// </summary> 132 private void CreateListItem() 133 { 134 // 135 Vector2 v2 = listItem.GetComponent<RectTransform>().sizeDelta; 136 Vector2 thisV2 = gameObject.GetComponent<RectTransform>().sizeDelta; 137 contentArea.GetComponent<GridLayoutGroup>().cellSize = v2; 138 contentArea.GetComponent<RectTransform>().sizeDelta = new Vector2(thisV2.x - 20, pageSize * v2.y); 139 140 // 141 for (int i = 0; i < pageSize; i++) 142 { 143 GameObject obj = Instantiate(listItem); 144 145 if (obj != null) 146 { 147 obj.transform.SetParent(contentArea.transform); 148 obj.transform.localPosition = new Vector3(0, 0, 0); 149 obj.GetComponent<RectTransform>().sizeDelta = new Vector2(thisV2.x - 20, v2.y); 150 obj.GetComponent<RectTransform>().localScale = new Vector3(1, 1, 0); 151 obj.SetActive(false); 152 153 itemList.Add(obj); 154 } 155 } 156 } 157 158 /// <summary> 159 /// 初始化底部 160 /// </summary> 161 private void InitFoot() 162 { 163 _curPage = 1; 164 pageFootText.text = string.Format("{0}/{1}", _curPage, pageCount); 165 } 166 167 /// <summary> 168 /// 关闭窗口 169 /// </summary> 170 public void OnCloseWindow() 171 { 172 gameObject.SetActive(false); 173 } 174 175 /// <summary> 176 /// 打开窗口 177 /// </summary> 178 public void OnOpenWindow() 179 { 180 gameObject.SetActive(true); 181 } 182 183 /// <summary> 184 /// 上一页 185 /// </summary> 186 public void OnPrevPage() 187 { 188 if (_curPage != 1) 189 { 190 _curPage--; 191 } 192 193 OnPage(_curPage); 194 } 195 196 /// <summary> 197 /// 下一页 198 /// </summary> 199 public void OnNextPage() 200 { 201 if (_curPage != pageCount) 202 { 203 _curPage++; 204 } 205 206 OnPage(_curPage); 207 } 208 209 /// <summary> 210 /// 填充数据 211 /// </summary> 212 /// <param name="_dataTable"></param> 213 private void FullData(List<List<string>> _dataTable) 214 { 215 int tbSize = _dataTable.Count; 216 int i = 0; 217 218 for (; i < tbSize; i++) 219 { 220 //调用填充委托 221 fullDatahandler(itemList[i], _dataTable[i]); 222 itemList[i].SetActive(true); 223 } 224 225 for (int j = tbSize; j < pageSize; ++j) 226 { 227 itemList[j].SetActive(false); 228 //print(j); 229 } 230 231 } 232 233 public void OnPage(int _cPage) 234 { 235 //获得数据 236 if (pagehandler != null) 237 { 238 //调用分页委托 239 pagehandler(_cPage); 240 } 241 } 242 243 /// <summary> 244 /// 重新加载数据 245 /// </summary> 246 /// <param name="_datatable"></param> 247 public void SetDataTable(List<List<string>> _datatable) 248 { 249 datatable.Clear(); 250 datatable = _datatable; 251 if (datatable.Count != 0) 252 { 253 FullData(datatable); 254 } 255 256 pageFootText.text = string.Format("{0}/{1}", _curPage, pageCount); 257 } 258 259 // begin dragging 260 public void OnBeginDrag(PointerEventData eventData) 261 { 262 } 263 264 // during dragging 265 public void OnDrag(PointerEventData eventData) 266 { 267 } 268 269 // end dragging 270 public void OnEndDrag(PointerEventData eventData) 271 { 272 } 273 274 private void SetDraggedPosition(PointerEventData eventData) 275 { 276 } 277 278 } 279 280 }