복대가리의 개발

Unity

[Unity] UI - Input Field

복대가리 2022. 11. 15. 22:19
728x90

사용한 Unity 버전은 2021.02.19

 

이번 포스터는 UI 중 많이 사용하는 Input Field에 대해 알아보고 사용해보겠습니다.

 

요즘 개발을 함에 있어 로그인이라던가 회원가입 등 페이지에서 많이 사용하는 도중 예전에 비해 기능도 많이 추가되고,

편리 해진 것 같아 작성하게 되었습니다.

 

그리고 또 단점이 있어 다른 라이브러리를 사용하기도 하였는데요 찬찬히 살펴보도록 하겠습니다.

 

 

Input Field 란

입력 필드는 흔히 로그인할 때 사용하는 아이디와 비밀번호 등을 입력할 수 있게 도와주는 UI입니다.

보통 사용할 때 Image 컴포넌트와 Text 컴포넌트를 같이 사용하는 편입니다.

 

Input Field GameObject 생성

상단 메뉴 [GameObject] 에서 아래 이미지와 같이 생성하거나 [Hierarchy] View에서 마우스 오른쪽 클릭하여 아래 이미지와 같이 생성하는 방식이 있습니다.

 

Inpuf Field 프로퍼티 설명

아래 이미지에서 보면 엄청 나게 많은 프로퍼티가 있는 것을 확인해 볼 수 있습니다.

천천히 하나씩 내용을 알아가도록 하겠습니다.

Interactable ( Type : bool )

입력 필드가 상호작용이 가능한지 여부를 결정합니다.

체크가 되어있을 경우(true) 상호작용이 가능하고 체크가 되지 않았을 경우(false) 아무런 상호작용도 발생하지 않습니다.

상호작용이라 함은 마우스로 클릭을 한다거나 스크린을 터치했을 때 발생하는 이벤트입니다.

 

Transition ( Type : enum <None, ColorTint, SpriteSwap, Animation> )

상호작용이 이러날 때 상태효과를 나타내기 위한 옵션입니다. 

상태효과는 인풋필드를 클릭 했을 때, 선택이 되었을 때, 비활성화 되었을 때, 아무것도 하지 않았을 때, 하이라이트가 발생했을 때 등 어떠한 상태가 발생하거나 적용되었을 때 나타내기 위한 효과입니다.

  • None : 아무런 상태효과가 없습니다.
  • ColorTint: 상태에 따라 컬러를 변화시킵니다.
  • SpriteSwap : 상태에 따라 Sprite 표시합니다.
  • Animation : 버튼의 상태에 따라 애니메이션을 실행합니다.
  • Target Graphic : 상태에 따라 변화 시킬 타겟입니다. ( none 제외 )
  • Normal : 일반 적인 상태입니다.
  • Highlighted : 하이라이트 된 상태입니다.
  • Pressed : InputField를 눌렀을 때 발생합니다.
  • Disabled : Interactable이 false 일 때 즉 비활성화 되었을 때 발생합니다.

아주 간략하게 이런게 있다라는 정도로만 보시면 되고 각각의 Transition은 따로 포스팅 하도록 하겠습니다.

 

Navigation 

네비게이션 옵션을 결정합니다. ( 네비게이션 옵션을 따로 포스팅 작성하겠습니다. )

 

TextComponent

InputField에서 사용하는 텍스트 컴포넌트 입니다.


Text

초기 텍스트를 의미합니다.


Character Limit

입력 필드에 들어갈 수 있는 최대 문자 수입니다.

 

Content Type

입력 필드에서 허용하는 문자 유형 정의

  • Standard : 모든 문자를 입력할 수 있습니다.
  • Autocorrected : 사용자에게 더 적합한 보정을 제안합니다.
  • Integer Number : 정수만 입력할 수 있습니다.
  • Decimal Number : 숫자와 단일 소수점만 입력할 수 있습니다.
  • Alphanumeric : 문자와 숫자를 모두 허용합니다. 기호는 입력할 수 없습니다. ( 한글과 스페이스도 되지 않습니다. )
  • Name :  각 단어의 첫 글자를 자동으로 대문자로 표시합니다.
  • Email Address : 최대 하나의 @ 기호로 구성된 영숫자 문자열을 입력할 수 있습니다.
  • Password* : 별표로 입력한 문자를 숨깁니다. 기호를 허용합니다.
  • Pin : 별표로 입력한 문자를 숨깁니다. 정수만 입력할 수 있습니다.
  • Custom : 라인 유형, 입력 유형, 키보드 유형 및 문자 유효성 검사를 사용자 정의할 수 있습니다.

 

Line Type

텍스트 필드 내에서 텍스트 서식을 지정하는 방법을 정의합니다.

  • Single Line : 텍스트는 한 줄에만 허용됩니다.
  • Multi Line Submit : 텍스트가 여러 줄을 사용할 수 있습니다. 필요할 때만 새 줄을 사용합니다. ( 필요할 때 새 줄을 사용한다는 의미는 엔터로 넘어갈 수 없고 글자가 입력필드보다 커진다면 새줄을 사용한다는 의미입니다. )
  • Multi Line Newline : 텍스트가 여러 줄을 사용할 수 있습니다. 사용자는 리턴 키를 눌러 개행을 사용할 수 있습니다.

 

Placeholder

입력필드가 비여있을 때 보여주는 Text입니다. ( 입력필드를 포커싱한다고해서 사라지지는 않습니다. )


Caret Blink Rate

텍스트 입력 준비를 표시하는 표식이 얼마나 자주 깜빡이는지 정의합니다.


Selection Color

텍스트 선택 부분의 배경 컬러입니다.


Hide Mobile Input (iOS only)

아래 이미지의 모바일 키보드를 보게 되면 빨강색으로 표시된 부분을 Hide 시켜주는 것입니다.

그런데 여기서 단점이 하나 있습니다. Android는 되지 않는다는 것입니다.

 

Read Only

입력필드에 쓰지를 못하고 읽기밖에 할 수 없게 만듭니다.

 

이벤트

On Value Changed

입력필드의 값이 변경되었을 경우 호출 되는 이벤트

On Submit

입력필드에 값을 다 입력하고 제출 즉 키보드의 Enter를 눌렀을 대 발생되는 이벤트

On End Edit

사용자가 제출 하거나 입력 필드 포커스가 제거 될 때 즉 사용자가 다른 곳을 클릭할 경우에 발생하는 이벤트

 

 

다음 포스팅에 더 심화시켜 작성하도록 하겠습니다. !

제가 Android에서 unity-InputField를 사용하지 않았던 이유
각 이벤트를 어떻게 사용 해야하는지?
InputField에 Unirx 적용하여 사용
Transition 사용방법 
728x90