2.5 NGUI UIInput (텍스트 입력)
NGUI UIInput (텍스트 입력)
2.5 NGUI UIInput (텍스트 입력)
Input 위젯은 이름에서 알 수 있듯이 사용자에게 텍스트 입력을 받을 때 사용하는 위젯입니다.
Widget Tool 창의 Template 항목을 Input으로 설정하면 생성할 수 있습니다.
AddTo 버튼을 눌러서 Input 위젯을 생성하고, 하이어라키 뷰에서 Input 위젯의 구조를 살펴보겠습니다.
Input 위젯의 구조를 살펴보면, UIInput 컴포넌트를 가지는 Input 게임오브젝트 아래 Background 스프라이트와 Label 레이블 위젯이 있는 것을 확인할 수 있습니다.
UIInput 위젯의 배경이 되는 이미지는 Background 스프라이트에서, UIInput 위젯에 입력되는 텍스트는 Label 레이블에서 관리가 됩니다.
생성된 Input 위젯을 확인해 보겠습니다.
아래 그림에서 위의 위치한 UIInput이 클릭되지않은 상태입니다. 그리고 그림에서 아래 위치한 UIInput이 마우스가 클릭되어 입력을 하고 있는 상태입니다.
이제 UIInput 컴포넌트를 살펴보겠습니다.
Input 게임 오브젝트를 클릭한 상태에서 인스펙터 뷰를 보면 아래 그림과 같이 UIInput 컴포넌트가 추가되어 있는 것을 확인할 수 있습니다.
UIInput 컴포넌트는 여러 파라미터들을 설정해서 사용할 수 있도록 구성되어 있습니다.
아래 표는 UIInput 컴포넌트의 파라미터들의 내용을 정리한 표입니다.
| 파라미터 | 설명 |
| Label | 입력되는 텍스트를 화면에 보여줄 Label 위젯을 지정합니다. UIInput 위젯을 생성하면 같이 생성되는 Label 위젯이 기본으로 설정되어 있습니다. |
| Starting Value | 처음부터 입력란에 표시할 텍스트를 지정합니다. 아무 내용도 없는 경우에는 Input 위젯이 활성화 되었을 때 입력란의 텍스트가 지워집니다. |
| Saved As | 입력란에 입력한 텍스트를 PlayerPref에 저장할 때 사용합니다. 이 항목에 지정한 값이 PlayerPref의 키로 사용되어 Input 위젯의 입력란에 입력된 텍스트가 저장됩니다. |
| Active Text Color | Input 위젯이 활성화 되었을 때 (텍스트가 편집될 때)의 색상을 지정합니다. |
| Inactive Color | Input 위젯이 비 활성화 상태일 때의 색상을 지정합니다. |
| Caret Color | Caret의 색상을 지정합니다. |
| Selection Color | 입력란의 텍스트를 선택했을 때 선택된 영역의 색상을 지정합니다. |
| Input Type | Input 위젯에서 사용할 입력 방식을 지정합니다. – Standard: 표준 입력 방식을 사용합니다. – Auto-Correct: 자동 수정 기능을 사용합니다. – Password: 입력된 텍스트가 화면에 감춰지도록 할 때 사용합니다. 입력된 텍스트는 화면에서 * 문자로 표시됩니다. 예) 비밀번호 입력란 등. |
| Validation | Input 위젯에 입력되는 값을 특정 값만 입력받도록 할 때 사용합니다. 6가지 입력 타입을 지원합니다. (None / Integer / Float / Alphanumeric / Username / Name)+ |
| Mobile Keyboad | 모바일 장치에서 Input 위젯을 이용해서 입력을 받을 때 사용할 Soft 키보드를 지정합니다. 아래 나열한 9가지 키보드 타입을 지원합니다 (Default / ASCIIapable / NumbersAndPunchuation / URL / NumberPad / PhonePad / NamePhonePad / EmailAddress) |
| Hide Input | 모바일 장치에서 텍스트를 입력 받을 때 입력창을 화면에 보여줄 지, 숨길 지에 대한 옵션을 설정합니다. |
| On Return Key | 키보드의 엔터 또는 모바일 장치에서 Submit 버튼이 눌렸을 때 처리할 입력 방식을 설정합니다. Submit 동작 또는 Newline 중에서 설정할 수 있습니다. |
| Character Limit | 입력할 수 있는 텍스트의 수를 제한할 때 사용합니다. 0을 입력하면 텍스트 수를 제한하지 않습니다. |
UIInput 위젯을 이용해서 사용자에게 입력을 받는 로그인 창 등을 구현할 수 있습니다.
사용자에게 입력한 값을 스크립트에서 처리할 때에는 UIInput.value 프로퍼티를 이용하면 됩니다.
내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂
