三、TextInputLayout

一、TextInputLayout是對EditText的包裝擴展,可以對EditText進行輸入檢查,輸入字符計數,密碼隱藏,如下圖所示:
效果圖.png

當EditText獲得焦點時,android:hint指定的字符串會以高亮的顏色顯示在EditText的上方,當失去焦點時,又會以灰色的提示樣式顯示在EditText中,這就是最基本的使用方式:當我們輸入過程中仍可以看到EditText所關聯的提示;

二、TextInputLayout的基本使用
  • 1.首先導入TextInputLayout的依賴

compile 'com.android.support:design:25.1.1'

  • 2.編寫xml布局,將TextInputLayout作為EditText的父布局來使用,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TextInputActivity">

    <android.support.design.widget.TextInputLayout
        android:layout_marginTop="100dp"
        android:id="@+id/username_inputlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="userName" />


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

    <!--app:passwordToggleDrawable="@mipmap/ic_launcher_round"設置自己想要的最右邊的圖標-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_inputlayout"
        android:layout_width="match_parent"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:inputType="textPassword"
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="password" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

TextInputEditText控件是design給我們提供的一個右邊帶圖標的控件,繼承與LinearLayout,只要在TextInputLayout中設置app:passwordToggleEnabled="true"和在TextInputEditText中同時設置android:inputType="numberPassword"就能顯示默認的圖標,并且將密碼隱藏和顯示功能已經實現;此功能也可在代碼中動態設置

mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);

注意下TextInputLayout中設置字體樣式的屬性:

  • 1.app:hintTextAppearance:用來設置懸浮上面的提示文字的外觀;
  • 2.app:counterTextAppearance:用來設置右下角提示數字的外觀,只有設置了setCounterEnabled為true后才有效果;
  • 3.app:counterOverflowTextAppearance:用來設置超過最大字符限制時懸浮左上提示文字和右下角記錄數字的外觀;TextInputLayout必須設置了setError之后,并且觸發了error之后才有效果;
  • 4.app:errorTextAppearance:用來設置下劃線和左下角的外觀;只有觸發了setError才有效果;
三、具體的設置
  • 3.1 輸入檢查
    除了在EdiText的左上方提示輸入外,TextInputLayout還支持在EditText正右下方提示用戶是否輸入了不和規則條件的內容,以此來提醒用戶;
    代碼設置如下:
 mUserNameEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                int length = s.length();
                if(length> MAX_LENGTH ){
                    mUserNameTextInputLayout.setError("Max length is :"+ MAX_LENGTH);
                }else{
                    mUserNameTextInputLayout.setErrorEnabled(false);
                }
            }
        });

在上面的代碼中我們監聽了EditText的輸入內容,然后在輸入后觸發某個條件,調用TextInputLayout的setError方法來設置提醒的描述;與setError相關的方法如下:

    1. public void setError(@Nullable final CharSequence error)
      設置錯誤提示的文字,它會被顯示在EditText的正下方;
  • 2 . public void setErrorTextAppearance(@StyleRes int resId)
    設置錯誤提示的文字顏色和大小;
    mUserNameTextInputLayout.setErrorTextAppearance(R.style.TextInputErrorStyle);

<style name="TextInputErrorStyle" parent="AppTheme">
<item name="android:textSize">16sp</item>
<item name="android:textColor">@color/colorPrimary</item>
</style>

  • 3 . ** public void setErrorEnabled(boolean enabled)
    設置錯誤提示是否可用;

  • 3.2 輸入計數
    TextInputLayout支持輸入框中字符實時統計,并在字符長度超過設置的閾值后,改變輸入框邊欄的顏色和提示文字的顏色;
    具體設置如下:

mUserNameTextInputLayout.setCounterEnabled(true);
mUserNameTextInputLayout.setCounterMaxLength(MAX_LENGTH);

與輸入計數功能相關的方法:

  • 1 . public void setCounterEnabled(boolean enabled)
    設置計數功能是否可用;

  • 2 . public void setCounterMaxLength(int maxLength)
    設置計數顯示的最大值;

  • 3.3 輸入時隱藏密碼,或者在輸入框右邊設置一個圖標
    在輸入框的右邊設置一個開關圖標,讓用來來選擇輸入時是否能夠隱藏(一般用*顯示);TextInputLayout也提供了這樣的功能,EditText的inputType為textPassword/textWebPassword/numberPassword時,通過下面的設置:

mPasswordTextInputLayout.setPasswordVisibilityToggleEnabled(true);
   mPasswordTextInputLayout.setPasswordVisibilityToggleDrawable(R.mipmap.ic_launcher_round);

我們也可以通過下面的方法來改變輸入框右邊的圖標和顏色:


設置最右邊圖標.jpg

github倉庫

相關內容:

一、CoordinatorLayout的梳理與使用

二、Toolbar的梳理與使用

三、TextInputLayout的梳理與使用

四、FloatingActionButton的梳理與使用

五、Snackbar的梳理與使用

六、CardView的梳理與使用

七、BottomSheetDialog的梳理與使用

八、TabLayout的梳理與使用

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,527評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內容