[Unity] 유니티 기초 탈출기 - Part.02 - UI 편 ( Toggle)

---

---

✔ Unity 기초 탈출기 - Toggle 편

Toggle Group, 라디오 버튼

---

---

 

안녕하세요.

기초 탈출기 포스트가 너무 늦어졌네요. 빨리빨리 업데이트 하도록 노력하겠습니다. 

Toggle 버튼은 프로그램이나 웹사이트에서도 많이 보셨을 겁니다.

휴대폰 인증을 할때에도 "□ (필수) 개인정보 활용 동의" 이렇게 표시가 나와있고

□ 여기에 클릭을하면 ▣ 이렇게 체크되었다고 나타나죠?

이런 기능을 하는 것이 토글 버튼입니다.

● Toggle 버튼 생성

Hierarchy -> 마우스 우클릭 -> UI -> Toggle 선택

Hierarchy에 Canvas가 자동생성되고 그 아래 Toggle 버튼이 만들어졌죠?

한번 눌러봅시다.

시작버튼을 누르고 GameView에서 Toggle 버튼을 눌러봅니다.

토글버튼이 안보이시는 경우 해상도가 안맞아서 그럴수도 있으니 16:9로 맞추면 보일거에요.

위 화면처럼 나오고 클릭하면 체크표시가 생겼다가 사라졌다가 할거예요.

●Toggle 버튼 편집

1. 텍스트 편집

이전 포스트에서 버튼편에서 했던 내용이랑 비슷합니다.

토글 아래 자식으로 Label이라는 친구가 있습니다. 이 친구를 클릭하여 Text부분을 수정하면 변경됩니다.

2. 이미지 편집

이것도 이전 포스트에서 버튼편에서 했던 내용이랑 비슷합니다.

하지만 이건 2개의 이미지를 사용해요.

Background가 있고 그 자식으로 Checkmark가 있습니다.

Background는 영문그대로 배경입니다. 선택되지 않았을때 보이는 이미지를 뜻합니다.

그리고 Checkmark는 선택되었을때 나타나는 이미지를 뜻합니다.

주의할 점은 체크되었을때는 background 위에 Checkmark가 표시된다는 것입니다.

무슨 뜻인지 그림으로 보면 쉽게 이해됩니다.

Background에 이미지를 넣고 보니 뒤에 체크마크가 잘 안보이죠?

Unity에 사용되고 있는 체크마크 이미지는 .png로 특정부위만 보이고 나머지는 투명형태입니다.

Toggle을 선택하면 체크마크 이미지가 Backgroud 이미지 위에 표시되는데 체크 표시 이외의 배경은 투명이라 뒤의 background가 보이게 되는 것이죠.

이런점을 고려하여 체크마크 이미지도 배경이 있는 이미지를 넣어 background가 아예안보이게 하거나 아니면 뒤에 이미지가 보일것을 고려하여 넣어야합니다.

● Toggle 버튼 이벤트

Scene View로 넘어가서 Toggle 버튼을 클릭하여 Inspector 창을 봅니다.

Inspector 창에서 IsOn에서 체크박스를 클릭하면 Toggle 버튼의 상태가 변합니다.

결과적으로 아까전에 실행해서 GameView에서 Toggle 버튼을 클릭하는 것과 똑같죠?

"아~ 그럼 사용자가 Toggle 버튼을 누르면 IsOn 값이 바뀌고 그에따라 상태가 바뀌는 거구나!! " 를 알아냈습니다.

이제 우리는 Toggle 버튼이 현재 선택된 상태(IsOn이 체크된 상태)인지 해제된 상태(isOn이 체크해제된 상태)인지 알 수 있겠죠?

가장 중요한 부분 이벤트 입니다.

Inspector 창의 아래쪽에 보시면 OnValueChanged(Boolean)이 있습니다.

이전편의 버튼에서 했던 내용이랑 비슷합니다.

버튼은 누르면 무조건 동작하지만 Toggle 버튼은 체크 상태가 변할때 동작합니다. (체크 -> 해제 or 해제 -> 체크)

● 라디오 버튼 만들기

라디오 버튼 : 여러개의 Toggle을 그룹으로 묶어서 그룹에서 하나만 선택되도록 하는것

( ▣ 동의합니다  □동의하지 않습니다 >> 보통 둘중에 하나만 선택해도 자동으로 바뀌죠? 이런게 라디오 버튼 )

먼저 그룹으로 묶을 부모를 하나 만들고 토글버튼을 두개 만든뒤 토글버튼들을 부모 밑으로 넣습니다.

- 부모만들기 

빈 오브젝트 생성

이름은 아무거나 상관없음 (저는 Toggle_Group)

- 토글 버튼 만든 후 부모로 이동

자 다 만들면 이렇게 되죠?

토글 2개만들면 겹쳐있을수도 있으니 UI를 이동시켜서 배치하세요. (이동 관련은 이전포스트 버튼편 참조)

이제 토글 그룹을 추가합니다.

Toggle_Group 선택 -> Inspector창에서 Addcomponent 클릭 -> Toggle Group 선택

토글 그룹 생성완료!!!

Allow Switch Off 가 있는데 이것은 그룹으로 묶여있는 토글 버튼들중에서 아무것도 선택을 하지 않는 것을 허용하는 것입니다. 

체크되어 있으면 허용, 체크가 안되어있다면 토글버튼은 무조건 하나는 클릭된 상태로 됩니다.

이제 토글 그룹에 포함될 토글버튼들을 등록해주면됩니다.

토글 버튼 선택 -> Inspector 창 -> Group 에 Toggle_Group 드래그

이제 끝났습니다.!!!!

자 이제 Play(재생)을 누르고 토글버튼을 눌러보세요. 

하나 켜지면 자동으로 하나 꺼지죠?

● 활용 예제 - 동의 화면 만들기

이제 배운 내용들을 바탕으로 동의화면을 구성해보겠습니다.

먼저 아래 코드 처럼 스크립트를 하나 만듭니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ToggleExample : MonoBehaviour
{
    //토글
    public void ToggleClick(bool isOn)
    {
        if(isOn)
        {
            Debug.Log("동의합니다.");
        }
        else
        {
            Debug.Log("동의하지 않습니다.");
        }
    }
}

그리고 화면 구성은 이렇게 해보았습니다.

이제 이벤트를 등록합니다.

"동의합니다"의 토글을 클릭한뒤 AddComponent -> 위에서 만든 스크립트 등록

순서대로 설정합니다.

자 이제 시작하고 버튼 클릭해봅니다. 

Console 창에 누를때마다 스크립트에서 로그 찍은 내용이 나오죠?

토글을 두개 만들었는데 왜 하나에만 등록해서 사용을 하냐면.. 토글이 두개밖에 없어서 하나의 상태만 봐도 다른 토글의 상태를 알 수 있어서 그렇습니다.

감사합니다.