首页 > 编程 > C# > 正文

UGUI实现ScrollView无限滚动效果

2020-01-24 00:08:56
字体:
来源:转载
供稿:网友

抽空做了一个UGUI的无限滚动的效果。只做了一半(向下无限滚动)。网上也看了很多教程,感觉还是按照自己的思路来写可能比较好。搭建如下:

content节点不添加任何组件。布局组件默认是会重新排版子节点的,所以如果子节点的位置变化,会重新排版,不能达到效果。Size Fitter组件也不加,自己写代码调整Size大小(不调整大小,无法滑动)。

最主要的实现过程就是用Queue来搬运Cell。在向下滚动的过程中(鼠标上滑),顶部滑出View Port的Cell被搬运到底部续上。这点类似于Queue的先见先出原则,再把Dequeue出来的元素添加到末尾,就很类似于ScrollView的无限滚动的原理了。在鼠标上滑的过程中,content的PosY值是一直增加的,所以触发滚动的条件就可以设定为位移之差大于Cell的高度值即可。

 数据的刷新,数据到头之后,不能再次进行滚动轮换了,这里用一组值来记录初始化的一组Cell显示的是数据的哪一段。例如HeadNum和TaiNum。比如用20个Cell显示100条数据。初始化后,HeadNum就是0,TailNum就是19。上滑一行数据后,HeadNum=4,TailNum=23(这里假设是20个Cell排成4列)。

下面是完整代码:

public class UIScrollViewTest : MonoBehaviour {  public RectTransform content; public GameObject cell; // cell的初始化个数 public int cellAmount = 0; // 鼠标上滑时,存储Cell的Queue。正序存储 public Queue F_cellQuee = new Queue(); // 鼠标下滑时,存储Cell的Queue。到序存储 public Queue B_cellQuee = new Queue(); // cell的Size public Vector2 cellSize = new Vector2(100,100); // cell的间隔 public Vector2 cellOffset = new Vector2(0,0); // 列数 public int columnCount = 0; private int rowCount; // 上一次content的位置 public float lastPos; // 滚动的次数 public int loopCount = 0; // cell显示的数据段的开头和结尾序号 public int HeadNum = 0; public int TailNum;  public Sprite[] sp; public List<Sprite> data;   void Start() {  for (int i = 0; i < sp.Length; i++)  {   data.Add(sp[i]);  }   InitialScrollView(data);  TailNum = cellAmount-1;  lastPos = content.localPosition.y;  //Debug.LogError("行数是:::" + rowCount);   //Debug.LogError("+++++++++++++++++ " + (5>>3)); }   void Update() {  // 触发滚动。  if (content.localPosition.y - lastPos > cellSize.y && data.Count - cellAmount - loopCount*columnCount >0)  {   //Debug.LogError("11111111111 " + (data.Count - cellAmount - loopCount * columnCount));   LoopScrolView(data);   lastPos = content.localPosition.y;  } }     // 初始化cell void InitialScrollView(List<Sprite> data) {  for (int i = 0; i < cellAmount; i++)  {   GameObject obj = Instantiate(cell.gameObject);   obj.transform.SetParent(content);   obj.name = "cell0" + i.ToString();   obj.transform.GetChild(0).GetComponent<Text>().text = "cell0"+i.ToString();   // 显示默认的数据   obj.GetComponent<Image>().sprite = data[i];  }  // 初始化Queue  for (int i = content.childCount-1; i >= 0; i--)  {   B_cellQuee.Enqueue(content.GetChild(i).gameObject);  }  for (int i = 0; i < content.childCount; i++)  {   F_cellQuee.Enqueue(content.GetChild(i).gameObject);  }   // 计算行数  if (cellAmount % columnCount >0)  {   rowCount = cellAmount / columnCount + 1;  } else {   rowCount = cellAmount / columnCount;  }   // 排列cell的位置  int index = 0;  for (int r = 1; r <= rowCount; r++)  {   for (int c = 1; c <= columnCount; c++)   {    if (index < cellAmount)    {     Vector2 pos = new Vector2(cellSize.x / 2 + (cellSize.x + cellOffset.x) * (c-1), -cellSize.y / 2 - (cellOffset.y + cellSize.y) * (r-1));     content.GetChild(index).GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, 0, 100);     content.GetChild(index).GetComponent<RectTransform>().SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, 0, 100);     content.GetChild(index).GetComponent<RectTransform>().anchoredPosition = pos;     index++;    }   }  }   Vector2 v = content.sizeDelta;  // 初始化content的size  content.sizeDelta = new Vector2(v.x, rowCount * cellSize.y + cellOffset.y*(rowCount-1)); }   /// 保持content的大小,这里是保持大小为在cell的行数基础上,向下多出bottomCount行的距离 void SetContentSize(int upperCount, int bottomCount) {  if (content.sizeDelta != new Vector2(content.sizeDelta.x, content.sizeDelta.y + bottomCount * (cellSize.y + cellOffset.y)))  {   content.sizeDelta = new Vector2(content.sizeDelta.x, content.sizeDelta.y + bottomCount*(cellSize.y + cellOffset.y));  } }  // 计算顶部的Cell轮换到底部时的位置。以当前最后一行的最后一个Cell的位置为基准计算。 void SetBottomCellPosition(int index, RectTransform rect, Vector2 pos) {  Vector2 v = Vector2.zero;  if (cellAmount % columnCount == 0) // 整除。每一行都满的情况。  {   float x = pos.x - cellSize.x * (columnCount - index-1) - cellOffset.x * (columnCount-index-1);   float y = pos.y - cellSize.y - cellOffset.y;   v = new Vector2(x,y);  }  // 出现不满行的情况。例如数据有103个,可以用23个cell来轮换。这样就会出现不满行的情况。  // 这种情况下是顶部的一行cell顺次接到底部不满的行。例如23号cell后面接1号和2号cell,3号和4号cell填充到第“7”行  else if (cellAmount % columnCount + index+1<=columnCount)   {   float x = pos.x + cellSize.x * (index+1) + cellOffset.x * (index+1);   float y = pos.y;   v = new Vector2(x, y);  }  else  {   float x = pos.x - cellSize.x * (columnCount - index-1) - cellOffset.x * (columnCount - index-1);   float y = pos.y - cellSize.y - cellOffset.y;   v = new Vector2(x, y);  }  //Debug.LogError("++++++++++++++ " + pos+ "     "+ v);  rect.anchoredPosition = v;  rect.SetAsLastSibling(); }  // 计算底部的cell轮换到顶部是的位置,基准位置是当前行的第一个cell。 void SetUpperCellPosition(int index, RectTransform rect, Vector2 pos) {  Vector2 v = Vector2.zero;  if (cellAmount % columnCount == 0) // 整除  {   float x = pos.x + cellSize.x * index + cellOffset.x * index;   float y = pos.y + cellSize.y + cellOffset.y;   v = new Vector2(x, y);  }  //else if (cellAmount % columnCount + index + 1 <= columnCount)  //{  // float x = pos.x + cellSize.x * (index + 1) + cellOffset.x * (index + 1);  // float y = pos.y;  // v = new Vector2(x, y);  //}  //else  //{  // float x = pos.x - cellSize.x * (columnCount - index - 1) - cellOffset.x * (columnCount - index - 1);  // float y = pos.y - cellSize.y - cellOffset.y;  // v = new Vector2(x, y);  //}  //Debug.LogError("++++++++++++++ " + pos+ "     "+ v);  rect.anchoredPosition = v;  rect.SetAsFirstSibling(); }   // 鼠标上滑时,显示当前cell的数据。同时记录数据段的序号递增。 void ShowRestCellData(Image cell, int index) {  if (TailNum< data.Count-1)  {   Debug.LogError("当前的序号是::::" + TailNum);   TailNum++;   HeadNum++;   cell.sprite = data[TailNum];  } }  void ShowPreviousCellData(Image cell, int index) {  if (HeadNum > 0)  {   Debug.LogError("当前的序号是::::" + HeadNum);   TailNum--;   HeadNum--;   cell.sprite = data[HeadNum];  } }   // 轮换的函数。每次乱换一行的cell。 void LoopScrolView(List<Sprite> data) {  SetContentSize(0, 1);  loopCount++;  RectTransform rect2 = content.GetChild(content.childCount - 1).GetComponent<RectTransform>();  for (int i = 0; i < columnCount; i++)  {   GameObject obj = F_cellQuee.Dequeue() as GameObject;   RectTransform rect = obj.GetComponent<RectTransform>();   ShowRestCellData(obj.GetComponent<Image>(), i);   SetBottomCellPosition(i, rect, rect2.anchoredPosition);   F_cellQuee.Enqueue(obj);  } } }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表