UIWrapContent(NGUI长列表优化利器)

NGUI长列表优化利器

优化原理

NGUI3.7.x以上版本有个新组件 UIWrapContent ，当我们的列表内容很多时,可以进行优化。它不是一次生成全部的child，而是只有固定数量的child，在滑动时更新child的内容。

当前NGUI3.6.X也有此组件，不过不完善，比如更新每一条渲染未实现，protected virtual void UpdateItem (Transform item, int index) ，还有未提供便捷的接口供外部调用。

UIWrapContent详解

无需循环滚动

如果你需要无限滚动，那么请设置Range Limit，这个范围是在：-最大数量+1 ~ 0。至于前面的负号，你可以去看看它的实现原理。比如你共显示20条数据，那么范围就是-20+1~0(-19~0)。

重叠？

如果你的内容之间会出现如下所示的重叠现象，那是Item Height的值过小

这个Item Height表示每两个Item之间间隔，这儿不是每个item的高度，所以请设置成和UIGrid的Height一样的值，当然如果你是水平滑动，就请和Cell Width一样。如果没有UIGrid，那么就设置比item的高度大一些。

名字被改了？

在运行的时候，如果是老版本的NGUI，那么很不幸的是，Item的名字会被修改，这个某些情况下还是有影响的。

如果你不想名字被修改，打开 NGUI\Scripts\Interaction\UIWrapContent.cs，在 WrapContent 方法，查找 t.name = realIndex.ToString(); 并删除。(在ngui3.7.3中一共用四行，全删除)

重要方法

public delegate void OnInitializeItem (GameObject go, int wrapIndex, int realIndex);

执行渲染的委托，DoRender(要渲染的对象，索引[0开始]) 真正开始渲染

private void OnInitItem(GameObject go, int wrapindex, int realindex)

{

    var index = Mathf.Abs(realindex);// 取绝对值

    CacheObject2Index[go] = index;

    if (CheckActive(go, index) && _hasRefresh)

    {

        DoRender(go, index);

    }

}

在滚动时调用，更新当前滚动未尾的Item

    protected virtual void UpdateItem(Transform item, int index)

    {

        if (onInitializeItem != null)

        {

            int realIndex = (mScroll.movement == UIScrollView.Movement.Vertical) ?

                Mathf.RoundToInt(item.localPosition.y / itemSize) :

                Mathf.RoundToInt(item.localPosition.x / itemSize);

            onInitializeItem(item.gameObject, index, realIndex);

        }

    }

UIWrapContent封装

UI结构

使用此Help，你的UI结构可以是以下任意一种(注：如果是NGUI3.9.x建使用结构二)

下图左UI结构: ListPanel上绑定了UIPanel、UIScrollView，UIWrapContent、UIGrid，即只有一层结构

下图右结构：Scrollview上绑定了UIPanel，UIScrollview，WrapContent上绑定了UIGrid和UIWrapContent，分两层结构

组件源码

为了减少代码量，我对UIWrapContent进行了一层封装，代码如下：

需要NGUI3.7.x之后的版本

update log

2015-10-25 增加可以设置顺序（从左到右，从上到下）

2016-05-28

改掉foreach，减少GC，修改error

已知bug:invertOrder=true时，有莫名的表现，日后修复。

using UnityEngine;

using System.Collections;

using System.Collections.Generic;

/// <summary>

/// 对NGUI的 UIWrapContent的封装，如果低于NGUI3.7.x，请使用高版本的UIWrapContent替换

/// 目录结构：(NGUI3.9.7)

///     -GameObject绑定 UIPanel，UIScrollView

///         -GameObject绑定 UIWrapContent，[UIGrid]

///             -Item (具体的滑动内容)

/// 使用方法：var WrapContentHelper = UIWrapContentHelper.Create(WrapContent);

/// by 赵青青

/// </summary>

public class UIWrapContentHelper

{

    public delegate void UIWrapContentRenderDelegate(GameObject obj, int index);

    /// <summary>

    ///obj:要渲染的对象; index:索引，从0开始

    /// </summary>

    public UIWrapContentRenderDelegate OnRenderEvent;

    private int _count;//总数

    private bool _hasRefresh = false;//是否已刷新

    private UIWrapContent _wrapContent;

    private UIPanel _panel;

    private UIScrollView _scrollView;

    private Vector2 _initPanelClipOffset;

    private Vector3 _initPanelLocalPos;

    /// <summary>

    /// 缓存起来上次渲染的对象对应索引

    /// </summary>

    private Dictionary<GameObject, int> CacheObject2Index = new Dictionary<GameObject, int>();

    private UIWrapContentHelper(){}

    private UIWrapContentHelper(UIWrapContent uiWrapContent)

    {

        if (uiWrapContent == null)

        {

            Debug.LogError("UIWrapContentHelper 传入了NULL");

            return;

        }

        _wrapContent = uiWrapContent;

        //_wrapContent.hideInactive = false;

        _wrapContent.onInitializeItem = OnInitItem; //NOTE NGUI 3.7.x以上版本才有此功能

        //NOTE UIPanel 建议挂在UIWrapContent的父级,NGUI3.9.7非父级我这儿出现异怪现象

        _panel = _wrapContent.gameObject.GetComponent<UIPanel>();

        var panelParent = _wrapContent.transform.parent;

        if (_panel == null && panelParent != null)

        {

            _panel = panelParent.GetComponent<UIPanel>();

        }

        if (_panel == null)

        {

            Debug.LogError(uiWrapContent.name + "的父节点没有UIPanel");

            return;

        }

        _scrollView = _panel.GetComponent<UIScrollView>();

        _initPanelClipOffset = _panel.clipOffset;

        _initPanelLocalPos = _panel.cachedTransform.localPosition;

    }

    //初始化数据，Init或Open时调用

    public void ResetScroll()

    {

        if (_panel == null || _wrapContent == null || _scrollView == null)

        {

            Debug.LogWarning("panel or  wrapContent , scrollView is null ");

            return;

        }

        _panel.clipOffset = _initPanelClipOffset;

        _panel.cachedTransform.localPosition = _initPanelLocalPos;

        // 重设组件~索引和位置

        var index = ;

        foreach (var oChildTransform in _wrapContent.transform)

        {

            var childTransform = (Transform)oChildTransform;

            // NOTE: 横方向未测试

            if (_scrollView.movement == UIScrollView.Movement.Vertical)

            {

                childTransform.SetLocalPositionY(-_wrapContent.itemSize * index);

            }

            else if (_scrollView.movement == UIScrollView.Movement.Horizontal)

            {

                childTransform.SetLocalPositionX(-_wrapContent.itemSize * index);

            }

            CacheObject2Index[childTransform.gameObject] = index;

            index++;

        }

        //fix soft clip panel

        if (_panel.clipping == UIDrawCall.Clipping.SoftClip) _panel.SetDirty();

    }

    /// <summary>

    /// 设置多少项

    /// </summary>

    /// <param name="count"></param>

    /// <param name="invertOrder">是否反转</param>

    private void SetCount(int count, bool invertOrder = false)

    {

        if (_panel == null || _wrapContent == null)

        {

            Debug.LogWarning("panel or  wrapContent is null ");

            return;

        }

        _count = count;

        //TODO: invertOrder有bug ，NGUI 3.7.x有此功能

        //if (invertOrder)

        //{

        //    _wrapContent.minIndex = 0;

        //    _wrapContent.maxIndex = count - 1;

        //}

        //else

        {

            _wrapContent.minIndex = -count + ;

            _wrapContent.maxIndex = ;

        }

        //fix: 按字母排序有bug:显示错乱

        //_wrapContent.SortAlphabetically();

        if (_scrollView != null)

        {

            var canDrag = _count >= GetActiveChilds(_wrapContent.transform).Count;

            if (count == ) canDrag = false;

            _scrollView.restrictWithinPanel = canDrag;

            _scrollView.disableDragIfFits = !canDrag; // 只有一个的时候，不能滑动

        }

    }

    private void OnInitItem(GameObject go, int wrapindex, int realindex)

    {

        var index = Mathf.Abs(realindex);// 取绝对值

        CacheObject2Index[go] = index;

        if (CheckActive(go, index) && _hasRefresh)

        {

            DoRender(go, index);

        }

    }

    /// <summary>

    /// 检查是否应该隐藏起来

    /// </summary>

    private bool CheckActive(GameObject go, int index)

    {

        bool needActive = index <= (_count - );//小于总数才显示

        go.SetActive(needActive);

        return needActive;

    }

    //触发渲染事件

    private void DoRender(GameObject go, int index)

    {

        if (OnRenderEvent == null)

        {

            Debug.LogError("UIWrapContent必须设置RenderFunc!");

            return;

        }

        OnRenderEvent(go, index);

    }

    /// <summary>

    /// 执行刷新，单个单个地渲染

    /// </summary>

    /// <param name="count"></param>

    /// <param name="invertOrder">反转：当有Scrollbar时才设置此值。指scrollbar的拖动方向,反转有bug，需完善</param>

    public void Refresh(int count, bool invertOrder = false)

    {

        SetCount(count, invertOrder);

        //fix:使用GetEnumerator 替代foreach，减少GC

        var enumerator = CacheObject2Index.GetEnumerator();

        while (enumerator.MoveNext())

        {

            if (CheckActive(enumerator.Current.Key, enumerator.Current.Value))

            {

                DoRender(enumerator.Current.Key, enumerator.Current.Value);

            }

        }

        _hasRefresh = true;

    }

    //强制设置scrollview是否可以滑动,

    //fix 前面在SetCount中有设此值，但判断依据不一定

    public void CanDragScrollview(bool canDrag)

    {

        if (_scrollView != null)

        {

            _scrollView.restrictWithinPanel = canDrag;

            _scrollView.disableDragIfFits = !canDrag; // 只有一个的时候，不能滑动

        }

    }

    public static UIWrapContentHelper Create(UIWrapContent uiWrapContent)

    {

        return new UIWrapContentHelper(uiWrapContent);

    }

    // 获取一个Transfrom下所有active=true的child

    public static List<GameObject> GetActiveChilds(Transform parent)

    {

        var list = new List<GameObject>();

        if (parent == null) return list;

        var max = parent.childCount;

        for (int idx = ; idx < max; idx++)

        {

            var childObj = parent.GetChild(idx).gameObject;

            if (childObj.activeInHierarchy) list.Add(childObj);

        }

        return list;

    }

}

组件使用

如果需要每次打开UI时，复位UIScrollView到初始状态，请调用 WrapContentHelper.ResetScroll();

OnRenderWrapContent 是具体的渲染逻辑

using System;

using System.Collections.Generic;

using Umeng;

using UnityEngine;

using System.Collections;

public class CUIFriendList : CUINavController

{

    private UIWrapContent WrapContent;

    private CUIWrapContentHelper WrapContentHelper;

    private List<CPartnerVo> CachePartnerVoList;//显示的数据

    //初始化

    public override void OnInit()

    {

        base.OnInit();

        WrapContent = GetControl<UIWrapContent>("ListPanel");

        WrapContentHelper = CUIWrapContentHelper.Create(WrapContent);

        WrapContentHelper.RenderFunc = OnRenderWrapContent;

    }

    //界面打开前播放动画

    public override void BeforeShowTween(object[] onOpenArgs, System.Action doNext)

    {

        //NOTE 重设Scrollview的位置

        WrapContentHelper.ResetScroll();

       RefreshUI();

        //其它的业务逻辑

        base.BeforeShowTween(onOpenArgs, doNext);

    }

    //刷新列表

    private void RefreshUI()

    {

        var max = CachePartnerVoList.Count;//要渲染数据

        WrapContentHelper.Refresh(max);

    }

    //具体的渲染逻辑

    private void OnRenderWrapContent(GameObject gameObj, int idx)

    {

        if (idx >= CachePartnerVoList.Count)

        {

            gameObj.SetActive(false);

            Debug.LogWarning("超出索引");

            return;

        }

        var partnerVo = CachePartnerVoList[idx];

        var trans = gameObj.transform;

        //TODO 执行具体的渲染逻辑

        //eg

        if(trans == null) return;

        var NameLabel_=trans.FindChild("NameLabel");

        if(NameLabel_)

        {

            NameLabel_.GetComponent<UILabel>().text=partnerVo.Name;

        }

        //.......

    }

}

巴特西