유니티/UI

Unity TabMenu

민또배기 2022. 5. 16. 11:05
반응형

유니티 버전 : 2020.3.25f1

작업환경 : Mac (Monterey 12.3.1)

 

TabMenu를 만들어보려 합니다.

게임에서 인벤토리나 시스템메뉴? 등에서 사용합니다.

버튼을 누르면 버튼에 해당하는 내용물이 화면에 나타납니다.

 

저는 Tabs라는 버튼과 Contents라는 내용물로 나눠서 TabMenu로 만들었습니다.

그 다음 Tabs의 버튼에 TabButton이라는 스크립트를 작성한뒤 붙여 줍니다.

TabButton.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TabButton : MonoBehaviour
{
    Image background;
    public Sprite idleImg;
    public Sprite selectedImg;

    private void Awake()
    {
        background = GetComponent<Image>();
    }

    public void Selected()
    {
        if(selectedImg != null)
            background.sprite = selectedImg;
    }

    public void DeSelected()
    {
        if (idleImg != null)
            background.sprite = idleImg;
    }
}

 

이제 버튼과 내용물을 연결해줄 스크립트를 작성하고 상단의 TabMenu에 붙여줍니다.

 

TabPanel.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TabPanel : MonoBehaviour
{
    public List<TabButton> tabButtons;
    public List<GameObject> contentsPanels;
    int selected = 0;

    private void Start()
    {
        clickTab(selected);
    }
    public void clickTab(int id)
    {
        for (int i = 0; i < contentsPanels.Count; i++)
        {
            if (i == id)
            {
                selected = i;
                contentsPanels[i].SetActive(true);
                tabButtons[i].Selected();
            }
            else
            {
                contentsPanels[i].SetActive(false);
                tabButtons[i].DeSelected();
            }
        }
    }
}

 

TabMenu에 오브젝트를 넣어주시고 Button에는 각각 id 값(하이어라키에 있는 순서대로 0번부터 작성)을 넣어줍니다

 

https://kmong.com/gig/449118

 

유니티 기반 게임,앱 개발해 드립니다. | 1000000원부터 시작 가능한 총 평점 0점의 IT·프로그래밍,

0개 총 작업 개수 완료한 총 평점 0점인 민또배기의 IT·프로그래밍, 2D·3D 게임 서비스를 0개의 리뷰와 함께 확인해 보세요. IT·프로그래밍, 2D·3D 게임 제공 등 1000000원부터 시작 가능한 서비스

kmong.com

 

반응형

'유니티 > UI' 카테고리의 다른 글

유니티 텍스트 메쉬 프로(Text Mesh Pro)한글 사용하기  (0) 2023.03.07
유니티 UI - infinite scroll  (0) 2022.05.24
유니티 이중 스크롤 뷰  (0) 2022.04.18
Unity Circle Slider UI  (0) 2022.04.18
유니티 Swipe Menu(Carousel) UI  (0) 2022.04.07