android TextInputLayout組件的使用

TextInputLayout介紹

TextInputLayout 是android 原生的一個組件,使用這個組能夠獲得很好的輸入框體驗效果:android

TextInputLayout 的使用

首先在app下的 build.gradle 中引入app

compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'

而後在佈局文件中實現下面的佈局佈局

<android.support.design.widget.TextInputLayout
        android:id="@+id/phoneTextinputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="20dp"
        android:theme="@style/myStyle"
        app:counterEnabled="false"
        app:counterMaxLength="11"
        app:passwordToggleEnabled="false">

        <!-- 這裏的TextInputEditText可使用EditText代替 -->
        <android.support.design.widget.TextInputEditText
            android:id="@+id/phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="輸入的內容"
            android:inputType="phone"
            android:maxLength="11"
            android:textSize="18sp" />
    </android.support.design.widget.TextInputLayout>

ok,這樣就能夠實現 TextInputLayout 的效果了gradle

效果圖

TextInputLayout 的相關屬性

1.app:hintAnimationEnabled="true"//設置是否可使用動畫,默認是true
2.app:hintTextAppearance="@style/myStyle"//設置hint的文本屬性,改變hint文字的大小顏色等屬性動畫

修改樣式後的效果圖

app:counterEnabled="true"//設置是否能夠開啓計數器,默認是false
app:counterOverflowTextAppearance="" 計算器越位後的文字顏色和大小
app:counterMaxLength=""計算器的最大字數限制
app:errorEnabled="true" 是否容許錯誤提示
app:errorTextAppearance="" 錯誤提示的文字大小和顏色
app:passwordToggleEnabled="true"顯示小眼睛
app:passwordToggleTint="@color/colorAccent" 給小眼睛上色
app:passwordToggleTintMode="multiply"小眼睛的顯示方式
須要注意的是:若是想要顯示小眼睛,就須要在 TextInputEditText 或者 EditText 中設置 爲密碼格式。好比: android:inputType="textPassword"ui

密碼顯示效果

相關文章
相關標籤/搜索