溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Unity如何實(shí)現(xiàn)QQ列表折疊菜單

發(fā)布時(shí)間:2020-08-03 09:23:57 來源:億速云 閱讀:593 作者:小豬 欄目:編程語言

小編這次要給大家分享的是Unity如何實(shí)現(xiàn)QQ列表折疊菜單,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

主要用到了GUI的自動(dòng)布局功能,VerticalLayoutGroup,注意ChildControlsSize 和ChildForceExpand屬性設(shè)置為 Width

Unity如何實(shí)現(xiàn)QQ列表折疊菜單

效果:

Unity如何實(shí)現(xiàn)QQ列表折疊菜單

實(shí)現(xiàn)代碼:

/// <summary>
/// 折疊菜單
/// </summary>
public class FoldPanel : MonoBehaviour
{
  [SerializeField]
  private GameObject panelItem; // 折疊頁
  [SerializeField]
  private TitleItem titleItem;
  [SerializeField]
  private DataItem dataItem;

  public List<FoldData> dataList = new List<FoldData>();

  private void Start()
  {
    Create();
  }

  public void Create()
  {
    for (int i = 0; i < dataList.Count; i++)
    {
      // 創(chuàng)建標(biāo)題
      TitleItem title = Instantiate(titleItem).GetComponent<TitleItem>();
      title.SetTitle(dataList[i].titleName);
      title.transform.SetParent(this.transform);

      // 創(chuàng)建子折疊面板
      GameObject panel = Instantiate(panelItem);
      panel.transform.SetParent(this.transform);
      // 260是折疊頁的寬度,30DataItem的高度
      panel.GetComponent<RectTransform>().sizeDelta = new Vector3(260,30 * dataList[i].data.Count);
      title.SetFoldPanel(panel);
      panel.SetActive(false);

      // 創(chuàng)建折疊頁數(shù)據(jù)
      for (int j = 0; j < dataList[i].data.Count; j++)
      {
        DataItem item = Instantiate(dataItem).GetComponent<DataItem>();
        item.transform.SetParent(panel.transform);
        item.SetInfo(dataList[i].data[j]);
      }
    }
  }
}

[System.Serializable]
public class FoldData
{
  public string titleName;
  public List<ItemData> data;
}

[System.Serializable]
public class ItemData
{
  public string userName;
  //public string imageName;
  public Sprite imageName;
}

TitleItem.cs

public class TitleItem : MonoBehaviour,IPointerClickHandler
{
  [SerializeField]
  private Text title;
  [SerializeField]
  private Transform arrow;

  public bool isFold = true; // 是否是折疊狀態(tài)
  public Transform foldPanel; 

  public void OnPointerClick(PointerEventData eventData)
  {
    if (isFold)
    {
      isFold = false;

      arrow.DORotate(Vector3.zero, 0.1f);

      if (foldPanel != null)
      {
        foldPanel.gameObject.SetActive(true);
        foldPanel.DOScaleY(1, 0.1f);
      }
    }
    else
    {
      isFold = true;
      arrow.DORotate(new Vector3(0, 0, 90), 0.1f);
      
      if (foldPanel != null)
      {
        foldPanel.DOScaleY(0, 0.1f).OnComplete(() => { foldPanel.gameObject.SetActive(false); });
      }
    }
  }

  public void SetTitle(string _titleName)
  {
    title.text = _titleName;
  }

  public void SetFoldPanel(GameObject panel)
  {
    foldPanel = panel.transform;
  }
}

列表的數(shù)據(jù)來源是在界面上手動(dòng)配置的,當(dāng)然如果想要讀取本地或者服務(wù)器的數(shù)據(jù)也是可以的。

看完這篇關(guān)于Unity如何實(shí)現(xiàn)QQ列表折疊菜單的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI