[Unity 개념] 11. 인풋 필드 (Input Field)에 대하여

※참고사항※
해당 포스트는 본업 개발자가 정성껏 포스팅한 포스트가 아닙니다!
평범한 고등학생이 유니티를 배우면서 적어나가는 포스트라는 점을 이해해 주십사 하고 청하는 바입니다.
(잘못된 정보는 댓글로 감사히 받겠습니다!)

---

 

이 포스팅을 보시기 전에 아래 링크를 타고 이전 포스팅을 보시고 오시면 이해가 더 잘 되실겁니다!

[Unity 기초] 2. 자료형에 대하여

[Unity 개념] 9. UI (User Interface)에 대하여

 

목차

1. Input Field란?
2. Input Field의 사용법

 

1. Input Field란?

인풋 필드는 사용자가 직접 텍스트를 입력할 수 있게 해주는 컨트롤입니다.

예를 들자면 아래와 같 Chrome (크롬)을 열고 사이트나 검색어를 검색하는 곳이 인풋 필드라고 할 수 있습니다.

Input Field의 예시

 

인풋 필드는 로그인, 검색, 닉네임 입력 등 아주 다양한 곳에 사용됩니다.

그럼 이제 인풋 필드를 생성해보겠습니다.

 

인풋 필드는 UI - Legacy - Input Field로 생성합니다.

< Input Field 생성 >

 

 

속성들입니다.

• Interactable
  • 인풋 필드가 사용자와 상호작용이 가능한지 결정합니다.
  • 인풋 필드를 사용할거라면 체크해주세요. (기본적으로 체크 돼있습니다!)
• Transition
  • 인풋 필드를 클릭 시 색깔을 바꾸거나, 스프라이트를 바꾸거나, 애니매이션을 주거나 할 수 있게합니다.
    • none : 없음
    • Color Tint : 색깔을 바꿉니다. (기본 설정입니다!)
    • Sprite Swap : 스프라이트를 바꿉니다.
    • Animation : 애니매이션을 줍니다.
• Navigation
  • 컨트롤의 순서를 정합니다.
• Text Component
  • 현재 인풋 필드와 연결된 Text 객체입니다.
  • 사용자의 입력 값을 받을 Text 컴포넌트입니다.
• Text
  • 사용자의 입력 값입니다.
• Character Limit
  • 사용자가 입력할 수 있는 문자 갯수를 제한합니다.
  • 값이 0이면 제한이 없습니다.
• Content Type
  • 입력할 값의 타입입니다.
    
    • Standard : 모든 값을 입력할 수 있습니다.
    • Autocorrected : 입력이 알 수 없는 단어인지 확인하고 알 수 없는 단어라면 사용자가 다시 입력하지 않으면 자동으로 대체합니다.
    • Integer Number : 정수만 입력 가능합니다.
    • Decimal Number : 소수까지 입력 가능합니다.
    • Alphanumeric : 문자와 숫자 모두 입력이 가능하지만 기호는 입력이 불가능합니다.
    • Name : 각 단어의 첫 글자를 자동으로 대문자로 표시합니다. (사용자가 별도로 소문자로 표시할 수 있습니다.)
    • Email Address : 하나의 @ 기호로 구성된 영, 숫자 문자열을 입력할 수 있습니다.
    • Password : 모든 문자를 입력할 수 있습니다. 하지만 입력한 모든 문자를 *로 치환해서 숨김니다.
    • Pin : 정수만 입력 가능합니다. 하지만 입력한 모든 문자를 *로 치환해서 숨김니다.
    • Custom : 라인, 입력, 키보드 유형 및 유효성 검사를 사용자가 지정할 수 있게 합니다.
• Line Type
  • 텍스트 필드 내에서의 텍스트 형식을 정의합니다.
    • Single Line : 한 줄로 입력합니다.
    • Multi Line NewLine : 다음 줄을 허용합니다. 꽉 채워서 문자를 입력하면 다음 줄로 이동합니다.
    • Multi Line Submit : 다음 줄을 허용합니다. 꽉 채워서 문자를 입력하면 입력된 줄을 제출한 다음 다음 줄을 처음부터 입력받습니다.
• Placeholder
  • 현재 인풋 필드와 연동되어 있는 Text 객체입니다.
  • 값을 입력하기전 " 입력하시려면 여기를 클릭해주세요.."와 같이 나오는 문구입니다.
• Caret Blink Rate
  • 카렛 (마우스 커서의 깜빡임)의 깜빡임 속도입니다.
• Caret Width
  • 카렛의 두께입니다.
• Custum Caret Color
  • 카렛의 색깔을 커스텀 할지를 결정합니다.
• Caret Color
  •  카렛의 색깔입니다.
  • Custum Caret Color를 체크해야 바꿀 수 있습니다.
• Selection Color
  • 마우스 좌클릭으로 입력한 Text를 드래그 했을 때 나오는 색깔입니다.
• Hide Mobile Input
  • 모바일 Input을 숨길 것인지 결정합니다
• Read Only
  • 읽기 전용을 할지 결정합니다. 체크하면 읽을 수만 있고 입력하진 못합니다.

 

이제 이벤트입니다.

 

• On Value Changed
  • 입력을 할 때마다 호출됩니다.
  • 사용 예시) 1, 2, 3, 4가 입력되면 삭제 시킴
• On Submit
  • 입력을 마치고 엔터를 누르면 호출됩니다.
• On End Edit
  • 입력을 마치고 밖을 클릭하면 호출됩니다. (모바일에서 사용하는거 아니면 적용이 잘 안 되는거 같아요!)

2. Input Field의 사용법

정말 간단한 로직을 한 번 짜보겠습니다.

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

// InputField를 사용하기 위한 네임 스페이스
using UnityEngine.UI;

public class InputFieldTest : MonoBehaviour
{
    [SerializeField]
    private InputField field;

    private void Awake()
    {
        // 상호작용 여부
        field.interactable = true;

        // 문자 갯수 한계 변경
        field.characterLimit = 0;

        // 입력 타입 변경
        field.contentType = InputField.ContentType.Standard;
    }
    public void IpLugJung()
    {
        print("입력 중입니다!");  
    }

    public void IpLugEnd()
    {
        print("입력을 끝냈습니다!");
    }
}

 

이제 적용을 시키겠습니다.

(이때 public 함수가 아니면 추가하는 곳에서 보이지 않습니다!)

 

이제 실행해보고 포스팅을 마치겠습니다.

 

 

이상으로 포스팅을 마치겠습니다.

다음 포스팅에서는 버튼에 대해서 공부해보겠습니다!