Material Design之TextInputLayout使用示例

使用TextInputLayout創建一個登陸界面

1.導入支持庫 

使用TextInputLayout 控件需要導入兩個庫，一個是appcompat-v7，保證material styles可以向下兼容。另一個是Design Support Library。 

在項目的build.gradle文件中，添加下面的依賴(dependencies):

dependencies {
        compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
        compile ‘com.android.support:design:22.2.0‘
        compile ‘com.android.support:appcompat-v7:22.2.0‘
    }

2.使用TextInputLayout 

TextInputLayout 控件表現得就像LinearLayout 一樣，它是一個容器。TextInputLayout 中只能放一個子元素，和ScrollView有點類似，並且子元素必須是EditText 。

<android .support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <edittext android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

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

注意到了么，我在EditText設置一個屬性-hint。這個屬性大家都很熟悉了，EditText沒有輸入的時候，hint會顯示，當輸入第一個字母上去的時候，hint就消失了。這個體驗不是太好。 
感謝TextInputLayout，這個馬上就不是問題了。當EditText中輸入第一個字母要隱藏hint的時候，TextInputLayout中會出現一個懸浮的標簽來顯示這個hint，還負責一個炫酷的的material 動畫。

注：EditText的高度可以固定， TextInputLayout 的高度不要固定，否則TextInputLayout 的setError()的信息可能會無法正常顯示

3.app:hintTextAppearance="@style/FloatingStyle"

app:hintTextAppearance=”@style/FloatingStyle” 用於設置floating字體的樣式。

<style name="FloatingStyle" parent="@android:style/TextAppearance">
        <item name="android:textColor">#e0ffffff</item>
        <item name="android:textSize">12sp</item>
  </style>

TextInputLayout可以使用setError()方法在輸入框下方顯示錯誤信息，用途類似EditText的setError()。同樣的，在xml中可以使用app:errorTextAppearance來設置錯誤信息的字體樣式。

 

 

參考鏈接：http://www.mamicode.com/info-detail-965904.html

其他鏈接：http://www.open-open.com/lib/view/open1433496206666.html