유니티 Tab 메뉴 만들어보기

안녕하세요 유니티 비기너입니다.

이번 시간에는 Tab 메뉴 만들어보도록 하겠습니다.

 

Tab메뉴는 주로 카테고리와 같은 명칭의 버튼들이 존재하며 클릭 시 버튼에 매치되는

장면이 표시되며 다른 버튼을 누르면 장면이 전환되는 구조의 메뉴를 말합니다.

 

테스트 화면

오브젝트 구성

오브젝트 구성은 다음과 같으며 Tab, Content의 하위 오브젝트들은 단순 이미지 오브젝트들입니다.

Tab Area > tab 오브젝트들은 아래와 같이 구성되어있습니다.

 

Tab오브젝트 이미지

장면을 전환시킬 때 이용할 버튼 오브젝트입니다.

 

Content 오브젝트 이미지

버튼을 클릭했을대 전환되어 표시되는 오브젝트입니다.

 

Tab 오브젝트 인스펙터 정보

Tab 오브젝트에 포함되는 컴포넌트입니다. ( 이미지, 버튼 컴포넌트  Tab Button 스크립트)

OnTabSelected(), OnTabDeselected() 에는 버튼을 클릭했을 때 활성 / 비활성화시킬

Content오브젝트를 할당합니다.

 

 

2. 스크립트 작성

스크립트 TabController - (Tab Area오브젝트에 할당하세요)

public class TabController : MonoBehaviour
{
    private static TabController _instance = null;

    public static TabController Instance {
        get {
            if(_instance == null) {
                GameObject.FindObjectOfType<TabController>();

                if(_instance == null) {
                    Debug.LogError("There's no active TabController object");
                }
            }
            return _instance;
        }
    }

    TabButton tabButton;

    private void Start() {
        SelectedButton(transform.GetChild(0).GetComponent<TabButton>());
    }

    public void SelectedButton(TabButton _button) {

        if (tabButton != null) {
            tabButton.Deselect();
        }

        tabButton = _button;
        tabButton.Select();
    }

}

스크립트 TabButton - (Tab오브젝트에 각각 할당하세요.)

public class TabButton : MonoBehaviour
{
    public UnityEvent onTabSelected;
    public UnityEvent onTabDeselected;

    public void Select() {
        if (onTabSelected != null) {
            onTabSelected.Invoke();
        }
    }

    public void Deselect() {
        if (onTabDeselected != null) {
            onTabDeselected.Invoke();
        }
    }

    public void OnSelectTab(TabButton button) {
        TabController.Instance.SelectedButton(button);
    }
}

 

스크립트의 내용은 버튼 클릭이 발생하게 되면 TabController의 SelectedButton()을 호출합니다.

호출된 함수 내에서는 다시 TabButton의 Select(), Deselect()를 한 번씩 호출합니다.

 

하지만 Deselect()를 먼저 진행하고 나서 입력받은 Button을 tabButton에 치환하기 때문에

결과적으로는 이전 버튼을 비활성화시키고, 현재 버튼을 활성화시키는 코드가 완성됩니다.

 

내용 자체는 사용해보기 쉽게 간단하게 구성되어있으며 내용을

더 추가하거나 응용하여 더 멋진 Tab메뉴를 만드실 수 있습니다.