1. 程式人生 > >Material Design風格文字輸入樣式TextInputLayout的使用

Material Design風格文字輸入樣式TextInputLayout的使用

TextInputLayout介紹

TextInputLayout是Google基於Material Design風格出現的一個文字輸入佈局。主要特點在樣式上,官方第一句介紹是當輸入的文字顯示或者隱藏的時候,EditText顯示浮動標籤的佈局。

先看看樣式

樣式其實是有動畫效果的

螢幕快照 2017-04-22 下午12.32.49副本.png

螢幕快照 2017-04-22 下午12.33.07副本.png

使用方法

引入包環境

由於這個控制元件在這個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的互動很有利。