【移動應(yīng)用開發(fā)技術(shù)】怎么在Android中使用TextInputLayout創(chuàng)建一個登陸頁面

【移動應(yīng)用開發(fā)技術(shù)】怎么在Android中使用TextInputLayout創(chuàng)建一個登陸頁面

怎么在Android中使用TextInputLayout創(chuàng)建一個登陸頁面？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。1.實現(xiàn)TextInputLayout第一步:創(chuàng)建一個新的項目在AndroidStudio中選擇New>Newproject。填入所需的信息然后創(chuàng)建項目。我的例子的targetapi是17，這是DesignSupportLibrary支持的最小api版本。這個級別的api基本上已經(jīng)支持絕大多數(shù)設(shè)備了。我把主activity命名為LoginActivity，它的布局文件命名為activity_login.xml。創(chuàng)建完項目之后，在主activity中把AndroidStudio自動產(chǎn)生的onCreateOptionsMenu和onOptionsItemSelected方法刪掉。我們要創(chuàng)建的登陸界面不需要菜單所以刪掉這些方法是ok的。記得也刪掉res/menu目錄中的XML菜單文件。第二步:導(dǎo)入SupportLibrary要使用TextInputLayout控件，你需要導(dǎo)入兩個Library。第一個是appcompat-v7,它確保materialstyle可以向后兼容。第二個是DesignSupportLibrary。在你的build.gradle文件中，添加如下依賴：

dependencies

{

compile

fileTree(dir:

'libs',

include:

['*.jar'])

compile

'com.android.support:design:22.2.0'

compile

'com.android.support:appcompat-v7:22.2.0'

}如果Gradle沒有自動詢問同步項目，選擇build菜單中的Makemodule‘a(chǎn)pp'，或者按F9。這樣AndroidStudio編譯系統(tǒng)會自動獲取必要的資源，然后你就能夠使用需要的類了。第三步:設(shè)計用戶界面這個項目的用戶界面非常簡單。它顯示了一個“歡迎”文字（可以很容易替換成logo什么的）與兩個EditText元素，一個是為用戶名準(zhǔn)備的，一個是為密碼準(zhǔn)備的。布局中還包含了一個觸發(fā)登陸流程的按鈕。背景顏色是扁平風(fēng)格的灰色。另一個重要的細(xì)節(jié)是記得正確設(shè)置EditText的inputType屬性。第一個EditText的inputType應(yīng)該設(shè)置成textEmail，而第二個應(yīng)該設(shè)置成textPassword。下面是布局的樣子：<LinearLayout

xmlns:android="/apk/res/android"

xmlns:tools="/tools"

android:background="#e3e3e3"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="@dimen/activity_horizontal_margin"

tools:context=".LoginActivity"

android:orientation="vertical">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="0.5"

android:orientation="vertical">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center"

android:text="Welcome"

android:textSize="30sp"

android:textColor="#333333"/>

</RelativeLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="0.5"

android:orientation="vertical">

<EditText

android:id="@+id/username"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textEmailAddress"/>

<EditText

android:id="@+id/password"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textPassword"/>

<Button

android:id="@+id/btn"

android:layout_marginTop="4dp"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Login"/>

</LinearLayout>

</LinearLayout>你可能還想去掉appbar，也就是過去說的actionbar，編輯style.xml文件：<style

name="AppTheme"

parent="Theme.AppCompat.Light.NoActionBar">

</style>第四步:使用TextInputLayout我們總算到了本教程最有趣的部分。TextInputLayout控件和LinearLayout完全一樣，它只是一個容器。跟ScrollView一樣，TextInputLayout只接受一個子元素。子元素需要是一個EditText元素。

<android.support.design.widget.TextInputLayout

android:id="@+id/usernameWrapper"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<EditText

android:id="@+id/username"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textEmailAddress"

android:hint="Username"/>

</android.support.design.widget.TextInputLayout>注意這里我在EditText中指定了另一個參數(shù)，hint。就如你知道的，這個屬性允許你在EditText的內(nèi)容為空的時候顯示一個自定義的提示。一旦用戶開始輸入，hint會消失。這并不理想，因為用戶丟失了他們輸入信息的上下文提示。有了TextInputLayout，這將不再是問題。一個單一的EditText在輸入文字的時候會隱藏hint，而被包含在TextInputLayout中的EditText則會讓hint變成一個在EditText上方的浮動標(biāo)簽。同時還包括一個漂亮的material動畫。接下來，我們對password輸入框做同樣的事情。

<android.support.design.widget.TextInputLayout

android:id="@+id/passwordWrapper"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/usernameWrapper"

android:layout_marginTop="4dp">

<EditText

android:id="@+id/password"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:inputType="textPassword"

android:hint="Password"/>

</android.support.design.widget.TextInputLayout>現(xiàn)在如果你運(yùn)行應(yīng)用，什么也不會發(fā)生。當(dāng)然，EditText的hint會表現(xiàn)的跟預(yù)期一致。但是沒有material動畫也沒有浮動標(biāo)簽。為什么會這樣？我們還缺少一些代碼。第五步:設(shè)置Hints下面是setContentView方法，初始化對theTextInputLayout視圖的引用。final

TextInputLayout

usernameWrapper

=

(TextInputLayout)

findViewById(R.id.usernameWrapper);

final

TextInputLayout

passwordWrapper

=

(TextInputLayout)

findViewById(R.id.passwordWrapper);要讓浮動標(biāo)簽動起來，你只需設(shè)置一個hint，使用setHint方法：usernameWrapper.setHint("Username");

passwordWrapper.setHint("Password");然后你就完成了。你的登陸界面現(xiàn)在很好的遵循了material設(shè)計規(guī)范。運(yùn)行項目查看你的登陸界面。2.處理錯誤TextInputLayout的另一個特色是它可以處理錯誤。通過驗證輸入，你可以防止用戶輸入無效的郵箱地址或者是太短的密碼。如果沒有驗證，后臺可能反饋回不正確的結(jié)果呈現(xiàn)給用戶。對于用戶來說既浪費(fèi)了時間又體驗不好。在發(fā)送到后臺之前你應(yīng)該先檢查輸入的正確性。第一步:實現(xiàn)onClick方法首先你需要處理按鈕的點擊。有許多方法處理按鈕的點擊。其中一種就是寫一個自定義的方法然后在xml中通過onClick屬性指定，我喜歡setOnClickListener的方式，但這只是個人喜好。

btn.setOnClickListener(new

View.OnClickListener()

{

@Override

public

void

onClick(View

v)

{

//

STUB

}

});我們知道當(dāng)這個方法調(diào)用之后，用戶不再需要鍵盤。不幸的是，如果你不告訴它，安卓不會自動的隱藏虛擬鍵盤。在onClick方法體中調(diào)用hideKeyboard。

private

void

hideKeyboard()

{

View

view

=

getCurrentFocus();

if

(view

!=

null)

{

((InputMethodManager)

getSystemService(Context.INPUT_METHOD_SERVICE)).

hideSoftInputFromWindow(view.getWindowToken(),

InputMethodManager.HIDE_NOT_ALWAYS);

}

}第二步:輸入驗證在設(shè)置錯誤標(biāo)簽之前，我們需要定義什么是錯誤，什么不是。我們假設(shè)用戶名必須是一個郵箱地址并且我們想阻止用戶輸入無效的郵箱地址。驗證郵箱地址有點復(fù)雜。我們必須依賴正則表達(dá)式。如果你想也可以使用ApacheCommonslibrary。我使用了Wikipedia上關(guān)于郵箱驗證的指導(dǎo)，寫了如下的正則表達(dá)式。/^[a-zA-Z0-9#_~!$&'()*+,;=:."(),:;<>@\[\]\\]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/注：這個正則表達(dá)式的意思我就不翻譯了，如果你不熟悉正則表達(dá)式看了也沒啥用。因為我們想驗證字符串，我必須依賴Pattern和Matcher兩個類。includeava.util.regex包。實現(xiàn)如下的方法：

private

static

final

String

EMAIL_PATTERN

=

"^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";

private

Pattern

pattern

=

Ppile(EMAIL_PATTERN);

private

Matcher

matcher;

public

boolean

validateEmail(String

email)

{

matcher

=

pattern.matcher(email);

return

matcher.matches();

}密碼的驗證簡單的多。很多組織為密碼的驗證采用了不同的策略，但是所有人都會限制最短長度。合理的密碼應(yīng)該不低于6個字符。public

boolean

validatePassword(String

password)

{

return

password.length()

>

5;

}第三步:獲取數(shù)據(jù)就如我說的，TextInputLayout只是一個容器，但是和LinearLayout和ScrollView不同，你可以使用一個特殊的方法獲得子元素，getEditText，不需要使用findViewById。public

void

onClick(View

v)

{

hideKeyboard();

String

username

=

usernameWrapper.getEditText().getText().toString();

String

password

=

passwordWrapper.getEditText().getText().toString();

//

TODO:

Checks

//

TODO:

Login

}第四步:顯示錯誤TextInputLayout的錯誤處理簡單快速。需要的方法是setErrorEnabled和setError。setError設(shè)置一個紅色的錯誤消息，顯示在EditText的下面。如果傳入的參數(shù)為null，錯誤消息將清空。并且它會改變整個EditText控件為紅色。setErrorEnabled開啟錯誤提醒功能。這直接影響到布局的大小，增加底部padding為錯誤標(biāo)簽讓出空間。在setError設(shè)置錯誤消息之前開啟這個功能意味著在顯示錯誤的時候布局不會變化。你可以把這兩個方法結(jié)合起來驗證下我所說的。另一個有趣的事實是如果錯誤功能未開啟但是你調(diào)用了傳入非null參數(shù)的setError，那么setErrorEnabled(true)將自動被調(diào)用?，F(xiàn)在我們定義了什么是錯誤的什么是正確的，也知道了如何獲取EditText中的數(shù)據(jù)以及顯示可能的錯誤，onClick方法的實現(xiàn)就很簡單了。public

void

onClick(View

v)

{

hideKeyboard();

String

username

=

usernameWrapper.getEditText().getText().toString();

String

password

=

usernameWrapper.getEditText().getText().toString();

if

(!validateEmail(username))

{

usernameWrapper.setError("Not

a

valid

email

address!");

}

else

if