2.4 NGUI UIToggle(토글 버튼)
NGUI UIToggle(토글 버튼)
2.4 UIToggle (토글 버튼)
이번에 알아볼 위젯은 토글 위젯입니다. 토글 위젯은 true/false 두 가지 상태를 갖는 위젯입니다.
사용자에게 어떤 옵션을 사용할 것인지 사용하지 않을 것인지에 대한 UI를 제공할 때 많이 쓰이는 위젯입니다.
NGUI에서 제공하는 토글 위젯은 두 가지로 구성이 가능합니다. 첫 번째는 다른 토글 위젯에 영향을 받지 않고 각각의 토글 위젯이 자신의 값을 갖는 경우입니다.
두 번째는 라디오 버튼입니다. 그룹으로 묶인 토글 위젯 중 하나의 상태만 선택 가능하도록 구성할 때 많이 사용하는 기능입니다.
기본 토글 위젯
먼저 첫 번째 기본 토글 위젯부터 살펴보도록 하겠습니다.
유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard (Leagacy) 메뉴를 선택합니다.
아래 그림과 같이 Template항목은 Toggle로 Background는 Highlight, Checkmark항목은 X로 설정합니다.
그리고 AddTo버튼을 눌러서 위젯을 생성합니다.
이해를 돕기 위해서 토글 위젯을 두개 생성하고 유니티를 실행한 뒤에 왼쪽 토글 위젯은 클릭을 해서 true값을 적용시키고 오른쪽 토글 위젯은 클릭하지 않은 상태로 두었습니다.
위 그림에서 볼 수 있듯이 선택이 된 상태는 “X” 표시가 보이게 되고, 선택을 하지 않은 상태는 “X”표시가 보이지 않는 것을 확인할 수 있습니다.
이제 씬 뷰에서 생성된 토글 위젯의 구조를 살펴보도록 하겠습니다.
Toggle 이라는 이름의 게임오브젝트 밑에 3개의 게임오브젝트들이 자식 오브젝트로 구성되어 있습니다.
– Background : 토글 위젯의 배경을 나타내는 스프라이트 위젯
– Checkmark : 토글 위젯의 true/false 상태를 나타내는 스프라이트 위젯
– Label : 토글 위젯의 글자를 나타내는 레이블 위젯
Toggle 게임 오브젝트를 클릭하고 인스펙터 뷰를 살펴보면 여러 컴포넌트들이 추가되어 있는 것을 확인할 수 있습니다. 그 중에서 가장 중요한 UIToggle 컴포넌트를 살펴보겠습니다.
UIToggle 컴포넌트 역시 여러가지 항목을 설정할 수 있도록 구성되어 있습니다.
각 컴포넌트들의 쓰임은 아래 표와 같습니다.
| 파라미터 | 설명 |
| Group | 라디오 버튼을 구성할 때 사용됩니다. 라디오 버튼으로 묶을 토글 위젯들을 같은 값으로 설정하면 라디오 버튼으로 구성됩니다. 0을 입력하면 각각의 상태를 개별적으로 갖는 토글 위젯이 됩니다. |
| Starting State | 해당 토글 위젯의 시작 값을 설정하는 부분입니다. 체크를 하면 시작할 때 토글 값이 true로 설정되고, 체크하지 않으면 false로 설정됩니다. |
| State Transition | – Sprite : 토글 위젯의 상태를 표현하는 스프라이트 위젯을 설정합니다. – Animation : 토글 위젯이 동작할 때 재생할 애니메이션을 설정합니다. – Transition : Smooth와 Instant 두 가지 값을 제공하며, Smooth로 설정하는 경우 알파 값을 이용한 페이드인 / 페이드 아웃 효과가 적용됩니다. |
| Notify | 토글 위젯의 상태가 변경되었을 때 특정 함수를 호출하게 할 때 사용합니다. |
라디오 버튼
이번엔 토글 위젯을 이용해서 라디오 버튼을 만들어 보도록 하겠습니다.
위에 설명한 파라미터 내용 중 Group값을 이용해서 라디오 버튼을 구성할 수 있습니다.
라디오 버튼으로 구성할 토글 위젯들을 같은 Group 값으로 설정해주면 됩니다.
유니티 메뉴에서 NGUI -> Open -> Widget Wizard (Legacy) 메뉴를 선택하고 위에서 생성한 것과 동일하게 토글 버튼을 여러 개 생성합니다.
(예제에서는 4개를 생성하고 진행하겠습니다.)
생성된 Toggle의 Group 파라미터 항목을 모두 “1” 로 설정합니다.
이렇게 그룹을 설정하면 하면 라디오 버튼 구성이 완료가 됩니다.
이제 아래 그림과 같이 토글 위젯의 위치를 설정하고 유니티를 실행해서 결과를 살펴봅니다.
유니티를 실행하고 각각의 토글 위젯을 클릭해보면, 클릭된 토글 위젯만 true 상태로 변경이 되고 나머지는 false 상태로 설정됩니다.
내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂
