UGUI实现ScrollView无限滚动效果

所属分类: 软件编程 / C#教程 阅读数: 116
收藏 0 赞 0 分享

抽空做了一个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);
  }
 }
 
}

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

更多精彩内容其他人还在看

c#开发word批量转pdf源码分享

已经安装有Office环境,借助一些简单的代码即可实现批量Word转PDF,看下面的实例源码吧
收藏 0 赞 0 分享

c# xml API操作的小例子

这篇文章主要介绍了c# xml API操作的小例子,有需要的朋友可以参考一下
收藏 0 赞 0 分享

c#唯一值渲染实例代码

这篇文章主要介绍了c#唯一值渲染实例代码,有需要的朋友可以参考一下
收藏 0 赞 0 分享

淘宝IP地址库采集器c#代码

这篇文章主要介绍了淘宝IP地址库采集器c#代码,有需要的朋友可以参考一下
收藏 0 赞 0 分享

C#在后台运行操作(BackgroundWorker用法)示例分享

BackgroundWorker类允许在单独的专用线程上运行操作。如果需要能进行响应的用户界面,而且面临与这类操作相关的长时间延迟,则可以使用BackgroundWorker类方便地解决问题,下面看示例
收藏 0 赞 0 分享

c#文本加密程序代码示例

这是一个加密软件,但只限于文本加密,加了窗口控件的滑动效果,详细看下面的代码
收藏 0 赞 0 分享

c#生成站点地图(SiteMapPath)文件示例程序

这篇文章主要介绍了c#生成站点地图(SiteMapPath)文件的示例,大家参考使用
收藏 0 赞 0 分享

C# 键盘Enter键取代Tab键实现代码

这篇文章主要介绍了C# 键盘Enter键取代Tab键实现代码,有需要的朋友可以参考一下
收藏 0 赞 0 分享

C# WinForm导出Excel方法介绍

在.NET应用中,导出Excel是很常见的需求,导出Excel报表大致有以下三种方式:Office PIA,文件流和NPOI开源库,本文只介绍前两种方式
收藏 0 赞 0 分享

C#串口通信程序实例详解

在.NET平台下创建C#串口通信程序,.NET 2.0提供了串口通信的功能,其命名空间是System.IO.Ports,创建C#串口通信程序的具体实现是如何的呢?让我们开始吧
收藏 0 赞 0 分享
查看更多