UGUI 自定義滾動選擇串列 ListView

串列在游戲的UI中是非常常見的，例如選服頁面，商城頁面，獎勵頁面等等都會有串列的存在，文中我們將這些串列稱為ListView（類似于fgui的GList），而串列中的每項稱作Item，

首先我們來分析下，我們的ListView需要實作哪些功能，以及如何實作

Demo：https://github.com/luckyWjr/Demo （ListView目錄），

當然了，具體的功能還得看具體的需求，大家可以自行進行相應的變更，

簡單的看下實作后的效果：

單選模式： 多選模式：

虛擬串列：（可以看見一共有40個Item，但是并沒有生成40個GameObject）

前面思路大致理清后，接著就是上手來具體實作了，（代碼量比較多，因此下面的介紹不會涉及到全部的代碼，基本就是一個思路的介紹，想看完整代碼的可以自行去看Demo）

首先我們先新建一個ScrollView，來替我們實作滾動的功能，ScrollView中的Content即是我們的Item容器，也就是ListView，

我們新建一個腳本組件，ListView.cs用于實作串列相關功能，將其掛載在Content上，然后為其添加一些需要設定的屬性，例如：

大多數情況下，無論垂直滾動還是水平滾動，都是從左上角開始的，因此案例中我們將ListView的pivot，anchorMax，anchorMin都設定為(0,1)，（要是有其他角做起點的奇葩設計，可以自行修改下代碼）

接著，我們來創建一個簡單的Item模板，當做該ListView要顯示的Item，例如：

我們再創建一個腳本組件，ListViewItem.cs用來處理我們的Item，具體代碼如下：

[RequireComponent(typeof(Button))]
public abstract class ListViewItem : MonoBehaviour
{
    [SerializeField] GameObject m_selectedGameObject;
    
    public ListView.ESelectType selectType { get; private set; }
    Action<ListViewItem> m_onValueChanged;
    Action<ListViewItem> m_onClicked;//適用于只在Item被單擊時做操作的情況
    RectTransform m_rectTransform;
    Button m_button;
    bool m_isSelected;

    public bool isSelected
    {
        get => m_isSelected;
        set
        {
            if (m_isSelected != value)
            {
                m_isSelected = value;
                UpdateSelectedUI();
            }
        }
    }
    void Awake()
    {
        m_button = GetComponent<Button>();
        isSelected = false;
        m_button.onClick.AddListener(OnClicked);

        m_rectTransform = GetComponent<RectTransform>();
        m_rectTransform.anchorMin = Vector2.up;
        m_rectTransform.anchorMax = Vector2.up;
        m_rectTransform.pivot = new Vector2(0.5f, 0.5f);
    }
    public void Init(ListView.ESelectType type, Action<ListViewItem> onValueChanged, Action<ListViewItem> onClicked)
    {
        selectType = type;
        m_onValueChanged = onValueChanged;
        m_onClicked = onClicked;
    }
    void OnClicked()
    {
        bool isValueChange = false;
        if (selectType == ListView.ESelectType.Single)
        {
            if (!isSelected)
                isValueChange = true;
            isSelected = true;
        }
        else
        {
            isValueChange = true;
            isSelected = !isSelected;
        }
        if(isValueChange)
            m_onValueChanged?.Invoke(this);
        m_onClicked?.Invoke(this);
    }
    protected virtual void UpdateSelectedUI()
    {
        if (m_selectedGameObject != null)
            m_selectedGameObject.SetActive(isSelected);
    }
}

首先這是一個抽象類，因為不同功能下的Item的內容都是不一樣的，例如服務器串列的Item可能只顯示一個服務器名稱，而商城串列的Item需要顯示Icon，名稱，價格等等，因此針對具體的Item需要具體的繼承實作，例如例子中的GoodsItem，同時掛載在模板上的組件也是繼承后的Item類：

public class GoodsItem : ListViewItem
{
    [SerializeField] Text m_nameText;
    [SerializeField] Text m_priceText;

    public GoodsData goodsData { get; private set; }

    public void Init(GoodsData data)
    {
        goodsData = https://blog.csdn.net/wangjiangrong/article/details/data;
        m_nameText.text = data.name;
        m_priceText.text = data.price.ToString();
    }
}

接著回到ListViewItem中，在里面我們添加一個bool值isSelected用來管理Item是否選中的狀態，同時為了方便計算pivot設定為(0.5,0.5)，anchorMax，anchorMin設定為(0,1)，在按鈕被點擊時，處理點擊事件以及是否選中的狀態改變事件，

然后我們需要根據我們的Item模板以及資料，生成一個個我們需要的Item，放在ListView中，同時Item也要顯示相對應的資料，

通常情況，在顯示顯示Item之前，我們都生成好了相應的資料，而ListView只需要關心我有幾個Item，而不需要關心具體的資料，因為有關Item顯示資料的邏輯會在ListView外（也就是設定ListView的類中）去實作，因此我們只需要通過設定ListView中Item的數量即可，每次設定即會顯示對應數量的Item，以及重繪所有Item，重置選中的Item（具體要求可以視需求做修改）

public int itemCount
{
    get => m_itemList.Count;
    set
    {
        ResetPosition();
        ClearAllSelectedItem();
        int oldCount = m_itemList.Count;
        if (value > oldCount)
        {
            for (int i = oldCount; i < value; i++)
                AddItem();
        }
        else
            RemoveItem(value, oldCount - 1);
        Refresh();
    }
}

public void Refresh()
{
    for (int i = 0, count = m_itemList.Count; i < count; i++)
    {
        ListViewItem item = m_itemList[i];
        m_onItemRefresh?.Invoke(i, item);
    }
}

我們使用m_itemList（List<ListViewItem>）來存放我們的Item，每次數量更新時，多的丟到物件池中，少的從物件池中取出來，然后呼叫m_onItemRefresh的委托，該委托的作用就是外部根據對應資料重繪Item，

void OnItemRefresh(int index, ListViewItem item)
{
    GoodsItem goodsItem = item as GoodsItem;
    goodsItem.Init(currentList[index]);
}

需要的Item都生成好了后，我們還需要將他們進行位置的擺放，否則都擠在一起了，

首先，我們需要知道顯示的視窗大小，以及每個Item的大小，同時如果是垂直滾動，我們需要知道每行顯示多少個Item，如果是水平滾動，那就需要知道每列顯示多少個Item：

void GetLayoutAttribute()
{
    m_itemSize = itemPrefab.GetComponent<RectTransform>().rect.size;
    m_initialSize = m_rectTransform.parent.GetComponent<RectTransform>().rect.size;//Viewport Size
    //計算行或列
    if (m_flowType == EFlowType.Horizontal)
    {
        m_rowCount = m_constraintCount;
        if (m_rowCount <= 0)
            m_rowCount = Mathf.FloorToInt((m_initialSize.y + m_itemSpace.y) / (m_itemSize.y + m_itemSpace.y));
        if (m_rowCount == 0)
            m_rowCount = 1;
    }
    else
    {
        m_columnCount = m_constraintCount;
        if (m_columnCount <= 0)
            m_columnCount = Mathf.FloorToInt((m_initialSize.x + m_itemSpace.x) / (m_itemSize.x + m_itemSpace.x));
        if (m_columnCount == 0)
            m_columnCount = 1;
    }
}

知道這些后，我們就可以根據Item的數量，計算出整個ListView的大小，根據下標知道每個Item在第幾行第幾列，設定其位置，我們新增一個bool值 m_isBoundDirty ，當item的數量發生變化時，將該值設為true，然后在Update中，檢測到其值為true時，重繪ListView的大小以及每個Item的位置（此時左上角對齊的好處，簡化了我們的運算），

void UpdateBounds()
{
    SetSize();
    for (int i = 0, count = itemCount; i < count; i++)
        m_itemList[i].transform.localPosition = CalculatePosition(i);
    
    m_isBoundsDirty = false;
}

Vector2 CalculatePosition(int index)
{
    int row, column;
    if (m_flowType == EFlowType.Horizontal)
    {
        row = index % m_rowCount;
        column = index / m_rowCount;
    }
    else
    {
        row = index / m_columnCount;
        column = index % m_columnCount;
    }
    
    float x = column * (m_itemSize.x + m_itemSpace.x) + m_itemSize.x / 2;
    float y = row * (m_itemSize.y + m_itemSpace.y) + m_itemSize.y / 2;
    
    return new Vector2(x, -y);
}

現在只剩下Item選中狀態的處理了，單個Item的選中狀態我們在ListViewItem中按鈕的點擊事件進行了處理，但是多個Item（例如選中另一個時，要取消之前選中的Item）以及狀態改變時的委托，我們在ListView中進行處理（m_selectedItemList即存放選中的Item）：

void OnValueChanged(ListViewItem item)
{
    if (item.isSelected)
    {
        if (m_selectType == ESelectType.Single)
        {
            if (m_selectedItemList.Count > 0)
            {
                //取消之前的選中狀態
                m_selectedItemList[0].isSelected = false;
                int lastSelectedIndex = m_itemList.IndexOf(m_selectedItemList[0]);
                m_onItemValueChanged?.Invoke(lastSelectedIndex, false);
                m_selectedItemList.Clear();
            }
            m_selectedItemList.Add(item);
        }
        else
            m_selectedItemList.Add(item);
    }
    else
    {
        m_selectedItemList.Remove(item);
    }
    int index = m_itemList.IndexOf(item);
    m_onItemValueChanged?.Invoke(index, item.isSelected);
}

m_onItemValueChanged即是選中狀態修改的委托，在外部可以用其做一些選中時的邏輯處理，例如：

void OnItemValueChange(int index, bool isSelected)
{
    GoodsData data = https://blog.csdn.net/wangjiangrong/article/details/currentList[index];
    m_amount = m_amount + (isSelected ? 1 : -1) * data.price;
    m_amountText.text = $"總額：{m_amount}";
}

這樣一個簡單的ListView基本就實作了，我們可以通過初始化方法，來進行一些引數的設定，類似Item模板，委托等：

public void Init(GameObject prefab, Action<int, ListViewItem> refresh, Action<int, bool> valueChanged, Action<ListViewItem> clicked)
{
    if (prefab.GetComponent<ListViewItem>() == null)
    {
        Debug.LogError("ListView prefab dont have ListViewItem Component");
        return;
    }
    itemPrefab = prefab;
    m_pool = new GameObjectPool(m_rectTransform, itemPrefab);
    m_onItemRefresh = refresh;
    m_onItemValueChanged = valueChanged;
    m_onItemClicked = clicked;
    
    GetLayoutAttribute();
}

在外部我們只需要呼叫Init方法，然后設定itemCount即可顯示我們的ListView

m_listView.Init(m_goodsItemPrefab, OnItemRefresh, OnItemValueChange, OnItemClick);
m_listView.onSelectedItemCleared = OnListViewSelectedItemCleared;
m_listView.itemCount = m_shenbingDataList.Count;

接下來就是我們虛擬串列的處理了，按照上面的做法，假設我們有上百個Item，那么就會生成上百個GameObject，這顯然是很不好的，一種處理方法就是分頁（Demo中暫未添加該邏輯），例如我們一次可以看見12個Item，每次滑動的時候將這12個Item都進行重繪，類似翻頁的效果，這樣就可以保證幾百個Item的時候只有12個GameObject，但是瀏覽起來就沒有正常滾動時舒服，因此此時就可以使用我們虛擬串列的方法來完美的實作，

首先我們知道，即使有幾百個Item，但是我們每次能看見的始終是視窗中顯示的那幾個，其余都是看不見的，而我們每次滾動的時候，無論如何都是會滾進來一行或一列新的Item，同時滾出去一行或一列舊的Item，那么我們如果將這些滾出去的舊的Item當做新的Item滾進來，像形成一個圈這樣，然后重繪這部分Item所對應的資料，就可以實作以少量Item實作大量Item滾動的效果，（具體效果可以看文章最前面的GIF）

首先雖然我們的Item只有幾個，但是仍然需要紀錄真實每項的一些資料資訊，我們稱之為ItemInfo，ItemInfo的數量和我們資料的數量相等，

class ItemInfo
{
    public ListViewItem item;
    public bool isSelected;
}

例如假設我們下標2的Item被選中了（ListViewItem.isSelected = true），然后我們往后滾，當之前下標2對應的Item被復用時（此時的它可能對應著下標12），肯定不能還是之前的選中狀態，而應該是未選中狀態（ListViewItem.isSelected = false），當我們再次顯示下標2的Item的時候，那么怎么知道它之前是被選中的呢？那就是通過ItemInfo來處理，修改狀態的時候修改對應下標的ItemInfo的isSelected的值，顯示的時候讀取對應下標ItemInfo的值即可，

又比如，在滾動重繪Item的時候，因為Item一直是被復用的，我們如果知道該下標下是否已經有對應的Item了，同樣通過設定讀取ItemInfo可以來解決，

和之前一樣，我們同樣通過設定ItemCount來重繪我們的ListView，我們在設定ItemCount時，對存盤ItemInfo的List進行相應的處理：

public int itemCount
{
    get => m_isVirtual ? m_itemRealCount : m_itemList.Count;
    set
    {
        if (m_isVirtual)
        {
            m_itemRealCount = value;
            SetSize();
            int oldCount = m_itemInfoList.Count;
            if (m_itemRealCount > oldCount)
            {
                for (int i = oldCount; i < m_itemRealCount; i++)
                {
                    ItemInfo info = new ItemInfo();
                    m_itemInfoList.Add(info);
                }
            }
            else
            {
                for (int i = m_itemRealCount; i < oldCount; i++)
                {
                    if (m_itemInfoList[i].item != null)
                    {
                        RemoveItem(m_itemInfoList[i].item);
                        m_itemInfoList[i].item = null;
                    }
                }
            }
        }
    }
}

接著就是最重要的，如何實作Item的復用的問題了，我的思路是，我們的ListView大小依舊按照真實數量來設定，這樣在滾動ListView的時候，我們就可以根據ListView的偏移來計算出當前視窗應該顯示的第一個Item所對應的下標m_startIndex，

int GetCurrentIndex(float position)
{
    if (m_flowType == EFlowType.Horizontal)
    {
        position = -position;
        if (position < m_itemSize.x) return 0;
        position -= m_itemSize.x;
        return (Mathf.FloorToInt(position / (m_itemSize.x + m_itemSpace.x)) + 1) * m_rowCount;
    }
    else
    {
        if (position < m_itemSize.y) return 0;
        position -= m_itemSize.y;
        return (Mathf.FloorToInt(position / (m_itemSize.y + m_itemSpace.y)) + 1) * m_columnCount;
    }
}

再根據視窗的大小，Item的大小以及Item的間距，計算出Item的結束下標m_endIndex，也就是從這個下標開始的Item是玩家看不到的，

int oldStartIndex = m_startIndex, oldEndIndex = m_endIndex;
if (m_flowType == EFlowType.Horizontal)
{
    float currentX = m_rectTransform.localPosition.x;// <0
    m_startIndex = GetCurrentIndex(currentX);
    float endX = currentX - m_initialSize.x - m_itemSize.x - m_itemSpace.x;
    m_endIndex = GetCurrentIndex(endX);
}
else
{
    float currentY = m_rectTransform.localPosition.y;// >0
    //上下滑動，根據listview的y值計算當前視圖中第一個item的下標
    m_startIndex = GetCurrentIndex(currentY);
    //根據視圖高度，item高度，間距的y，計算出結束行的下標
    float endY = currentY + m_initialSize.y + m_itemSize.y + m_itemSpace.y;
    m_endIndex = GetCurrentIndex(endY);
}
if(oldStartIndex == m_startIndex && oldEndIndex == m_endIndex)
    return;

如果兩個下標沒變，那就說明用戶看見的還是這些Item，就不需要改變，但是當有新的Item移入，或者舊的Item移出時，m_startIndex或者m_endIndex就會發生改變，當新的Index大于舊的說明串列是在往右或者往下滾動，我們可以從前面尋找可復用的Item，反之則從后尋找，若找不到可復用的Item，則生成新的Item，具體邏輯如下：

//渲染當前視圖內需要顯示的item
for (int i = m_startIndex; i < itemCount && i < m_endIndex; i++)
{
    bool needRender = false;//是否需要重繪item ui
    ItemInfo info = m_itemInfoList[i];
    if (info.item == null)
    {
        int j, jEnd;
        if (oldStartIndex < m_startIndex || oldEndIndex < m_endIndex)
        {
            //說明是往下或者往右滾動，即要從前面找復用的Item
            j = 0;
            jEnd = m_startIndex;
        }
        else
        {
            j = m_endIndex;
            jEnd = itemCount;
        }
        for (;j < jEnd; j++)
        {
            if (m_itemInfoList[j].item != null)
            {
                info.item = m_itemInfoList[j].item;
                m_itemInfoList[j].item = null;
                needRender = true;
                break;
            }
        }
    }
    
    //前后找不到的話，添加新的item
    if (info.item == null)
    {
        info.item = AddItem();
        needRender = true;
    }
    //更新位置，是否選中狀態，以及資料
    if (isForceRender || needRender)
    {
        info.item.transform.localPosition = CalculatePosition(i);
        info.item.isSelected = info.isSelected;
        m_onItemRefresh?.Invoke(i, info.item);
    }
}

這樣就可以實作我們虛擬串列的功能了，