[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は何もでません。
SnapCrab_NoName_2016-2-8_10-44-38_No-00

 

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

 

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

 

 

KID.A

KID.A の紹介

楽して生きることと一発逆転を夢見ている、ちゃきちゃきのAndroiderです。 いろいろアプリを出しているのですが、いつもリリース後にターゲットユーザ数を2桁見誤っていたことに気付くので、残念でなりません。下方修正で、ヒットがでません。おしいです。 明日から本気出します。 よろしくお願いします。
カテゴリー: Android タグ: , , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です