Material Design學習-----TextInputLayout

　　TextInputLayout是爲EditText提供了一種新的實現和交互方式。在傳統的EditText中存在一個hint屬性，是說在editext中沒有內容時，默認的提示信息。當想edittext中輸入信息的時候會自動消失。而在TextInputLayout中當想edittext中輸入信息的時候，這些提示信息會經過動畫的方式，移動到控件頂部繼續存在，同時還會提示錯誤的信息，實現了一個更好的交互效果。實現的效果以下圖：

　　一、實現方式

　　　TextInputLayout和通常的layout同樣，是一個容器，只要把想實現效果的edittext放在容器中就能夠了，可是同時TextInputLayout和scrollview同樣，其中只能放一個控件做爲其子控件。實現代碼以下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6     <android.support.design.widget.TextInputLayout
 7         android:id="@+id/username_layout"
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content">
10         <EditText
11             android:id="@+id/username"
12             android:layout_width="match_parent"
13             android:layout_height="wrap_content"
14             android:hint="用戶名"/>
15     </android.support.design.widget.TextInputLayout>
16     <android.support.design.widget.TextInputLayout
17         android:id="@+id/pwd_layout"
18         android:layout_width="match_parent"
19         android:layout_height="wrap_content">
20         <EditText
21             android:id="@+id/pwd"
22             android:layout_width="match_parent"
23             android:layout_height="wrap_content"
24             android:hint="密碼"/>
25     </android.support.design.widget.TextInputLayout>
26     <Button
27         android:id="@+id/btn_b"
28         android:layout_width="match_parent"
29         android:layout_height="wrap_content" />
30 </LinearLayout>

　　從上面能夠看出，要想讓多個edittext實現效果，就要使用多個TextInputLayout進行嵌套。

　　要想讓結果實現，光是在xml佈局文件中實現仍是不夠的，同時還須要在Activity中實現相應的設置：

1 text1= (TextInputLayout) findViewById(R.id.username_layout);
2         text2= (TextInputLayout) findViewById(R.id.pwd_layout);
3         btn= (Button) findViewById(R.id.btn_b);
4         text1.setHint("用戶名");
5         text2.setHint("密碼");

　　同時要是想要實現錯誤提示信息的話，就要設置相應的setErrorEnabled方法和setErrror方法：

1 text1.setErrorEnabled(true); 
2 text1.setError("密碼錯誤");

　　二、自定義樣式　　

　　你可能還想作最後一件事，改變TextInputLayout控件的顏色。默認AppCompact會把它設置成綠色的，可是頗有可能這個顏色會和你的顏色主題（color palette）衝突。

 

谷歌把Design Support Library寫的很好。每個控件的顏色都是直接經過主題顏色繪製的，在 style.xml 中指定。打開它添加colorAccent 到主題以改變表單的顏色。

1 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
2     <item name="colorAccent">#3498db</item>
3 </style>