[Unity] 탭 메뉴 만들기

오늘은 유니티 UI중에 탭 메뉴를 만들어 보자.

이미 완성된 UI 에셋들이 유니티 에셋스토어에 많이 올라와 있기는 하지만..

우리가 산 에셋에는 탭 메뉴가 없어서 내가 직접 만들었다.. 흙..

 

1. TabMenu라는 새로운 Scene을 하나 만들어주자.

 

2. UI > Canvas를 만들어주자.

 

3. Canvas 위에 배경이 될 Panel 하나를 올려주자.

 

4. Panel 위에 Text(TMP)를 올려 제목도 하나 써주자.

 

여기까지 진행한 결과는 다음과 같다.

 

 

5. 이제 탭 버튼이 될 세 개의 버튼 그룹을 만들자.

   Hierarchy 창에서 Create Empty를 눌러 빈 오브젝트를 생성한 후 이름을 Buttons로 바꿔주자.

   그리고 Canvas 위로 올려주자!

   Buttons 안에 세 개의 버튼을 생성한 후 아래와 같이 적당히 위치와 크기를 조절해 주자.

 

 

6. 이제 탭 판넬이 될 세 개의 판넬 그룹을 만들자.

   Hierarchy 창에서 Create Empty를 눌러 빈 오브젝트를 생성한 후 이름을 Panels로 바꿔주자.

   그리고 Canvas 위로 올려주자!

   Panels 안에 크기가 같은 세 개의 판넬을 생성한 후 아래와 같이 겹치게 배치한다.

   마지막으로, 각 판넬을 구분할 수 있도록 이미지를 넣어주자!

 

 

7. 이제 각 버튼을 눌렀을 때 해당 버튼과 관련된 판넬이 가장 앞에 오도록 하기만 하면 된다!

   * 겹쳐있는 모든 object는 Hierarchy의 아래에 있을 수록 가장 위에! (즉, 눈과 가까이에!) 존재한다 *

   이 사실만 알면 코드 없이, 어렵지 않게 탭 메뉴를 만들 수 있다.

   각 버튼을 누를 때마다 해당 버튼과 관련된 판넬의 그룹 내 Hierarchy 순서가 가장 아래로 오게 하면 된다!

   그리고 유니티에서는 이 기능을 아주 간단하게 제공한다.

   버튼의 Inspector에서 버튼이 클릭되었을 때 할 일을 정해주는 OnClick() 부분을 추가(+)한다.

   그리고 그 버튼에 해당하는 판넬을 None이라고 되어 있는 칸에 드래그해서 넣어준다!

   마지막으로, No Function이라고 되어 있는 칸을 RectTransform>SetAsLastSibling 으로 바꿔준다!

 

 

   이를 나머지 두 버튼에도 적용하면 끝!

 

 

코드 없이, 쉽고 간단하게 탭 메뉴 만들기 완료~!