こんにちは、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の説明になります。