[Design support Library] TextInputLayoutについて

こんにちは、KID.Aです。

今回からデザインサポートライブラリーのクラスの説明をしていこうと思います。
Design support Libraryはデザインのサポートライブラリーで素晴らしいコンポーネントがいくつもあります。
今回はその一つの「TextInputLayout」について説明していきます。

TextInputLayoutはEditTextのワッパーでテキストが空の場合に記載されている文字(フローティングラベル)をユーザが入力している際にも表示できるようにしてくれる機能を持っています。

・APIは以下です。
http://developer.android.com/intl/ja/reference/android/support/design/widget/TextInputLayout.html

実装

・実装は以下の通りです。

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="jp.co.textinputlayouttest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通常のEditText"/>

    <EditText
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:hint="IDを入力してください"
        android:inputType="text"
        android:textSize="16sp" />

    <TextView
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextInputLayout"/>

    <android.support.design.widget.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:hint="IDを入力してください"
            android:inputType="text"
            android:textSize="16sp" />

    </android.support.design.widget.TextInputLayout>
</LinearLayout>

挙動

挙動は以下のようになります。

・通常のEditTextは何もでません。

・TextInputLayoutにフォーカスするとフォローティングラベルがアニメーションして、TextEditの上に表示されます。

以上がTextInputLayoutの説明になります。

関連記事

[Design support Library] CoordinatorLayoutについて [Design support Library] NavigationViewについて [Design support Library] SwipeDismissBehaviorについて Cameraのプレビューサイズとピクチャーサイズの比率の検証