無限滾動復用列表
Demo展示
前言
游戲中有非常多的下拉滾動菜單，比如成就列表，任務列表，以及背包倉庫之類；如果列表內容非常豐富，會占用大量內存，這篇無限滾動復用ScrollView就是解決這種問題；還可以用來做朋友圈，聊天等；
一般情況，ScrollView中每個Item的大小是一直的，使用ContentSizeFillter組件足夠解決大部分問題；
如果每個Item大小不一致，問題就復雜起來，需要做滾動位置判斷，我這里做了大小適應；
設計思路
1.將數據部分和滾動邏輯部分分離開，數據設計成泛型類；
2.在ScrollView組件上添加ScrollView腳本，控制Item的添加和刪除，分為頭部和尾部；
3.在每個Item上添加ScrollItem腳本，重寫更新數據方法，同時監聽自身是否為頭部或者尾部；
4.如果為頭部或者尾部，且超界通過委托調用ScrollView腳本中的添加或刪除Item方法；
關鍵基類
1.ScrollData
負責整個列表的數據管理，分為總數據和現實數據兩個鏈表，增刪查改方法；泛型類方便復用；
這里使用LinkedList方便查找並返回頭尾節點；
全部代碼：
public class ScrollData<T>
{
public List<T> allDatas;
public LinkedList<T> curDatas;
public ScrollData()
{
allDatas = new List<T>();
curDatas = new LinkedList<T>();
//加載數據；
}
//獲取頭數據
public T GetHeadData()
{
if(allDatas.Count == 0)
return default(T);
if (curDatas.Count == 0)
{
T head = allDatas[0];
curDatas.AddFirst(head);
return head;
}
T t = curDatas.First.Value;
int index = allDatas.IndexOf(t);
if (index != 0)
{
T head = allDatas[index - 1];
curDatas.AddFirst(head);
return head;
}
return default(T);
}
//移出頭數據
public bool RemoveHeadData()
{
if (curDatas.Count == 0 || curDatas.Count == 1)
return false;
curDatas.RemoveFirst();
return true;
}
//獲取尾部數據
public T GetEndData()
{
if (allDatas.Count == 0)
return default(T);
if (curDatas.Count == 0)
{
T end = allDatas[0];
curDatas.AddLast(end);
return end;
}
T t = curDatas.Last.Value;
int index = allDatas.IndexOf(t);
if (index != allDatas.Count - 1)
{
T end = allDatas[index + 1];
curDatas.AddLast(end);
return end;
}
return default(T);
}
//移出尾部數據
public bool RemoveEndData()
{
if (curDatas.Count == 0 || curDatas.Count == 1)
return false;
curDatas.RemoveLast();
return true;
}
//添加數據,通過數組
public void AddData(T[] t)
{
allDatas.AddRange(t);
}
//添加數據,通過鏈表
public void AddData(List<T> t)
{
allDatas.AddRange(t.ToArray());
}
//添加單條數據
public void AddData(T t)
{
allDatas.Insert(0,t);
curDatas.AddFirst(t);
}
//情況當前顯示節點
public void ClearCurData()
{
curDatas.Clear();
}
//獲取當前顯示鏈表的第一個數據在總數據中的下標
public int GetFirstIndex()
{
T t = curDatas.First.Value;
return allDatas.IndexOf(t);
}
}
2.ScrollView
關鍵字段：
scrollItemGo //每個Item的預制體
content //scrollRect下的Content
spacing //每個Item的間隔
isStart //是否第一次加載
方法：
GetChildItem；
1.獲取一個Item的預制體，先從content的子物體中尋找active為false的物體，如果沒有則根據scrollItemGo克隆一個；
2.創建新Item時，獲取ScrollItem組件，賦值其中的參數（四個委托），並初始化；
OnAddHead；OnRemoveHead；OnAddEnd；OnRemoveEnd；
委托方法：
1.調用ScrollData中GetHeadData方法，獲得頭數據；
2.找到content中第一個節點；
3.調用GetChildItem方法獲得item的實例；
4.SetAsFirstSibling,將實例設置為首節點，同時調用RefreshData，刷新數據；
5.根據item 的寬度做自適應（item大小相同，只選掛載ContentSizeFitter）；
全部代碼：
public class ScrollView : MonoBehaviour
{
public GameObject scrollItemGo;
private RectTransform content;
[SerializeField]
private float spacing;
private bool isStart = true;
void Start()
{
content = this.GetComponent<ScrollRect>().content;
spacing = 15;
OnAddHead();
}
private GameObject GetChildItem()
{
//查找是否有未回收的子節點
for (int i = 0; i < content.childCount; ++i)
{
GameObject tempGo = content.GetChild(i).gameObject;
if (!tempGo.activeSelf)
{
tempGo.SetActive(true);
return tempGo;
}
}
//無創建新的
GameObject childItem = GameObject.Instantiate<GameObject>(scrollItemGo,content.transform);
ScrollViewItem scrollItem = childItem.GetComponent<ScrollViewItem>();
if (scrollItem == null)
scrollItem = childItem.AddComponent<ScrollViewItem>();
scrollItem.onAddHead += OnAddHead;
scrollItem.onRemoveHead += OnRemoveHead;
scrollItem.onAddEnd += OnAddEnd;
scrollItem.onRemoveEnd += OnRemoveEnd;
scrollItem.Init();
childItem.GetComponent<RectTransform>().anchorMin = new Vector2(0.5f, 1);
childItem.GetComponent<RectTransform>().anchorMax = new Vector2(0.5f, 1);
childItem.GetComponent<RectTransform>().pivot = new Vector2(0, 1);
childItem.transform.localScale = Vector3.one;
childItem.transform.localPosition = Vector3.zero;
//-----設置寬高——加載數據
return childItem;
}
private void OnAddHead()
{
Data data = this.GetComponent<Test>().scrollData.GetHeadData();
if (data != null)
{
Transform first = FindFirst();
//----first 不為 數據頭---在data中做了
GameObject obj = GetChildItem();
obj.GetComponent<ScrollViewItem>().RefreshData(data);
obj.transform.SetAsFirstSibling();
RectTransform objRect = obj.GetComponent<RectTransform>();
float height = objRect.sizeDelta.y;
if (first != null)
{
obj.transform.localPosition = first.localPosition + new Vector3(0, height + spacing, 0);
}
if (isStart)
{
content.sizeDelta += new Vector2(0, height + spacing);
isStart = false;
}
}
}
private void OnRemoveHead()
{
var scrollData = this.GetComponent<Test>().scrollData;
if (scrollData.RemoveHeadData())
{
Transform tf = FindFirst();
if (tf != null)
tf.gameObject.SetActive(false);
}
}
private void OnAddEnd()
{
Data data = this.GetComponent<Test>().scrollData.GetEndData();
if (data != null)
{
Transform end = FindEnd();
//----end 不為 數據尾在data中做了
GameObject obj = GetChildItem();
obj.transform.SetAsLastSibling();
obj.GetComponent<ScrollViewItem>().RefreshData(data);
float height = end.GetComponent<RectTransform>().sizeDelta.y;
if (end != null)
obj.transform.localPosition = end.localPosition - new Vector3(0, height + spacing, 0);
//是否增加content高度
if (IsAddContentH(obj.transform))
{
float h = obj.GetComponent<RectTransform>().sizeDelta.y;
content.sizeDelta += new Vector2(0, h + spacing);
}
}
}
private void OnRemoveEnd()
{
var scrollData = this.GetComponent<Test>().scrollData;
if (scrollData.RemoveEndData())
{
Transform tf = FindEnd();
if (tf != null)
tf.gameObject.SetActive(false);
}
}
private Transform FindFirst()
{
for (int i = 0; i < content.childCount; ++i)
{
if (content.GetChild(i).gameObject.activeSelf)
{
return content.GetChild(i);
}
}
return null;
}
private Transform FindEnd()
{
for (int i = content.childCount - 1; i >= 0; --i)
{
if (content.GetChild(i).gameObject.activeSelf)
{
return content.GetChild(i);
}
}
return null;
}
private bool IsAddContentH(Transform tf)
{
Vector3[] rectC = new Vector3[4];
Vector3[] contentC = new Vector3[4];
tf.GetComponent<RectTransform>().GetWorldCorners(rectC);
content.GetWorldCorners(contentC);
if (rectC[0].y < contentC[0].y)
return true;
return false;
}
}
3.ScrollItem
關鍵字段：四個委托
public Action onAddHead;
public Action onRemoveHead;
public Action onAddEnd;
public Action onRemoveEnd;
關鍵方法：
OnRecyclingItem；
1.判斷自身是否為頭尾節點；
2.判斷自身是否超界，超界需要隱藏自身；
3.判斷自身與邊界距離，是否添加節點；
關鍵API:
RectTransform.GetWorldCorners(Vector3[4])
獲取UI對象四個頂點的世界坐標，下標對應的位置；
全部代碼：
public class ScrollViewItem : MonoBehaviour
{
private RectTransform viewRect;
private RectTransform rect;
[SerializeField]
private float viewStart;
[SerializeField]
private float viewEnd;
[SerializeField]
private Vector3[] rectCorners;
public Action onAddHead;
public Action onRemoveHead;
public Action onAddEnd;
public Action onRemoveEnd;
public Text nameT;
public Text inputT;
void Start()
{
Init();
}
public void Init()
{
viewRect = transform.parent.parent.GetComponent<RectTransform>();
rect = this.GetComponent<RectTransform>();
rectCorners = new Vector3[4];
viewRect.GetWorldCorners(rectCorners);
viewStart = rectCorners[1].y;
viewEnd = rectCorners[0].y;
}
void Update()
{
OnRecyclingItem();
}
//超界變false；
private void OnRecyclingItem()
{
rect = this.GetComponent<RectTransform>();
rectCorners = new Vector3[4];
rect.GetWorldCorners(rectCorners);
if (IsFirst())
{
if (rectCorners[0].y > viewStart)
{
//隱藏頭節點
if (onRemoveHead != null)
onRemoveHead();
}
if (rectCorners[1].y < viewStart)
{
//添加頭節點-頭節點不為數據起始點
if (onAddHead != null)
onAddHead();
}
}
if (IsLast())
{
if (rectCorners[0].y > viewEnd)
{
//添加尾節點-尾節點不為數據末尾
if (onAddEnd != null)
onAddEnd();
}
if (rectCorners[1].y < viewEnd)
{
//隱藏尾節點
if (onRemoveEnd != null)
onRemoveEnd();
}
}
}
private bool IsFirst()
{
for (int i = 0; i < transform.parent.childCount; ++i)
{
Transform tf = transform.parent.GetChild(i);
if (tf.gameObject.activeSelf)
{
if (tf == this.transform)
{
return true;
}
break;
}
}
return false;
}
private bool IsLast()
{
for (int i = transform.parent.childCount-1; i >= 0 ; i--)
{
Transform tf = transform.parent.GetChild(i);
if (tf.gameObject.activeSelf)
{
if (tf == this.transform)
{
return true;
}
break;
}
}
return false;
}
public bool IsInView()
{
rect = this.GetComponent<RectTransform>();
rect.GetWorldCorners(rectCorners);
if (rectCorners[1].y > viewEnd || rectCorners[0].y < viewStart)
return false;
return true;
}
public void RefreshData(Data da)
{
nameT.text = da.name;
inputT.text = da.text;
Vector2 oldSize = rect.sizeDelta;
rect.sizeDelta = new Vector2(oldSize.x, 200 + da.h);
}
}
測試類
初始化數據，隨機4中寬度的item；
void InitData()
{
int[] hArr = new int[4];
hArr[0] = 0;
hArr[1] = 190;
hArr[2] = 190 * 2;
hArr[3] = 190 * 3;
for (int i = 0; i < 30; ++i)
{
Data da = new Data();
da.name = "小紫蘇" + i.ToString();
da.text = "000000" + i.ToString();
int index = UnityEngine.Random.Range(0, 3);
da.h = hArr[index];
scrollData.allDatas.Add(da);
}
}
添加三個按鈕,及相應的響應方法；
1.添加20組數據
private void AddData()
{
int[] hArr = new int[4];
hArr[0] = 0;
hArr[1] = 190;
hArr[2] = 190 * 2;
hArr[3] = 190 * 3;
Data[] newData = new Data[20];
for (int i = 0; i < 20; ++i)
{
Data da = new Data();
da.name = "小紫蘇" + i.ToString();
da.text = "000000" + i.ToString();
int index = UnityEngine.Random.Range(0, 3);
da.h = hArr[index];
newData[i] = da;
}
scrollDat
回到頂部或底部需要有過程，因此需要在update中運行，也可以用插值；
2.回到頂部
private void OnGoHead()
{
if (isGoHead)
isGoHead = false;
else
isGoHead = true;
}
private void OnGoLast()
{
if (isGoLast)
isGoLast = false;
else
isGoLast = true;
}
3.回到底部
private void GoHead()
{
if (!isGoHead)
return;
float curPos = scroll.verticalNormalizedPosition;
if (curPos != 1)
{
curPos += 0.01f;
if (curPos >= 1)
{
curPos = 1;
isGoHead = false;
}
scroll.verticalNormalizedPosition = curPos;
}
}
private void GoLast()
{
if (!isGoLast)
return;
float curPos = scroll.verticalNormalizedPosition;
if (curPos != 0)
{
curPos -= 0.01f;
if (curPos <= 0)
{
curPos = 0;
isGoLast = false;
}
scroll.verticalNormalizedPosition = curPos;
}
}
坑點
1.ScrollView回滾設置延遲；
回滾判斷是通過verticalNormalizedPosition的API，更改這個值后需要間隔一幀才會修改，因為可能導致判斷兩次；
解決方法，延遲調用1s——Invoke;
2.錨點設置；
錨點的設置以及UI的自適應會直接影響項目回滾的方向和位置；
大部分位置出錯都是因為錨點設置錯誤；
3.數據需要網絡請求，自適應會失效；
網絡數據一般都是異步，所以判斷會做多次，因此數據上要求提前計算好item的寬度；
項目工程我上傳到Gitee，可自行下載學習；https://gitee.com/small-perilla/scroll-view
以上是我對滾動復用組件的總結，如果有更好的意見，歡迎給作者評論留言；