NGUI可展开列表的实现

本文来自网易云社区

作者：汪毅军

最近使用了NGUI做了下可展开列表，其主要思路如下：首先最外层使用Scroll view以达到滑动效果，然后列表使用UITable进行排列，最后通过点击Item控制Item的显示和隐藏。 效果如下：

Item结构

列表层次结构图如下：

每一个Item下可分为两部分：其中HideItem表示隐藏的部分。剩余的表示一直显示的内容，就比如效果图中的“Item1”，“Item2”等内容。 我们可以根据具体需求提前摆放好Item，或者通过代码动态加载。

功能实现

• 首先给UITable下的每个Item挂载上点击监听

    [SerializeField]    private UITable _table;    private List<Transform> items;    void Start ()
    {
        items = _table.GetChildList();        for (int i = 0; i < items.Count; i++)
        {
            Transform item=items[i];

            UIEventListener.Get(item.gameObject).onClick = OnItemClick;
        }

        _table.Reposition();

    }

• 其次定义好打开和关闭操作，需要注意的是，每次打来关闭后，务必调用一下_table.Reposition()以触发UITable去重新排列。

    private void OpenItem(Transform transform)
    {
        transform.Find("HideItem").gameObject.SetActive(true);
    }    private void CloseItem(Transform transform)
    {
        transform.Find("HideItem").gameObject.SetActive(false);
    }    private void ToggleItem(Transform transform)
    {        if (transform.Find("HideItem").gameObject.activeSelf)
        {

            CloseItem(transform);
        }        else
        {
            OpenItem(transform);
        }

    }    private void OnItemClick(GameObject go)
    {//      这里用于关闭其他的Item,视具体需求使用//        for (int i = 0; i < items.Count; i++)//        {//            if(items[i]!=go.transform) CloseItem(items[i]); //            //        }

        ToggleItem(go.transform);
        _table.Reposition();

    }

到此为止，一个最简单的可展开列表就实现了。

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易研发、产品、运营经验分享请访问网易云社区。

相关文章：
【推荐】 初步探索前端性能测试
【推荐】 搜索实时个性化模型——基于FTRL和个性化推荐的搜索排序优化