uinty3d使用ugui封装一个分页控件

　　我们在显示数据时有的数据比较多，手机内存有限，我们不可能分配很多的控件来显示这些数据，分页是一个不错的选择。比如玩家交易行。我们现在封装一个自己简单的分页控件来显示玩家交易行。

　　分页控件的原理其实很简单，我们事先分配一定的控件来重复显示这些数据。我们的分页控件要留出两个接口: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 }

View Code

将脚本添加到我们的分页控件，并将控件绑定到脚本的变量，一个简单的分页控件就做出来了。我将这个分页控件做成预制体供以后使用。

现在我们来简单的使用这个控件。新建一个场景拖动一个分页的预制到场景中并设置页大小PageSize和页数PageCount，添加一个panel充当列表项,在panel中放两个文本控件,把panel做成预制体赋给分页控件的列表项变量。效果如图:

编写一个PageExsample1脚本，代码如下:

 1 using UnityEngine;
 2 using System.Collections;
 3 using System;
 4 using System.Collections.Generic;
 5 using UnityEngine.UI;
 6 using Pagination;
 7 
 8 public class PageExsample1 : MonoBehaviour
 9 {
10     void Start()
11     {
12 
13         //实例化表头
14         GetComponent<Paging>().headers = new List<Header>(new Header[] {
15             new Header("语文", 140),
16             new Header("数学", 140),
17         });
18 
19 
20         //实例化分页委托
21         GetComponent<Paging>().pagehandler = new Paging.PageHandler((int _page) =>
22         {
23             //模拟数据
24             List<List<string>> dataTable = new List<List<string>>();
25 
26             if (_page == 1)
27             {
28                 dataTable.Add(new List<string>() { "80", "78" });
29                 dataTable.Add(new List<string>() { "83", "88" });
30                 dataTable.Add(new List<string>() { "93", "80" });
31                 dataTable.Add(new List<string>() { "73", "85" });
32                 dataTable.Add(new List<string>() { "77", "83" });
33             }
34             else if (_page == 2)
35             {
36                 dataTable.Add(new List<string>() { "81", "98" });
37                 dataTable.Add(new List<string>() { "76", "89" });
38                 dataTable.Add(new List<string>() { "53", "90" });
39                 dataTable.Add(new List<string>() { "79", "75" });
40                 dataTable.Add(new List<string>() { "88", "93" });
41             }
42 
43             GetComponent<Paging>().SetDataTable(dataTable);    
44         });
45 
46         //实例化数据填充委托
47         GetComponent<Paging>().fullDatahandler = OnFullData;
48     }
49 
50     /// <summary>
51     /// 填充策略
52     /// </summary>
53     /// <param name="_itemObj">列表项</param>
54     /// <param name="_dataList">数据</param>
55     void OnFullData(GameObject _itemObj, List<string> _dataList)
56     {
57         _itemObj.transform.FindChild("yuwen").GetComponent<Text>().text = _dataList[0];
58         _itemObj.transform.FindChild("shuxue").GetComponent<Text>().text = _dataList[1];
59     }
60 }

将这个脚本放到分页控件上运行。效果如图:

好了，我们做了个简单的分页控件，并使用了这个控件了。下一篇我们将使用这个分页控件，以及之前我们提到的u3d通过json和php交互。我们将使用这些东西做个简单的玩家交易行。

转载请注明出处:http://www.cnblogs.com/fyluyg/p/6000466.html

分页控件下载

posted on 2016-10-26 16:24 漂泊的浮萍阅读(1665) 评论(0) 编辑收藏举报