前言

源碼傳送門? https://github.com/xiehui999/fuseProgram

https://gold.xitu.io/post/587c1637128fe10057f745db

在 Material

Design出現(xiàn)之前，如果我們想寫一個(gè)登陸界面是不是一般都寫兩組TextView,EditText及一個(gè)Button，如果你想在賬號(hào)和密碼后面加一個(gè)計(jì)數(shù)的功能，又需要加控件并且要自己實(shí)現(xiàn)計(jì)數(shù)，或者在密碼框后面加個(gè)類似眼睛的密碼顯示開關(guān)，或者你想加一個(gè)賬號(hào)或者密碼輸入無效或者錯(cuò)誤的提醒，一般是顯示一個(gè)Toast或者使用EditText的setError設(shè)置，不過體驗(yàn)并不是太好，等等這些麻煩的的處理在Material

Design

TextInputLayout出現(xiàn)后得到了極大改善，我們可以做最少的事達(dá)到最好的效果，今天的這篇文章就是通過一個(gè)登陸界面來學(xué)習(xí)TextInputLayout的API重要方法及其使用。先來一張效果圖

這里寫圖片描述

添加依賴

TextInputLayout是在Material Design中的，所以我們需要在gradle 文件配置

dependencies {? ? compile'com.android.support:appcompat-v7:24.2.0'compile'com.android.support:design:24.2.0'}

使用

在TextInputLayout官方文檔API中描述它是一種新的繼承自LinearLayout的布局，使用時(shí)只能包含一個(gè)EditText或其子類的控件，該布局可以通過設(shè)置hint和Error顯示浮動(dòng)標(biāo)簽。接下我們看看布局文件

使用其實(shí)很簡(jiǎn)單，只需要一個(gè)TextInputLayout（需要全路徑）容器并在其中加一個(gè)EditText(或子類)，需要注意的是一個(gè)TextInputLayout有且只能對(duì)應(yīng)一個(gè)EditText。在TextInputLayout加入android:hint="賬號(hào)"就可以顯示一個(gè)浮動(dòng)標(biāo)簽了，效果圖如上，還可以通過下面代碼將浮動(dòng)標(biāo)簽關(guān)閉，如果關(guān)閉的話，設(shè)置hint也就沒有效果了，默認(rèn)是開啟的。

app:hintEnabled="false"

對(duì)于android:hint="賬號(hào)"屬性在TextInputLayout或者在EditText中設(shè)置都可以達(dá)到我們浮動(dòng)標(biāo)簽的效果，但是不能在兩者中同時(shí)使用設(shè)置hint，當(dāng)兩者同時(shí)使用時(shí)沒有獲取焦點(diǎn)時(shí)都會(huì)顯示hint(兩個(gè)hint重疊顯示)，獲取焦點(diǎn)時(shí)TextInputLayout設(shè)置的hint會(huì)成為懸浮標(biāo)簽，但是此時(shí)EditText設(shè)置的hint不會(huì)消失，有輸入內(nèi)容時(shí)才會(huì)消失，具體原因可以自己閱讀源碼查看，代碼不多，很容易看出來。對(duì)于浮動(dòng)標(biāo)簽顯示隱藏切換有一個(gè)過渡動(dòng)畫，可以通過

app:hintAnimationEnabled="boolean"設(shè)置。

如果我們此時(shí)想在賬號(hào)那一欄后面加個(gè)字?jǐn)?shù)統(tǒng)計(jì)，例如一般情況我們的賬號(hào)是固定位數(shù)的，如果使用手機(jī)號(hào)作為我們的登錄賬號(hào)，此時(shí)我們加一個(gè)統(tǒng)計(jì)輸入長(zhǎng)度可以提示用戶當(dāng)然也可以超過位數(shù)時(shí)限制其輸入，我們只需要在TextInputLayout加入

app:counterEnabled="true"

默認(rèn)是關(guān)閉的，當(dāng)然我們可以設(shè)置一個(gè)輸入的最大長(zhǎng)度，此處設(shè)置11.

app:counterMaxLength="11"

當(dāng)我們?cè)O(shè)置輸入的最大技術(shù)長(zhǎng)度11時(shí)并不是到達(dá)11后不能再輸入計(jì)數(shù)，而是會(huì)以一種顏色提示用戶強(qiáng)調(diào)超過設(shè)置長(zhǎng)度。

TextInputLayout提供了設(shè)置錯(cuò)誤提醒的功能，在此篇文章中我們用手機(jī)號(hào)及密碼至少6位做判斷，

·if(TextUtils.isEmpty(account)||!isAccountValid(account)) {? ? ? ? ? ? accountinput.setError(getString(R.string.error_invalid_account));? ? ? }if(TextUtils.isEmpty(password)||!isPasswordValid(password)) {? ? ? ? ? ? passwordinput.setError(getString(R.string.error_invalid_password));? ? ? ? }? private boolean isAccountValid(Stringname) {//TODO:Replace this with your own logicPattern pattern= Pattern.compile("^(13[0-9]|14[5|7]|15\\d|17[6|7]|18[\\d])\\d{8}$");returnpattern.matcher(name).matches();? ? ? ? }? ? private boolean isPasswordValid(Stringpassword) {//TODO:Replace this with your own logicreturnpassword.length() >6;? ? }

當(dāng)我們輸入不符合規(guī)則，設(shè)置錯(cuò)誤，顯示效果如下，

這里寫圖片描述

對(duì)于設(shè)置錯(cuò)誤，可以通過app:errorEnabled="boolean"或者代碼accountinput.setEnabled(boolean);將其打開或者關(guān)閉，當(dāng)通過accountinput.setError()設(shè)置錯(cuò)誤時(shí)源碼中默認(rèn)調(diào)用setEnabled（true）打開，無需自己再次調(diào)用，還有一個(gè)注意的地方設(shè)置后不會(huì)自動(dòng)取消，需要自己調(diào)用accountinput.setError(null);取消錯(cuò)誤提示。例如在上面圖示提示錯(cuò)誤后，我們?cè)诰庉嬙揈ditText時(shí)需要取消錯(cuò)誤提示，那么我們可以通過addTextChangedListener監(jiān)聽，代碼如下

mAccountView.addTextChangedListener(newTextWatcher() {? ? ? ? ? ? @Override? ? ? ? ? ? publicvoidbeforeTextChanged(CharSequence s, int start, int count, int after) {? ? ? ? ? ? }? ? ? ? ? ? @Override? ? ? ? ? ? publicvoidonTextChanged(CharSequence s, int start, int before, int count) {? ? ? ? ? ? }? ? ? ? ? ? @Override? ? ? ? ? ? publicvoidafterTextChanged(Editable s) {if(accountinput.getError()!=null){? ? ? ? ? ? ? ? ? ? accountinput.setError(null);? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? });

當(dāng)我們編輯時(shí)回調(diào)執(zhí)行，我們通過getError獲取設(shè)置的錯(cuò)誤信息，如果設(shè)置的有內(nèi)容則返回設(shè)置的字符，默認(rèn)為null。

對(duì)于輸入密碼的空間我們通過TextInputLayout中EditText

的android:inputType="textPassword"設(shè)置輸入密碼，此時(shí)我們可以在右側(cè)看到一個(gè)眼睛的密碼開關(guān)實(shí)現(xiàn)將密碼顯示或隱藏。如果我們不想顯示這個(gè)眼睛圖標(biāo)可以在TextInputLayout中加入

app:passwordToggleEnabled="false"

此時(shí)就看不到眼睛的圖標(biāo)，密碼也不在隱藏，當(dāng)我們想將眼睛的圖標(biāo)設(shè)置為我們自己設(shè)計(jì)的圖標(biāo)時(shí)，可以通過下面代碼設(shè)置

app:passwordToggleDrawable="@drawable/common_full_open_on_phone"

我們還可以通過passwordToggleTint給圖標(biāo)設(shè)置著色并且通過passwordToggleTintMode設(shè)置對(duì)應(yīng)模式，達(dá)到更好看的效果。

是不是很簡(jiǎn)單，這些功能要在之前布局肯定需要一大堆代碼的，而現(xiàn)在很簡(jiǎn)單，只要幾行代碼。

自定義EditText下劃線樣式

這里寫圖片描述

默認(rèn)情況下EditText的下劃線是灰色的，當(dāng)獲取焦點(diǎn)時(shí)顏色是colorAccent，如上圖，如果我們想自定義，可以給TextInputLayout加一個(gè)theme，如下代碼

android:theme="@style/customLineColor"

customLineColor樣式為colorControlNormal為沒有獲取焦點(diǎn)時(shí)的顏色，colorControlActivated為獲取焦點(diǎn)時(shí)的顏色，這樣就可以設(shè)置我們想要的顏色了。

@color/colorAccent

@color/drawerTextColor

自定義浮動(dòng)標(biāo)簽

默認(rèn)情況下浮動(dòng)標(biāo)簽的顏色也是colorAccent，我們可以通過hintTextAppearance設(shè)置浮動(dòng)標(biāo)簽字體樣式，如

app:hintTextAppearance="@style/hintAppearance"，

14sp

@color/colorPrimary

自定義錯(cuò)誤提示信息

app:errorTextAppearance="@style/errorAppearance"

14sp

@color/red

自定義超出計(jì)數(shù)最大長(zhǎng)度樣式

app:counterOverflowTextAppearance="@style/counterOverflowTextAppearance"

14sp

@color/red

監(jiān)控虛擬鍵盤

通過上面的介紹，我們將TextInputLayout的使用及常用的設(shè)置都已經(jīng)都介紹了，既然文章名字是登錄界面，下面簡(jiǎn)單介紹一下其他一些比較多登錄界面的一些實(shí)現(xiàn)。如當(dāng)焦點(diǎn)在賬戶上，我們輸入完成后直接點(diǎn)擊虛擬鍵盤上的下一項(xiàng)時(shí)焦點(diǎn)直接跳到密碼項(xiàng)，密碼輸入完成，直接可以點(diǎn)擊虛擬鍵盤的確定就可以登錄，該怎么實(shí)現(xiàn)呢。如下

在賬號(hào)的EditText中加入

android:imeActionId="@+id/password"android:imeOptions="actionNext"

在密碼的EditText中加入

android:imeActionId="@+id/account_sign_in_button"android:imeOptions="actionDone"

mPasswordView.setOnEditorActionListener(newTextView.OnEditorActionListener() {? ? ? ? ? ? @Override? ? ? ? ? ? public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {if( id == EditorInfo.IME_ACTION_DONE) {? ? ? ? ? ? ? ? ? ? InputMethodManager inputMethodManager=(InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);//inputMethodManager.showSoftInput(getWindow().getDecorView(),InputMethodManager.SHOW_FORCED);//顯示inputMethodManager.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(),InputMethodManager.RESULT_UNCHANGED_SHOWN);//attemptLogin();startLogin();returntrue;? ? ? ? ? ? ? ? }returnfalse;? ? ? ? ? ? }? ? ? ? });

動(dòng)態(tài)監(jiān)測(cè)登錄按鈕

在支付寶中，當(dāng)賬戶名或者密碼有沒填的項(xiàng)，登錄按鈕就是不可點(diǎn)擊的，并通過樣式給用戶反饋是不是可以點(diǎn)擊。這個(gè)也很簡(jiǎn)單，只需要給兩個(gè)EditText設(shè)置addTextChangedListener監(jiān)聽，監(jiān)聽兩個(gè)控件只有有沒填項(xiàng)就將登錄按鈕設(shè)置為不可以點(diǎn)擊，否則可以點(diǎn)擊，核心代碼

if(account.equals("")||password.equals("")){? ? ? ? ? ? ? ? ? ? mAccountSignInButton.setClickable(false);? ? ? ? ? ? ? ? ? ? mAccountSignInButton.setTextColor(getResources().getColor(R.color.btninvalid));? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? mAccountSignInButton.setClickable(true);? ? ? ? ? ? ? ? ? ? mAccountSignInButton.setTextColor(getResources().getColor(R.color.white));? ? ? ? ? ? ? ? }

#多賬號(hào)自動(dòng)提示

AutoCompleteTextView是EditText的子類，可以實(shí)現(xiàn)自動(dòng)提示功能該控件有一個(gè)setAdapter方法，可以監(jiān)測(cè)我們輸入的內(nèi)容在傳入的適配器中有數(shù)據(jù)時(shí)會(huì)自動(dòng)彈出下拉提示，在文章開始效果圖已經(jīng)展示，代碼簡(jiǎn)單實(shí)現(xiàn)

privateString[] accounts = {"18236593333","13463373657","18235784765","18234637686"};? ? ? ? ArrayAdapter arrayAdapter=newArrayAdapter(this,android.R.layout.simple_list_item_1,accounts);? ? ? ? mAccountView.setAdapter(arrayAdapter);//輸入至少兩個(gè)字符才會(huì)提示

Ok,到這里本篇文章就結(jié)束了，有問題歡迎留言指出，Have a wonderful day .