前言
源碼傳送門? https://github.com/xiehui999/fuseProgram
https://gold.xitu.io/post/587c1637128fe10057f745db
在 Material
Design出現(xiàn)之前，如果我們想寫一個登陸界面是不是一般都寫兩組TextView,EditText及一個Button，如果你想在賬號和密碼后面加一個計數(shù)的功能，又需要加控件并且要自己實現(xiàn)計數(shù)，或者在密碼框后面加個類似眼睛的密碼顯示開關(guān)，或者你想加一個賬號或者密碼輸入無效或者錯誤的提醒，一般是顯示一個Toast或者使用EditText的setError設(shè)置，不過體驗并不是太好，等等這些麻煩的的處理在Material
Design
TextInputLayout出現(xiàn)后得到了極大改善，我們可以做最少的事達(dá)到最好的效果，今天的這篇文章就是通過一個登陸界面來學(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的布局，使用時只能包含一個EditText或其子類的控件，該布局可以通過設(shè)置hint和Error顯示浮動標(biāo)簽。接下我們看看布局文件
使用其實很簡單，只需要一個TextInputLayout（需要全路徑）容器并在其中加一個EditText(或子類)，需要注意的是一個TextInputLayout有且只能對應(yīng)一個EditText。在TextInputLayout加入android:hint="賬號"就可以顯示一個浮動標(biāo)簽了，效果圖如上，還可以通過下面代碼將浮動標(biāo)簽關(guān)閉，如果關(guān)閉的話，設(shè)置hint也就沒有效果了，默認(rèn)是開啟的。
app:hintEnabled="false"
對于android:hint="賬號"屬性在TextInputLayout或者在EditText中設(shè)置都可以達(dá)到我們浮動標(biāo)簽的效果，但是不能在兩者中同時使用設(shè)置hint，當(dāng)兩者同時使用時沒有獲取焦點(diǎn)時都會顯示hint(兩個hint重疊顯示)，獲取焦點(diǎn)時TextInputLayout設(shè)置的hint會成為懸浮標(biāo)簽，但是此時EditText設(shè)置的hint不會消失，有輸入內(nèi)容時才會消失，具體原因可以自己閱讀源碼查看，代碼不多，很容易看出來。對于浮動標(biāo)簽顯示隱藏切換有一個過渡動畫，可以通過
app:hintAnimationEnabled="boolean"設(shè)置。
如果我們此時想在賬號那一欄后面加個字?jǐn)?shù)統(tǒng)計，例如一般情況我們的賬號是固定位數(shù)的，如果使用手機(jī)號作為我們的登錄賬號，此時我們加一個統(tǒng)計輸入長度可以提示用戶當(dāng)然也可以超過位數(shù)時限制其輸入，我們只需要在TextInputLayout加入
app:counterEnabled="true"
默認(rèn)是關(guān)閉的，當(dāng)然我們可以設(shè)置一個輸入的最大長度，此處設(shè)置11.
app:counterMaxLength="11"
當(dāng)我們設(shè)置輸入的最大技術(shù)長度11時并不是到達(dá)11后不能再輸入計數(shù)，而是會以一種顏色提示用戶強(qiáng)調(diào)超過設(shè)置長度。
TextInputLayout提供了設(shè)置錯誤提醒的功能，在此篇文章中我們用手機(jī)號及密碼至少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è)置錯誤，顯示效果如下，
這里寫圖片描述
對于設(shè)置錯誤，可以通過app:errorEnabled="boolean"或者代碼accountinput.setEnabled(boolean);將其打開或者關(guān)閉，當(dāng)通過accountinput.setError()設(shè)置錯誤時源碼中默認(rèn)調(diào)用setEnabled（true）打開，無需自己再次調(diào)用，還有一個注意的地方設(shè)置后不會自動取消，需要自己調(diào)用accountinput.setError(null);取消錯誤提示。例如在上面圖示提示錯誤后，我們在編輯該EditText時需要取消錯誤提示，那么我們可以通過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)我們編輯時回調(diào)執(zhí)行，我們通過getError獲取設(shè)置的錯誤信息，如果設(shè)置的有內(nèi)容則返回設(shè)置的字符，默認(rèn)為null。
對于輸入密碼的空間我們通過TextInputLayout中EditText
的android:inputType="textPassword"設(shè)置輸入密碼，此時我們可以在右側(cè)看到一個眼睛的密碼開關(guān)實現(xiàn)將密碼顯示或隱藏。如果我們不想顯示這個眼睛圖標(biāo)可以在TextInputLayout中加入
app:passwordToggleEnabled="false"
此時就看不到眼睛的圖標(biāo)，密碼也不在隱藏，當(dāng)我們想將眼睛的圖標(biāo)設(shè)置為我們自己設(shè)計的圖標(biāo)時，可以通過下面代碼設(shè)置
app:passwordToggleDrawable="@drawable/common_full_open_on_phone"
我們還可以通過passwordToggleTint給圖標(biāo)設(shè)置著色并且通過passwordToggleTintMode設(shè)置對應(yīng)模式，達(dá)到更好看的效果。
是不是很簡單，這些功能要在之前布局肯定需要一大堆代碼的，而現(xiàn)在很簡單，只要幾行代碼。
自定義EditText下劃線樣式
這里寫圖片描述
默認(rèn)情況下EditText的下劃線是灰色的，當(dāng)獲取焦點(diǎn)時顏色是colorAccent，如上圖，如果我們想自定義，可以給TextInputLayout加一個theme，如下代碼
android:theme="@style/customLineColor"
customLineColor樣式為colorControlNormal為沒有獲取焦點(diǎn)時的顏色，colorControlActivated為獲取焦點(diǎn)時的顏色，這樣就可以設(shè)置我們想要的顏色了。
@color/colorAccent
@color/drawerTextColor
自定義浮動標(biāo)簽
默認(rèn)情況下浮動標(biāo)簽的顏色也是colorAccent，我們可以通過hintTextAppearance設(shè)置浮動標(biāo)簽字體樣式，如
app:hintTextAppearance="@style/hintAppearance"，
14sp
@color/colorPrimary
自定義錯誤提示信息
app:errorTextAppearance="@style/errorAppearance"
14sp
@color/red
自定義超出計數(shù)最大長度樣式
app:counterOverflowTextAppearance="@style/counterOverflowTextAppearance"
14sp
@color/red
監(jiān)控虛擬鍵盤
通過上面的介紹，我們將TextInputLayout的使用及常用的設(shè)置都已經(jīng)都介紹了，既然文章名字是登錄界面，下面簡單介紹一下其他一些比較多登錄界面的一些實現(xiàn)。如當(dāng)焦點(diǎn)在賬戶上，我們輸入完成后直接點(diǎn)擊虛擬鍵盤上的下一項時焦點(diǎn)直接跳到密碼項，密碼輸入完成，直接可以點(diǎn)擊虛擬鍵盤的確定就可以登錄，該怎么實現(xiàn)呢。如下
在賬號的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;? ? ? ? ? ? }? ? ? ? });
動態(tài)監(jiān)測登錄按鈕
在支付寶中，當(dāng)賬戶名或者密碼有沒填的項，登錄按鈕就是不可點(diǎn)擊的，并通過樣式給用戶反饋是不是可以點(diǎn)擊。這個也很簡單，只需要給兩個EditText設(shè)置addTextChangedListener監(jiān)聽，監(jiān)聽兩個控件只有有沒填項就將登錄按鈕設(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));? ? ? ? ? ? ? ? }
#多賬號自動提示
AutoCompleteTextView是EditText的子類，可以實現(xiàn)自動提示功能該控件有一個setAdapter方法，可以監(jiān)測我們輸入的內(nèi)容在傳入的適配器中有數(shù)據(jù)時會自動彈出下拉提示，在文章開始效果圖已經(jīng)展示，代碼簡單實現(xiàn)
privateString[] accounts = {"18236593333","13463373657","18235784765","18234637686"};? ? ? ? ArrayAdapter arrayAdapter=newArrayAdapter(this,android.R.layout.simple_list_item_1,accounts);? ? ? ? mAccountView.setAdapter(arrayAdapter);//輸入至少兩個字符才會提示
Ok,到這里本篇文章就結(jié)束了，有問題歡迎留言指出，Have a wonderful day .
