-
導(dǎo)入Support Library
想要使用
TextInputLayout控件迅腔，必須先在自己的項(xiàng)目中導(dǎo)入Support Liarbry倍阐，如果沒有下載這個(gè)支持庫(kù)纵散，可以打開SDK Manager去下載
在build.gradle 加入以下語(yǔ)句
compile 'com.android.support:design:23.2.0'
當(dāng)然這個(gè)代碼取決于你的Support Library 的版本竭鞍。
接下來我們就可以使用 TextInputLayout 控件了恋沃。
2.使用TextInputLayout創(chuàng)建一個(gè)簡(jiǎn)單的登錄界面
效果圖
首先介紹一下經(jīng)常用到幾個(gè)方法
setHint(CharSequence hint); //用于設(shè)置提示文字
setError(CharSequence error);//用于設(shè)置錯(cuò)誤提示信息
setErrorEnabled(boolean enabled);//用于設(shè)置是否將錯(cuò)誤信息顯示出來
接下來介紹如何在XML 文件中定義 TextInputLayout,它的簡(jiǎn)單使用方法如下：
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<EditText
android:id="@+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
之后在Activity 中獲取到這個(gè)TextInputLayout顺呕，然后使用上面介紹的幾個(gè)函數(shù)枫攀，對(duì)其進(jìn)行相應(yīng)設(shè)置即可。
TextInputLayout mTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
mTextInputLayout.setHint("UserName ");
好了株茶，介紹完它的簡(jiǎn)單使用方法来涨，下面就來實(shí)現(xiàn)LOGIN界面，實(shí)際上是很容易實(shí)現(xiàn)的启盛。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e3e3e3"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:id="@+id/relative">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="48sp"
android:text="Welcome"
android:gravity="center"
android:layout_centerInParent="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textInputLayout2">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="LOGIN"/>
</LinearLayout>
</LinearLayout>
之后在主函數(shù)中進(jìn)行如下操作
public class MainActivity extends AppCompatActivity {
private TextInputLayout mTextInputLayout,mTextInputLayout2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);
mTextInputLayout2 = (TextInputLayout) findViewById(R.id.textInputLayout2);
mTextInputLayout.setHint("UserName ");
mTextInputLayout2.setHint("Password");
EditText editText = mTextInputLayout.getEditText();
editText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
if (charSequence.length() > 10){
mTextInputLayout.setError("The length more than 10");
mTextInputLayout.setErrorEnabled(true);
} else {
mTextInputLayout.setErrorEnabled(false);
}
}
@Override
public void afterTextChanged(Editable editable) {
}
});
}
如以上代碼示蹦掐，在Username 輸入框內(nèi)添加了 監(jiān)聽事件，當(dāng)輸入字符長(zhǎng)度 10 時(shí)僵闯，便將錯(cuò)誤顯示出來卧抗，Password輸入框我并沒有去實(shí)現(xiàn)，因?yàn)槭窍嗤膶?shí)現(xiàn)方法鳖粟。在真正的登錄系統(tǒng)中社裆，我們還需要去檢驗(yàn)輸入的合法性，相應(yīng)檢驗(yàn)函數(shù)可以在LOGIN 按鈕的監(jiān)聽事件內(nèi)去執(zhí)行向图。
3.ActionBar 問題
為了美觀泳秀，在登陸界面一般都是將 ActionBar 進(jìn)行隱藏的，這里有兩種方法去隱藏张漂。
第一種方法十分簡(jiǎn)單晶默，直接設(shè)置一個(gè)不含ActionBar 的主題，比如我使用的是 Theme.AppCompat.DayNight.NoActionBar 主題航攒，所以自然不含有ActionBar磺陡。
第二種方法，
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
// 隱藏ActionBar
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="windowNoTitle">true</item>
</style>
好了漠畜，通過以上兩種方法都可以隱藏ActionBar币他。
4.隱藏 KeyBoard
以上登錄界面，當(dāng)我們輸入完密碼之后憔狞，會(huì)有一個(gè)非常惱人的問題蝴悉，就是除非我們按后退鍵，否則輸入鍵盤不會(huì)消失瘾敢∨墓冢或許在某些機(jī)型上尿这，只許輕輕點(diǎn)擊一下Home 鍵就可以實(shí)現(xiàn)返回的功能，但是在另一些機(jī)型上庆杜，比如說我的調(diào)試機(jī) 魅族MX2射众，必須上劃 Home 鍵，才可以實(shí)現(xiàn)返回功能晃财，又由于叨橱，點(diǎn)擊Home鍵是返回主菜單，經(jīng)常出現(xiàn)按錯(cuò)的問題断盛，現(xiàn)在我們來實(shí)現(xiàn)一個(gè)功能罗洗，讓我們點(diǎn)擊屏幕上的其他控件，以隱藏輸入鍵盤钢猛。
在以上登陸界面內(nèi)伙菜，輸入鍵盤彈出時(shí)，屏幕的絕大部分空間都被RelativeLayout控件占據(jù)厢洞，所以我為這個(gè)控件設(shè)置了一個(gè)監(jiān)聽事件仇让，當(dāng)用戶輸入完點(diǎn)擊這個(gè)控件，便去隱藏KeyBoard躺翻，主要添加代碼如下
RelativeLayout mRelativeLayout = (RelativeLayout) findViewById(R.id.relative);
mRelativeLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
hideKeyboard();
}
});
private void hideKeyboard() {
((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
hideSoftInputFromWindow(mRelativeLayout.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
}
好了，通過以上設(shè)置有解決了KeyBoard的問題卫玖，這個(gè)時(shí)候公你，我們發(fā)現(xiàn) TextInputLayout的hint文字顏色為深紅色，那么我們能不能改變這個(gè)顏色呢假瞬？
5.改變 Hint 樣式
打開 values\styles.xml 陕靠，找到以下代碼
<item name="colorAccent">@color/colorAccent</item>
就算找不到這行代碼也沒關(guān)系，我們可以手動(dòng)添加進(jìn)去脱茉，只要改變這個(gè) colorAccent的值剪芥，就可以將 整個(gè) 樣式改變?yōu)槲覀兿胍念伾恕?/p>
