Material Design風格文字輸入樣式TextInputLayout的使用
阿新 • • 發佈:2019-02-03
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>
解釋:
屬性 | 含義 |
---|---|
android:textColorHint | 提示字型的顏色 |
colorControlNormal | 下劃線沒有獲取焦點,也就是預設的顏色 |
colorControlActivated | 點選時下劃線的顏色 |
計數器功能
使用
TextInputLayout還實現了輸入時候記錄輸入字元數的功能,可以通過設定引數實現,匯入如下環境
xmlns:app="http://schemas.android.com/apk/res-auto"
新增如下屬性
app:counterEnabled="true"
app:counterMaxLength="11"
app:counterTextAppearance="@style/text_style"
屬性 | 含義 |
---|---|
app:counterEnabled | 是否開啟此功能 |
app:counterMaxLength | 計數器限制的最大值 |
app:counterTextAppearance | 計數器的字型樣式 |
錯誤提示功能
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"
屬性 | 含義 |
---|---|
app: passwordToggleEnabled | 是否開啟密碼可視的功能 |
app: passwordToggleTint | 修改提示圖示的顏色 |
總結
google繼Android5.0後出了一系列Material Design風格的控制元件,也引起了部分web端與Android端的的Material Design風格化。個人認為這也是一個比較好的設計語言。如果利用的好,將會對APP的互動很有利。