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