zoukankan      html  css  js  c++  java
  • 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和个性化推荐的搜索排序优化

  • 相关阅读:
    bzoj 2257 (JSOI 2009) 瓶子与燃料
    bzoj 2257 (JSOI 2009) 瓶子与燃料
    splay 模板 洛谷3369
    费用流 模板 洛谷3381
    bzoj 1024 [SCOI2009]生日快乐——模拟
    bzoj 3231 [Sdoi2008]递归数列——矩阵乘法
    hdu 5823 color II——子集dp(独立集)
    bzoj 1093 [ZJOI2007]最大半连通子图——缩点+拓扑
    洛谷 3959 宝藏——枚举+状压dp
    bzoj 1034 [ZJOI2008]泡泡堂BNB——贪心
  • 原文地址:https://www.cnblogs.com/zyfd/p/9722644.html
Copyright © 2011-2022 走看看