[Unity] UI Toggle을 이용한 Tap 기능 만들기

[Unity] UI Toggle을 이용한 Tap 기능 만들기

게임을만들다 보면 UI중 탭 기능이 필요할 때가 있다.

예를 들어 클래시 로얄을 살펴보도록 하자.

클래시 로얄에는 채팅, 검색, 친구 3가지 탭이 있다. 

탭을 누를 때마다 레이어가 바뀐다. 

현재 채팅 탭이 활성화 되어 있다.

현재 검색 탭이 활성화 되어 있다.

현재 친구 탭이 활성화 되어 있다.

탭 기능은 모든 게임에 들어가는 것은 아니지만

하나의 레이어의 여러가지를 보여 주어야 할때 유용하게 쓰인다.

3개의 버튼을 배치해 UI를 디자인 할 수도 있지만 깔끔하진 않아

탭을 만이 이용하는 편이다.

유니티에서는 탭이라는 UI따로 있지는 않지만 Canvas UI에 Toggle이라는 기능이 있어

쉽고 빠르게 탭기능을 만들수가 있다. 

그럼 쉽고 빠르게 탭 기능을 만들어 보자!

UI오브젝트들은 Canvas내에서만 화면에 나오므로 Canvas를 하나 만들어 준다.

Canvas에서 우클릭하여 빈 오브젝트 하나를 만들어 준다.

그리고 이것의 이름을 TapGroup로 변경해 준다. 

TapGroup을 만드는 이유는 탭 기능은 2가지를  동시에 선택할 수 없다. 그래서 그룹을 이용하면

복수선택을 막을 수 있다. 라디오 버튼 또한 이것을 이용하면 편하게 만들 수 있다.

그리고 만들어준 TapGroup에 Inspector에서 Add Component 하여 Tgoogle Group를 검색 후 추가한다.

대략 TapGroup의 모양이 이렇게 완료 되었다.

다음으로 TapGroup를 선택 후 우클릭하여 UI -> Toggle를 선택한다.

2개를 추가하고 이름을 Tap1, Tap2로 변경해준다.

화면을 보면 2개가 겹쳐있어 1개로 보일 것이다. 하나의  Y좌표를 변경해 주면

대략 이런 모습을 하고 있을 것이다

Toggle 오브젝트를 모두 열어 보면 이런 모습을 하고 있는데 

우리는 탭기능을 사용할것 이므로  Label은 삭제를 해도 무관하다.

삭제를 하기 싫으면  Label에 텍스트를 지워도 무방하다.

여기서 대략 설명을 한다면 Background를 비활성 용도로 사용할 것이고

Checkmark를 활성 용도로 사용할 것이다. 

위와 같은 이미지를 2장 준비해 보았다.

따라해 보고 싶은 분들을 위해 이미지 2장을 올려 두었다.

Tap1 오브젝트에 Background를 선택 후 Inspector에서 Source Image를 block_01 이미지로 변경한다.

Tap1 오브젝트에 Checkmark를 선택 후 Inspector에서 Source Image를 block_01 이미지로 변경한다.

Tap1 오브젝트에 Background를 선택 후 Inspector에서 Source Image를 block_02 이미지로 변경한다.

Tap1 오브젝트에 Checkmark를 선택 후 Inspector에서 Source Image를 block_02 이미지로 변경한다.

Tap1 오브젝트를 선택 후 Inspector에서 Normal Color를 클릭하여 색상을 변경한다.

이 작업은 Tap 버튼이 비활성 일 경우를 위해 변경하는 것이므로 조금 어둡게 회색을 선택한다.

Tap1과 Tap2 2개를 선택해 준다.

Tap1과 Tap2를 선택 후 Inspector화면을 보면 Group이라는 것이 있는데 여기에 아까 만들어 두었던

TapGroup을 넣어 주면 2개의 탭이 한개의 그룹으로 만들어 지면서 복수 선택을 막아 주는 것이다.

그리고 Tap2를 선택 후 Inspector 안에서 is On을 체크 해제 한다.

이것은 처음 실행 시 Tap1 만 활성화 시키기 위해서다.

유니티 Play 후 화면을 보면 Tap1이 었던 빨간 블록은 활성화 주황 블록은 비활성화 되어 있다.

주황 블록을 클릭하면 반대로 주황 블록이 활성화 빨간 블록이 비활성화 되는 모습을 볼 수 있다.

여기 까지 탭기능 중 탭 버튼 만 만들어 준것이며 

탭 기능을 모두 완료 하려면 레이어 2개를 만들어 탭 버튼 선택시

하나의 레이어는 꺼주고 하나의 레이어만 켜주는 것을 만들면 된다.

탭 기능도 없다고 불평 했지만 이렇게 간단한 방법이 있었다.