Unity引擎UI滚动列表——滚动复用基础介绍

  大家好，我是阿赵。

一、滚动复用的介绍

  在制作游戏的过程中，经常会遇到一些需要显示数量比较大的数据的情况。比如说，一个排行榜，需要展示当前服务器前一千个玩家的排名。或者游戏的背包容量特别大，可以有几千个格子。
  在早期的游戏里面，这种情况一般会采取分页的做法，比如一页只显示几十条信息，通过翻页和跳转页，逐页浏览信息。但现在的游戏很少采取分页的做法，而是采用滚动列表的方式，玩家可以上下滑动在同一页里面看完所有的信息。
  以Unity引擎为例，通过Scroll View组件，就能轻松的实现上下滑动的效果。

  ScrollView的基本用法很简单，把需要展示的Item，都放在Content节点下，然后在Content上挂自动布局的组件和自动适配大小的组件，列表就可以滚动起来了。

  回到最开始的例子，假如需要展示的内容非常多，比如有1万个，那我们是不是就要生成1万个item放在Content下面呢？这样做显然是不行的。如果我们同时生成1万个item，而且item很复杂，那么生成的时候会很卡，也会很占内存。虽然实际显示的数量可能只有几个，但剩下的九千多个item还是需要通过Mask计算裁剪范围。
  实际的情况是，我们需要同时看到的item，可能只有几个，所以我们没有必要生成这么大数量的item，而只是生成观察范围内的有限几个item就可以了，通过上下滑动，把移除出范围的item移动到新进入范围的位置，并且把数据刷新成刚进入范围的数据显示就可以了。我习惯上把这种做法叫做滚动复用。

Unity引擎UI滚动复用1

  从上面的视频可以看到，我这里真的有1万个数据，而且可以任意的滑动，甚至任意的跳动到某个为止，从视觉上是完全看不出来有什么破绽。然后从Unity的Hierarchy窗口可以看出，实际上在Content节点下面的item数量就只有11个而已。

  为了方便观察，我把同时显示的数量减少一些，并且把Mask去掉

Unity引擎UI滚动复用6

  从视频的Scene视图可以看到，消失的Item会立刻移动到进入的位置，并且刷新显示。

二、 滚动复用的实现分析

1、计算可以滚动的范围

  滚动复用还是可以使用Unity自带的Scroll View组件。只是在Content节点上面，不需要再挂自动布局和自动大小的组件了。
  首先需要明白的一点是，Scroll View组件可以滚动的范围，是通过Content节点的大小来决定的

  在不使用滚动复用技术的时候，我们需要加自动布局和自动大小的组件，就是为了自动的计算出这个Content里面的内容总共需要多大的范围来显示，从而决定滚动的实际范围。
既然我们现在不需要自动大小了，所以我们可以通过计算，得出Content的大小。举个例子：
  假如我现在是一个竖向滚动的列表，每个item的宽度是200，高度是60，需要同时显示1000个item，item中间没有空隙。那么要刚好放下这1000个item，Content需要的大小就是宽度200，高度是60x1000=60000。
  假如在item中间需要有5个像素的间隙，那么Content的大小，宽度还是200，高度会变成了60x1000+5x(1000-1) = 64995。
  是不是很简单？只要这样算一下，把Content的大小算出来，并设置。这时候列表已经可以滚动起来了。虽然上面一个item也没有，但实际上它滚动的范围就是1000个item的高度。

2、 规定数据来源

  对于一个滚动显示的列表来说，它必须是有一个输入的数据源，并且是以一维数组的形式表现的。
  我这个例子里面，只是简单的输入了一个字符串的数组，而数组的内容就是“内容{序号}”。在实际的使用中，数据的来源会更复杂，比如是某个数据结构体的数组，结构体里面可以包含很多数据，需要在item上面显示很多内容。
  不过数据是否复杂其实并不影响滚动复用的实现，我这里只是为了说明原理。所以我准备了一个字符串数组，每一个数据对应数组里面的一个Index。在接下来的实现里面，每一个数据其实就是对应一个显示的item了。item的UI预设是预先做好的，对应需要显示的数据内容。

3、 计算每个item的范围

  在计算item范围之前，先要定一个对齐方式。比如我们都以左上角作为对齐

  然后item也是左上角对齐，并且Pivot的x是0，y是1。

  这样设置的好处是，当posX和posY都是0的时候，item刚好对齐了Content的左上角。然后随着posX增大item会一直往右移动，随着posY的一直减少(因为画布的Y轴是向上的，所以负数才是向下)，item会一直往下移动。
  假如现在所有item已经按照正确的位置排列好了，那么每个item应该有一个相对于Content的坐标。这里需要记录item的左上角和右下角的坐标：

  如果用Vector4来表示这个item的最大最小值坐标，x和y就是左上角开始点的xy坐标。而z和w，就是右下角结束点的xy坐标。这种记录方法还是看个人习惯的，有些人喜欢记录开始点的xy坐标，还有记录item的宽高，也都是可以的，毕竟结束点的坐标其实就是开始点坐标加上宽度和高度而已。
  不过我为了下面的步骤能快速的得到起点和终点的实际坐标来计算item是否在范围内，所以记录了结束点坐标而没有记录宽高。
  这里需要注意一点，虽然Unity的Y轴是朝向上的，也就是说数据越往下就越小。但我们计算的时候，其实不需要硬要这样算的，我们就正常的算越往后的item坐标越大就行了，包括下面的计算范围也是，把计算的Y轴朝下，计算起来的思维就方便很多。只要在最后给item的坐标赋值的时候，把Y坐标取个负数就行。

4、 计算每个item是否在可以显示的范围内

  假设下图的黑框就是现在Content的实际范围，然后红框就是现在ScrollView的遮罩显示范围：

  由于Content的y坐标为0的时候，是刚好和遮罩的左上角重合的，所以可以认为，现在黑色的框往上移动的距离，也就是红框的顶部坐标，其实就是Content的posY坐标。然后红框的底部坐标，其实就是顶部坐标加上遮罩的高度。
  得到了当前需要显示范围（也就是红框）的顶部和底部坐标之后，通过之前初始化的时候已经计算好的每个item的开始坐标和结束坐标，就能很简单的对比出item是否在红框的显示范围呢了。

5、 刷新显示

  当知道了哪些index对应的item是在显示范围内的，接下来就很好办了，我们需要记录一个当前正在显示的index列表，然后和新计算出来的正要显示的index列表做对比，就可以知道，有哪些index对应的item是需要隐藏，哪些index对应的item是新显示出来的。对于没有变化的index，我们不需要处理，只需要先把需要隐藏的item隐藏掉，再把新增的item显示出来，然后通过index，得到他们的坐标和数据，把item摆在正确的位置，并且根据数据显示item的内容就行了。
  这里我的做法是维护一个对象池。当item不需要显示的时候，把它们存放到对象池里面，并且隐藏。当item需要新增的时候，从对象池里面取出来，并且显示。

6、 根据滚动事件触发刷新显示

  知道了怎样刷新显示，但在什么时候需要刷新呢？在拖动列表的过程中，按道理我们就需要不停的去检查item是否在显示范围内。
  为了达到拖动的过程中触发刷新，所以需要在Scroll View的OnValueChange回调里面注册一个方法，当值变化的时候，我们就重新计算并刷新显示。不过由于OnValueChange触发得很频繁，所以我们需要降低一下调用的频率：

1. OnValueChange回调会传入一个Vector2参数，代表当前滑动的方向。因为我们做的例子是上下滑动，所以参数的y坐标为0时，就说明没有滑动，所以不需要刷新。
2. 给一个调用的频率间隔，当回调的频率过快时也不需要立刻刷新。

7、 跳转到某个item

  在使用滚动列表的需求里面，很多时候会有需要定位的情况。比如在显示1000个玩家信息的排行榜里面，需要定位到自己所在的排名。
  所以在做这个滚动复用的时候，也需要加上一个定位的功能。

Unity引擎UI滚动复用2

  这个功能实现的思路很简单，因为每个item的坐标之前都已经记录了，所以需要跳转到某个item，其实直接去它的坐标，然后加上item的一半高度就可以了。
  不过这里有一种情况，假如index对应的item在最上面或者最下面的一段，而列表是会自动回弹的（比如第一个item不能低于显示范围左上角，如果把第一个item居中，列表就会回弹到左上角），那么就要计算一下，当出现会回弹的情况，直接把y坐标变成0，或者在最下面的就要用Content高度减去mask的高度。

三、 源码

  根据上面的思路，简单写了一个例子，是对应竖向滚动的。各位有兴趣可以自己思考一下，怎样改为横向滚动，或者可以用参数切换横竖向滚动。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class ScrollViewLoopCtrlBase : MonoBehaviour
{public ScrollRect scrollRect;public RectTransform content;protected float viewWidth;protected float viewHeight;private float itemWidth = 200;private float itemHeight = 60;protected float spaceTime = 0.02f;protected float lastTime = 0;protected List<string> dataList;protected float spacing = 0;protected List<int> currentShowIndexList;protected float contentHeight = 0;protected Dictionary<int, TestItem> showList;protected List<Vector4> itemPosList;protected Dictionary<int, List<TestItem>> poolDict;// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}#region 公共方法/// <summary>/// 设置滚动复用的数据/// </summary>/// <param name="dataList">数据源</param>/// <param name="spacing">item之间的间隔</param>public void SetData(List<string> dataList, float spacing = 0){this.dataList = dataList;this.spacing = spacing;currentShowIndexList = new List<int>();RectTransform selfRect = GetComponent<RectTransform>();viewWidth = selfRect.rect.width;viewHeight = selfRect.rect.height;itemPosList = new List<Vector4>();InitData();UpdateView();}public void OnPosChange(Vector2 vec){if(vec.y == 0){return;}if (Time.time - lastTime < spaceTime){return;}lastTime = Time.time;UpdateView();}/// <summary>/// 停止滚动/// </summary>public virtual void StopMove(){if (scrollRect){scrollRect.StopMovement();}}/// <summary>/// 设置列表停留在某个index的item居中/// </summary>/// <param name="ind"></param>public void SetIndexMiddle(int ind){StopMove();SetMiddleFun(ind);UpdateView();}#endregion/// <summary>/// 根据传入的数据初始化滚动列表/// </summary>protected virtual void InitData(){int count = dataList.Count;for (int i = 0; i < count; i++){float startPos = i * itemHeight;if (i > 0){startPos += spacing * i;}itemPosList.Add(new Vector4(0, startPos, 0, startPos + itemHeight));}contentHeight = itemHeight * count;if (count > 1){contentHeight += spacing * (count - 1);}content.sizeDelta = new Vector2(viewWidth, contentHeight);}/// <summary>/// 设置index居中的具体实现/// </summary>/// <param name="ind"></param>protected virtual void SetMiddleFun(int ind){if (dataList == null || dataList.Count == 0){return;}if (ind < 0){ind = 0;}else if (ind >= dataList.Count){ind = dataList.Count - 1;}float halfScreenHeight = viewHeight / 2;float posY = itemPosList[ind].y - halfScreenHeight + (itemPosList[ind].w - itemPosList[ind].y) / 2;if (posY < 0){posY = 0;}else if (contentHeight - posY < viewHeight){posY = contentHeight - viewHeight;}content.anchoredPosition = new Vector2(0, posY);}/// <summary>/// 刷新列表显示/// </summary>protected virtual void UpdateView(){List<int> newShowList = new List<int>();float contentStartY = content.anchoredPosition.y;float contentEndY = contentStartY + viewHeight;for (int i = 0; i < dataList.Count; i++){if (CheckItemIsInArea(contentStartY, contentEndY,i)){newShowList.Add(i);}}if (currentShowIndexList == null){AddItemsToShow(newShowList);currentShowIndexList = newShowList;return;}List<int> removeList = new List<int>();for (int i = 0; i < currentShowIndexList.Count; i++){if (newShowList.IndexOf(currentShowIndexList[i]) < 0){removeList.Add(currentShowIndexList[i]);}}if (removeList.Count > 0){RemoveItemsFromShowList(removeList);}List<int> newList = new List<int>();for (int i = 0; i < newShowList.Count; i++){if (currentShowIndexList.IndexOf(newShowList[i]) < 0){newList.Add(newShowList[i]);}}if (newList.Count > 0){AddItemsToShow(newList);}currentShowIndexList = newShowList;}/// <summary>/// 把对应index的item移除显示/// </summary>/// <param name="indList"></param>protected void RemoveItemsFromShowList(List<int> indList){if (showList == null || showList.Count == 0){return;}for (int i = 0; i < indList.Count; i++){if (showList.ContainsKey(indList[i])){TestItem item = showList[indList[i]];showList.Remove(indList[i]);ReturnToPool(item);}}}/// <summary>/// 把对应index的item添加到显示/// </summary>/// <param name="indList"></param>protected void AddItemsToShow(List<int> indList){if (showList == null){showList = new Dictionary<int, TestItem>();}for (int i = 0; i < indList.Count; i++){int id = indList[i];if (showList.ContainsKey(id) == false){TestItem item = GetFromPoolById(id);showList.Add(id, item);item.SetData(id, dataList[id]);item.rect.anchoredPosition = new Vector2(itemPosList[id].x, -itemPosList[id].y);}}}/// <summary>/// 检查某个序号的item是否在显示范围内/// </summary>/// <param name="contentStartY"></param>/// <param name="contentEndY"></param>/// <param name="itemIndex"></param>/// <returns></returns>protected bool CheckItemIsInArea(float contentStartY, float contentEndY, int itemIndex){Vector4 itemPos = itemPosList[itemIndex];if (itemPos.y <= contentStartY && itemPos.w >= contentStartY){return true;}if (itemPos.y >= contentStartY && itemPos.w <= contentEndY){return true;}if (itemPos.y <= contentEndY && itemPos.w >= contentEndY){return true;}return false;}#region 对象池/// <summary>/// 通过item类型从对象池获取对象/// </summary>/// <param name="itemType"></param>/// <returns></returns>protected TestItem GetFromPool(int itemType){if (poolDict == null || poolDict.ContainsKey(itemType) == false || poolDict[itemType].Count == 0){string itemName = GetItemNameByItemType(itemType);Object obj = Resources.Load(itemName);GameObject go = (GameObject)GameObject.Instantiate(obj, content.transform);TestItem item = go.GetComponent<TestItem>();item.type = itemType;return item;}else{List<TestItem> poolList = poolDict[itemType];TestItem item = poolList[0];poolList.RemoveAt(0);item.gameObject.SetActive(true);return item;}}/// <summary>/// 这里是临时测试资源，写死了几个item类型对应的item名字，用于加载/// </summary>/// <param name="itemType"></param>/// <returns></returns>private string GetItemNameByItemType(int itemType){string itemName = "";switch (itemType){case 1:itemName = "testItem";break;case 2:itemName = "testItem2";break;case 3:itemName = "testItem3";break;}return itemName;}/// <summary>/// 把Item回收到对象池/// </summary>/// <param name="item"></param>protected void ReturnToPool(TestItem item){item.gameObject.SetActive(false);if (poolDict == null){poolDict = new Dictionary<int, List<TestItem>>();}if (poolDict.ContainsKey(item.type) == false){poolDict.Add(item.type, new List<TestItem>());}List<TestItem> poolList = poolDict[item.type];if (poolList.IndexOf(item) < 0){poolList.Add(item);}}/// <summary>/// 正常的滚动复用可能会使用到不同的Item，这里定义一个通过id获取item的方法，用于在不同需求下重写/// </summary>/// <param name="id"></param>/// <returns></returns>protected virtual TestItem GetFromPoolById(int id){return GetFromPool(1);}#endregion}