소개

TextInputLayout 는 Android Design Support Library에 포함된 텍스트 입력 기능을 제공하는 View입니다. MaterialDesign의 TextFields를 실현하기 위해서 사용됩니다. 이번에는 이 TextInputLayout에 대해 공부했으므로 꼭 참고해 주시면 감사하겠습니다.

소개

레이아웃 xml 만들기

activity_main.xml

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:counterEnabled="true"
            app:counterMaxLength="20"
            app:errorEnabled="true">

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

    </com.google.android.material.textfield.TextInputLayout>

상위 View 에 TextInputLayout , 하위 View 에 TextInputEditText 를 사용하여 멋지게 디자인을 구현할 수 있습니다. style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" 에 의해 텍스트 필드에의 테두리 표시가 가능하게 되어 있습니다.

상위 View(TextInputLayout)

app:counterEnabled 를 true, app:counterMaxLength 로 문자수를 설정하여 입력할 수 있는 문자수의 상한을 결정할 수 있습니다.app:errorEnabled 를 true로 설정하면 오류 메시지를 표시할 수 있습니다.

자식 View(TextInputEditText)

android:hint 에서 입력 힌트를 보거나 android:inputType 에서 입력 문자열 유형을 변경할 수 있습니다.

소스 코드

이번에 작성한 xml의 전체가 됩니다. 앱을 시작할 때 표시되는 로그인 화면을 의식적으로 작성했습니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/username"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="395dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            app:boxCornerRadiusBottomEnd="10dp"
            app:boxCornerRadiusBottomStart="10dp"
            app:boxCornerRadiusTopEnd="10dp"
            app:boxCornerRadiusTopStart="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/passView">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/usernameEdit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="ユーザ名" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/pass"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="395dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            app:boxCornerRadiusBottomEnd="10dp"
            app:boxCornerRadiusBottomStart="10dp"
            app:boxCornerRadiusTopEnd="10dp"
            app:boxCornerRadiusTopStart="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/username">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/passEdit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="numberPassword"
                android:hint="パスワード" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
            android:id="@+id/login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="72dp"
            android:layout_marginTop="64dp"
            android:text="ログイン"
            app:layout_constraintStart_toStartOf="@+id/pass"
            app:layout_constraintTop_toBottomOf="@+id/pass" />

    <Button
            android:id="@+id/setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="72dp"
            android:text="設定"
            app:layout_constraintStart_toEndOf="@+id/login"
            app:layout_constraintTop_toTopOf="@+id/login" />

    <TextView
            android:id="@+id/passView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

마지막으로

이번에는 주로 도입 방법을 주로 설명했습니다. TextInputLayout 는 일반 EditText 에 비해 애니메이션이 있거나 레이아웃과 디자인이 매우 좋아진다고 생각합니다. 또 이번은 가벼운 설명이었습니다만, 에러 메세지를 표시시키거나 할 수 있는 점도 강점이라고 느낍니다. 간단하게 구현할 수 있다고 생각하므로, 여러분도 꼭 시험해 보세요.