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+款雲產品！ 

更多網易研發、產品、運營經驗分享請訪問網易雲社區。

相關文章：
【推薦】 一個只有十行的精簡MVVM框架
【推薦】 abtest-system後臺系統設計與搭建