Unity3D ScrollRect+ContentSizeFitter+GridLayoutGroup实现无限滚动(一)

在工作中有时候我们会遇到无限滚动，比如相册，广告, 排行榜, 邮件等，今天就用ScrollRect来实现无限滚动，

按照滚动区域的属性，展示给玩家看的只是一小块区域，比如列表中有100封邮件，其实只要显示个七八封就够了，剩下的，在向上滑动的时候，把第一排移动到最后一排，替换内容

这样做能提高绘制效率，但是因为是在滑动的时候动画创建，所以会稍有卡顿，所以只适用于超长列表的情况使用，至于到底多长需要自己取舍。

声明:本篇的代码部分摘自于http://blog.csdn.net/huutu 转载请带上 http://www.liveslives.com/

先看一下实现的效果图:

技术点介绍(这里我只以往上拖向下扩展进行介绍):

(一):首先UI界面布置

要注意ScrollRect的Pivot的位置要置于最上方不然运行时拉动的时候就会暴露,试一下就知道了

设置格子的布局

(二): 技术点解析:

//主要是通过获得Panel_Scroll的锚点PosY的值,这是不变的,Panel_Scroll的高即是屏幕的高1080
//获得Panel_Scroll的RectTransform PosY=1080
 float scrollRectUp = scrollRect.transform.TransformPoint(Vector3.zero).y;
//纵向滑动改变的只是格子锚点的PosY
Vector3 childBottomLeft = new Vector3(children[0].anchoredPosition.x, children[0].anchoredPosition.y - gridLayoutGroup.cellSize.y, 0f); 
//将格子的局部坐标转为世界坐标再与1080比较,移动格子,当格子的走过的高当大于等于1080时,那么重新设置该格子的层级SetAsLastSibling(即从index=0的位置移动到index=5的位置.)
float childBottom = transform.TransformPoint(childBottomLeft).y;

(三): 向上拉向下扩展的代码:

if (offsetY > 0)
            {
                //向上拉，向下扩展;
                {
                    if (realIndex >= amount - 1)
                    {
                        startPosition = currentPos;
                        return;
                    }

                    float scrollRectUp = scrollRect.transform.TransformPoint(Vector3.zero).y;
                    Vector3 childBottomLeft = new Vector3(children[0].anchoredPosition.x, children[0].anchoredPosition.y - gridLayoutGroup.cellSize.y, 0f);    
                    float childBottom = transform.TransformPoint(childBottomLeft).y;
                    if (childBottom >= scrollRectUp)
                    {
                        //Debug.Log("childBottom >= scrollRectUp");

                        //移动到底部;
                        for (int index = 0; index < gridLayoutGroup.constraintCount; index++)
                        {
                            children[index].SetAsLastSibling();
                            children[index].anchoredPosition = new Vector2(children[index].anchoredPosition.x, children[children.Count - 1].anchoredPosition.y - gridLayoutGroup.cellSize.y - gridLayoutGroup.spacing.y);
                            Debug.Log("这是格子的PosX" + children[index].anchoredPosition.x);
                            Debug.Log("这是格子的PosY" + children[children.Count - 1]);
                            Debug.Log("第几个啦" + gridLayoutGroup.constraintCount);
                            realIndex++;

                            if (realIndex > amount - 1)
                            {
                                children[index].gameObject.SetActive(false);
                            }
                            else
                            {
                                UpdateChildrenCallback(realIndex, children[index]);
                            }
                        }

                        //GridLayoutGroup 底部加长;
                        rectTransform.sizeDelta += new Vector2(0, gridLayoutGroup.cellSize.y + gridLayoutGroup.spacing.y);

                        //更新child;
                        for (int index = 0; index < children.Count; index++)
                        {
                            children[index] = transform.GetChild(index).GetComponent();
                        }
                    }
                }
            }

下一篇给大家分享一个无限滚动排行榜的Demo

以上是对原博主的案例调试解析,如有疑问欢迎交流我的邮箱[email protected]

工程案例下载:

https://github.com/WMengTing/InfiniteScrolling