[UGUI]ListLayoutGroup--可重用的滚动列表

Posted U3D及其他

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[UGUI]ListLayoutGroup--可重用的滚动列表相关的知识,希望对你有一定的参考价值。

一、相同cell size的可重用列表:

为了不生成太多的GameObject,当滚动的时候,需要将出框的item重复利用起来。这个网上已经有了很多例子。我为了项目使用方便,在GridLayoutGroup基础上修改了一下,配合ScrollRect使用

首先在传入数据的时候,需要知道要显示多少数据,为了拖动时看不到突然消失的item,会多显示一个:

    private float GetScrollRectSize()
    {
        var rectSize = m_scrollRect.rectTransform.rect.size;
        return IsVertical ? rectSize.y : rect.y;
    }
    private float GetCellSize()
    {
        return IsVertical ? cellSize.y + spacing.y : cellSize.x + spacing.x;
    }
    public void SetData<P, D>(ICollection<D> dataList, System.Action<int, P, D> setContentHandler)
        where P : MonoBehaviour
    {
        ........
        displayListCount = Mathf.CeilToInt(GetScrollRectSize () / GetCellSize()) + 1;
        .......
    }

 

在滚动的时候,首先需要知道最左上角的数据index:

    public int GetStartIndex()
    {
        if (m_dataList == null || m_dataList.Count == 0)
            return 0;
        float anchorPosition = IsVertical ? rectTransform.anchoredPosition.y : rectTransform.anchoredPosition.x;
        if(!IsVertical)
            anchorPosition *= -1;
        anchorPosition -=  GetCellSize() * 0.5f - GetPadding();
        return (int)(anchorPosition / GetCellSize()) * constraintCount;
    }

 

为了不产生其他开销,Item的实际顺序不会改动,这就需要在已有的顺序中对其在数据中的实际顺序做映射,举个例子,如果一屏可以显示四个数据,那么对应不同的startIndex,四个item的映射关系如下:

Start Index Actual Index
0 0 1 2 3
1 4 1 2 3
2 4 5 2 3

 

 

 

 

如下公式可得到Actual Index(对于无限滚动的列表,start index可能小于0):

    private  int GetActualIndex(int startIndex, int index)
    {
        var count = GetChildCount();
        return ((startIndex + (startIndex >= 0 ? (count - index - 1) : -index)) / count * count + index);
    }

 

滚动时,可根据Actual Index设置Item的位置,并对比滚动前的Actual Index是否改变,决定是否更新数据:

    private void SetCellsAlongAxis (int axis)
    {
        ......
        for(int i = 0; i < childCount; ++i) 
        {
            var child = childList[i];
                        ...
            if (IsVertical) {
                positionX = Mathf.Abs(actualIndex) % cellsPerMainAxis;
                positionY = actualIndex / cellsPerMainAxis;
            } else {
                positionX = actualIndex / cellsPerMainAxis;
                positionY = Mathf.Abs(actualIndex) % cellsPerMainAxis;
            }

            if (cornerX == 1)
                positionX = actualCellCountX - 1 - positionX;
            if (cornerY == 1)
                positionY = actualCellCountY - 1 - positionY;
            
......
if(actualIndex != previousIndex) { SetItemContent(acutalIndex, child, m_dataList[i]); } SetChildAlongAxis (child, 0, startOffset.x + (cellSize [0] + spacing [0]) * positionX, cellSize [0]); SetChildAlongAxis (child, 1, startOffset.y + (cellSize [1] + spacing [1]) * positionY, cellSize [1]); }
    }

 

二 不同cell size的可重用列表

在一的基础上稍微做一下修改

为了滚动条大小正确,需要提前知道计算出data对应的cell size

protected List<Vector2> m_sizeList = new List<Vector2>();
protected List<float> m_positionList = new List<float>();
protected float m_minSize = float.MaxValue;//同屏item的最大数量由这个决定

 

        public void ReCalcItemSize(bool rebuildSizeList = false)
        {
            if (m_getSizeHandler == null)//外部传入,计算data对应的cell size
                return;
            if(rebuildSizeList)
                m_sizeList.Clear ();
            m_positionList.Clear ();
            m_minSize = float.MaxValue;
            m_otherMaxSize = 0f;
            float totalSize = 0f;
            m_positionList.Add (0);
            for (int i = 0; i < m_dataList.Count; ++i)
            {
                var size = Vector2.zero;

                if (rebuildSizeList)
                {
                    size = m_getSizeHandler (i, m_dataList [i]);
                } else
                {
                    size = m_sizeList [i];
                }
                var cur = (isVertical ? size.y : size.x);
                m_minSize = Mathf.Min (cur, m_minSize);
                m_otherMaxSize = Mathf.Max ((isVertical ? size.x : size.y), m_otherMaxSize);
                if(rebuildSizeList)
                    m_sizeList.Add (size);
                totalSize += cur + spacing;
                m_positionList.Add (totalSize);
            }

            m_displayListCount = Mathf.CeilToInt(GetScrollRectSize() / (m_minSize + spacing));
            ...
        }

接着需要重写方法,让ScrollRect得到正确的滚动范围:

    public override void CalculateLayoutInputHorizontal()
    {
        CalcAlongAxis(0, isVertical);
    }

    public override void CalculateLayoutInputVertical()
    {
        CalcAlongAxis(1, isVertical);
    }
        protected void CalcAlongAxis(int axis, bool calcVertical)
        {
            if (m_ScrollRect == null)
                return;
            float combinedPadding = (axis == 0 ? padding.horizontal : padding.vertical);

            float totalMin = combinedPadding;

            bool alongOtherAxis = (calcVertical ^ (axis == 1));
            if (alongOtherAxis)
                totalMin += m_otherMaxSize;
            
            if (!alongOtherAxis && m_positionList.Count > 0)
            {
                totalMin += m_positionList[m_positionList.Count - 1] - spacing;
            }
            SetLayoutInputForAxis(totalMin, totalMin, totalMin, axis);
        }    

最后计算StartIndex也要做一下修改:

        protected int GetStartIndex()
        {
            if (m_dataList == null || m_dataList.Count == 0)
                return 0;
            var curPosition = (isVertical ? rectTransform.anchoredPosition.y : rectTransform.anchoredPosition.x);
            if (isVertical)
                curPosition -= padding.top;
            else
                curPosition = -curPosition - padding.left;

            int index = 0;
            for (int i = 0; i < m_positionList.Count; ++i)
            {
                if (m_positionList [i] > curPosition)
                    break;
                index = i;
            }
            return index;
        }

 

比较繁琐,主要是需要提前计算好所有data对应的cell size,这个是不能省的。

以上是关于[UGUI]ListLayoutGroup--可重用的滚动列表的主要内容,如果未能解决你的问题,请参考以下文章

可重入锁详解(什么是可重入)

UGUI CanvasUpdate

UGUI 字体背景长度自适应

UGUI与NGUI的区别与优缺点

UGUI初学习--------Canvas

转:UGUI与NGUI的区别与优缺点