[유니티UI] Tab 탭 버튼과 메뉴 간단하게 만들기 +예제

유니티에서 이런 UI를 구현하고자 한다

원리는 간단하다.

탭은 각 UI를 할당하고 있고,

탭버튼을 누를때 다른 종속된 모든UI를 꺼지게하고

내가 누른 버튼에 할당된 UI만 띄우게 하면된다.

결국 각 오브젝트들이 껐다 켜지면서 전환되는 개념이다.
실제 윈도우폼에서의 탭 작동과도 원리가 유사하다

 

 

2개의 cs파일로 간단하게 끝낼 수 있다.

 

기능이 동작하는 방식을 이해하기 쉽도록 아주 간단한 코드로 작성했다

TabButton.cs - 탭 버튼

using UnityEngine.UI;
using UnityEngine;

[RequireComponent(typeof(Button))] //버튼이 없는 오브젝트라면 자동으로 추가
public class TabButton : MonoBehaviour
{
    //해당 버튼 클릭시 열어 줄 UI를 인스펙터창에서 받아온다
    [SerializeField] GameObject panel;
    Image btnImage; //버튼 이미지 
    public GameObject GetPanel => panel;

    TabController parent; //부모 컨트롤러
    private void Start()
    {
        Button btn = GetComponent<Button>();
        btn.onClick.AddListener(SwitchTab); //버튼 리스너에 함수를 할당
        parent = transform.parent.GetComponent<TabController>(); //TabController컴포넌트를 보유한 부모를 가져옴
        btnImage = btn.image; //버튼에 할당된 이미지를 가져옴
    }
    void SwitchTab() //버튼 클릭시 부모에게 내가 눌려졌음을 알림
    {
        parent.SwitchTab(this);
    }
    public void ChangeButtonImage(Sprite _sprite)
    {
        if (btnImage == null) return;
        if (btnImage.sprite != _sprite) //현재 버튼 이미지의 스프라이트와 매개변수 _sprite가 다르다면
            btnImage.sprite = _sprite; //_sprite로 버튼 이미지를 바꿈
    }
}

 

 

TabController.cs - 탭들을 관리하는 관리자 역할

using UnityEngine;

public class TabController : MonoBehaviour
{
    [SerializeField] Sprite btnNormal; //탭버튼이 정상일때
    [SerializeField] Sprite btnSelect; //탭버튼이 눌러진 상태일때

    TabButton[] tabs; //자식들인 탭버튼을 저장할 배열

    // Start is called before the first frame update
    void Start()
    {
        tabs = GetComponentsInChildren<TabButton>();
        SwitchTab(tabs[0]); //첫번째 탭을 눌러준다
    }
    public void SwitchTab(TabButton _target)
    {
        for (int i = 0; i < tabs.Length; i++)
        {
            bool _isActiveTab = _target == tabs[i]; //tabs[i]가 눌려진 버튼인지 판단
            tabs[i].GetPanel.SetActive(_isActiveTab); //모든 탭을 다 꺼준다
            //삼항연산자로 버튼이 눌러졌을때와 일반적인상태일때를 판단해 바꾸어 준다
            tabs[i].ChangeButtonImage(_isActiveTab? btnSelect : btnNormal); 

        }
    }
}

 

두개의 스크립트를 만들고 하이어라키창을 아래와 같이 구성해준다(당연히 입맛대로 설정해주면 된다)

pTabs에는 TabController.cs / 각 탭 버튼에는 TabButton.cs를 넣어주자

아마 TabButton을 넣어주면 버튼이 없을경우 자동으로 생성될 것이다.

해당 버튼이 눌러졌을때 열리게할 패널을 Panel 변수에 넣어주자.

 

모든 탭버튼에 열리게할 패널을 하나씩 각각 넣어주면 버튼쪽은 준비 끝

 

pTabs에는 TabController를 넣어주었다

버튼들의 부모가 되는 pTabs에

BtnNormal, BtnSelect 두개의 스프라이트를 채워넣자.

버튼이 일반적인 상태일때는 BtnNormal의 이미지가 보여질것이고

버튼이 눌려진 상태일때는 BtnSelect 의 이미지가 보여질것이다.

(난 대충 아무거나 넣었다.)

 

pPanels와 그 아래 panel0, panel1 자식들은 UI아무렇게 가져다 꾸몄다.

예시를 위해 바로 보이게끔 0에는 빨강 / 1에는 파랑의 이미지를 넣었다.

대충 이런모양? 아래UI는 원하는대로 필요한 것을 넣으면 된다

 

여러 UI에 탭버튼을 활용해야할때마다 언제든지 갖다 쓰면 될듯하다.

실제로 바로사용해도 무방하나, 프로젝트 상황에 맞게 입맛대로 변경하면 되지싶다.

 

 

퍼가고 맘대로 사용해도 되지만 출처는 꼭 밝히시길..

이해하는데 도움이 되셨다면 아래 하트 부탁함다.