[kotlin] 텍스트 필드 및 입력 폼 구성을 위한 Material Components 활용 방법

20 Dec 2023

kotlin

Material Components는 안드로이드 앱을 디자인하는 데 도움이 되는 고급 디자인 시스템이다. 이는 앱에서 Material Design을 구현하는 데 도움이 되며, 많은 미리 제작된 UI 컴포넌트를 제공한다. 이 가이드에서는 Material Components를 사용하여 텍스트 필드와 입력 폼을 구성하는 방법에 대해 설명한다.

Material Components 라이브러리 추가하기

먼저, 앱의 build.gradle 파일에 다음과 같이 Material Components 라이브러리를 추가한다.

implementation 'com.google.android.material:material:1.4.0'

텍스트 필드 추가하기

앱의 레이아웃 XML 파일에서 다음과 같이 텍스트 필드를 추가할 수 있다.

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="이름">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

위 예제에서 TextInputLayout은 플랫폼 재라이팅으로 구현되어 힌트와 에러 메시지를 표시 할 수 있고 TextInputEditText은 텍스트 필드의 기본 입력 필드를 나타낸다.

입력 폼 추가하기

여러 개의 텍스트 필드를 포함하는 입력 폼을 만들기 위해서는 TextInputLayout을 조합하여 사용할 수 있다.

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="이름">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:hint="이메일"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

위의 예제에서 TextInputLayout은 텍스트 필드를 감싸고 있으며, 각각의 TextInputEditText은 텍스트 필드를 나타낸다.

Material Components 라이브러리를 사용하여 텍스트 필드 및 입력 폼을 구성하는 방법에 대한 간단한 가이드를 제공했다. 이를 통해 안드로이드 앱에서 사용자 친화적이고 아름다운 입력 폼을 구성하는 데 도움이 될 것이다.