TextInputLayout介紹

TextInputLayout是Google基於Material Design風格出現的一個文字輸入佈局。主要特點在樣式上，官方第一句介紹是當輸入的文字顯示或者隱藏的時候，EditText顯示浮動標籤的佈局。

先看看樣式

樣式其實是有動畫效果的

使用方法

引入包環境

由於這個控制元件在這個android.support.design.widget包下，所以要檢視是否已經引入了:

compile ‘com.android.support:design:22.2.0’

compile ‘com.android.support:appcompat-v7:22.2.0’

版本可根據需求自行調整

在佈局中加入程式碼

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

     <android.support.design.widget.TextInputEditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
 

             android:hint="@string/form_username"/>

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

樣式修改

將預設的AppTheme主體新增如下屬性

<item name="android:textColorHint">@colorcommonTextColorWhite</item>
<item name="colorControlNormal">@colorcommonTextColorWhite</item>
<item
 
 name="colorControlActivated">@colorcommonTextColorWhite</item>
<item name="colorControlHighlight">@colorcommonTextColorWhite</item>

解釋：

計數器功能

使用

TextInputLayout還實現了輸入時候記錄輸入字元數的功能，可以通過設定引數實現,匯入如下環境

  xmlns:app="http://schemas.android.com/apk/res-auto"

新增如下屬性

app:counterEnabled="true"
app:counterMaxLength="11"
app:counterTextAppearance="@style/text_style"

錯誤提示功能

TextInputLayout還有個錯誤提示的功能，可以直接通過api使用。

新增如下程式碼

app:errorEnabled="true"
app:errorTextAppearance="@style/error_text_style"

在java程式碼中設定

textInputLayout.setError("這是textInputLayout的錯誤提示");
mobile.setError("這是EditText的錯誤提示");

密碼可視功能

將inputType的型別設定為password之後，可以通過設定如下屬性。而且預設效果支援Material Design效果和預設動畫，也是酷酷的。

app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorAccent"

總結

google繼Android5.0後出了一系列Material Design風格的控制元件，也引起了部分web端與Android端的的Material Design風格化。個人認為這也是一個比較好的設計語言。如果利用的好，將會對APP的互動很有利。