【Unity】(UI)抽屜式摺疊皮膚

Sitar發表於2024-09-29
UnityUI

UI中實現一個抽屜式摺疊皮膚

成果展示

Scene部分

主要包括兩個部分：Option和Content。

option對應的是選項按鈕；Content對應的是展開的內容；

這裡由於此篇寫法的問題。需要將option中Button從0開始依次編號。

物體請按照固定的距離進行擺放。

如Option中每個子物體的位置分別為（0，0，0）（0，-140，0）（0，-180，0）（0，-220，0）；

Content中每個子物體的位置分別為（0，0，0）（0，-40，0）（0，-80，0）（0，-120，0）；

可以看到未展開的兩個選項按鈕距離間隔為40；

中間有展開內容的兩個選項按鈕距離間隔為140；

指令碼繫結在Collapse物體上

指令碼部分

新建一個類，定義一些與業務無關的基本方法

public class BaseCollapse
{
    private List<RectTransform> optionTransformList;
    private List<Transform> contentTransformList;
    private float optionStep;
    private float contentStep;

    /// <summary>
    /// 通用的摺疊皮膚操作
    /// </summary>
    /// <param name="optionTransformList">所有選項</param>
    /// <param name="contentTransformList">所有內容</param>
    /// <param name="optionStep">選項中間間隔</param>
    /// <param name="contentStep">展開內容後，選項之間間隔</param>
    public BaseCollapse(List<RectTransform> optionTransformList, List<Transform> contentTransformList, float optionStep, float contentStep)
    {
        this.contentTransformList = contentTransformList;
        this.optionTransformList = optionTransformList;
        this.optionStep = optionStep;
        this.contentStep = contentStep-optionStep;
    }
    /// <summary>
    /// 展開摺疊皮膚的指定項
    /// </summary>
    /// <param name="id">指定項ID</param>
    public void CollapseVisble(int id)
    {
        RectTransform optionTransform = optionTransformList[id];
        Transform contentTransform = contentTransformList[id];
        Vector2 optionPosition = optionTransform.anchoredPosition;
        if (!contentTransform.gameObject.activeSelf)
        {
            foreach (var item in contentTransformList)
            {
                item.gameObject.SetActive(false);
            }
            contentTransform.gameObject.SetActive(true);

            for (int i = id + 1; i < optionTransformList.Count; i++)
            {
                optionTransformList[i].anchoredPosition = new Vector2(optionPosition.x, optionTransformList[0].anchoredPosition.y - contentStep - optionStep * i);
            }
            for (int i = 1; i < id + 1; i++)
            {
                optionTransformList[i].anchoredPosition = new Vector2(optionPosition.x, optionTransformList[0].anchoredPosition.y - optionStep * i);
            }
        }
    }
}

指令碼繫結到物體，例項化BaseCollapse，傳入相關的資訊。

public class Collapse : MonoBehaviour
{
    private List<RectTransform> optionTransform;
    private List<Transform> contentTransform;
    BaseCollapse baseCollapse;
    private void Awake()
    {
        optionTransform = new List<RectTransform>();
        Transform options = transform.Find("option");
        for (int i = 0; i < options.childCount; i++)
        {
            optionTransform.Add(options.GetChild(i).GetComponent<RectTransform>());
        }

        contentTransform = new List<Transform>();
        Transform content = transform.Find("content");
        for (int i = 0; i < content.childCount; i++)
        {
            contentTransform.Add(content.GetChild(i));
        }


        for (int i = 0; i < optionTransform.Count; i++)
        {
            Button button = optionTransform[i].GetComponent<Button>();
            button.onClick.AddListener(() =>
            {
                baseCollapse.CollapseVisble(int.Parse(button.name));
            });
        }

        baseCollapse = new BaseCollapse(optionTransform, contentTransform, 40, 140);

    }
}

相關文章