前言
最近在寫(xiě)些小Demo復(fù)習(xí)基礎(chǔ)，在用到EditText的時(shí)候突然發(fā)現(xiàn)之前幾乎沒(méi)有注意到它的光標(biāo)和下劃線(xiàn)的顏色，于是花了不少時(shí)間，看了不少博客，現(xiàn)在就來(lái)總結(jié)和分享一下收獲，話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹：
1、第一印象：原生的EditText
我們要在原生的EditText上修改，首先當(dāng)然要認(rèn)識(shí)一下它的本來(lái)面目。在Android Studio中新建一個(gè)工程，讓MainActivity繼承于AppCompatActivity（為什么要這樣做，后面再說(shuō)），然后在MainActivity的布局中放置一個(gè)EditText：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.lindroid.edittext.MainActivity"> <EditText android:hint="原生的EditText" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout>
運(yùn)行工程，仔細(xì)觀察可以看到光標(biāo)和下劃線(xiàn)都是粉紅色的。現(xiàn)在就讓我們循序漸進(jìn)，先修改它的光標(biāo)顏色。
2、自定義光標(biāo)顏色
EditText 有一個(gè)屬性：android:textCursorDrawable ，它就是用來(lái)設(shè)置光標(biāo)樣式的。為了加深認(rèn)識(shí)，大家先額外做個(gè)小實(shí)驗(yàn)：將textCursorDrawable設(shè)置為@null，表示去除系統(tǒng)默認(rèn)的樣式，但我們都記得隱藏光標(biāo)的屬性是android:cursorVisible , 那么這時(shí)光標(biāo)會(huì)是什么樣子的呢？你可以給文字（android:textColor）和提示文字（android:textColorHint屬性）設(shè)置不同的顏色，運(yùn)行之后就會(huì)發(fā)現(xiàn)此時(shí)光標(biāo)的顏色是跟文字的保持一致的。
了解了android:textCursorDrawable 的作用之后，我們可以在drawable資源文件夾下新建一個(gè)cursor_color.xml文件，內(nèi)容如下
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <size android:width="2dp" /> <solid android:color="@android:color/holo_blue_light" /></shape>
光標(biāo)的顏色為系統(tǒng)自帶的淺藍(lán)色，寬度為2dp。在原生的EditText下面放置一個(gè)新的EditText：
<EditText android:textCursorDrawable="@drawable/cursor_color" android:hint="自定義光標(biāo)顏色" android:layout_width="match_parent" android:layout_height="wrap_content" />
運(yùn)行效果如下：
3、取消背景后的EditText
第2節(jié)中，我們將屬性android:textCursorDrawable 設(shè)置為“@null”之后發(fā)現(xiàn)光標(biāo)的樣式會(huì)變得跟文字的顏色一樣，那么如果將整個(gè)EditText的背景設(shè)置為“@null”呢？我們可以添加一個(gè)EditText，然后為它增加屬性android:background="@null" ：
可以看到，雖然光標(biāo)的樣式?jīng)]有改變，但是下劃線(xiàn)消失了，不過(guò)除此之外，EditText的邊距也沒(méi)有了，如果不是光標(biāo)在閃爍，一眼看上去就像個(gè)TextView了。
網(wǎng)上有些自定義EditText下劃線(xiàn)的教程就是這樣操作的，先把背景去除，再在下面加一個(gè)橫線(xiàn)。這樣的操作未嘗不可，但是為了美觀，還是得重新設(shè)置間距值。。
4、自定義主題修改下劃線(xiàn)
還記得剛才我們?cè)趧?chuàng)建MainActivity時(shí)要繼承AppCompatActivity嗎？到了這里就要揭曉答案了。這樣做是為了使用appcompat-v7包中的Material Design樣式，比如我們可以在Styles.xml文件中新建一個(gè)MyEditText樣式：
<style name="MyEditText" parent="Theme.AppCompat.Light"> <item name="colorControlNormal">@android:color/darker_gray</item> <item name="colorControlActivated">@android:color/holo_orange_dark</item> </style>
colorControlNormal 表示控件默認(rèn)的顏色，colorControlActivated 表示控件被激活時(shí)的顏色，這樣，我們就可以分別設(shè)置EditText不被選中和選中時(shí)的顏色了。這里我將選中的顏色設(shè)為橙色。
在activity_main.xml中再增加一個(gè)EditText，加上android:theme="@style/MyEditText" 屬性，效果如下：
可以看到，光標(biāo)和下劃線(xiàn)的顏色都會(huì)修改掉，而間距還是會(huì)保留。
5、全局修改EditText顏色
前面的做法都是針對(duì)一個(gè)EditText來(lái)修改的，如果需要把項(xiàng)目中所有的EditText的顏色都改掉的話(huà)，那這樣做的話(huà)工作量就太大了。有沒(méi)有辦法可以一腳定江山的呢？
不知道你發(fā)現(xiàn)了沒(méi)有，為什么EditText默認(rèn)是騷氣的粉紅色呢？事實(shí)上，你設(shè)置其他幾種控件（比如ProgressBar、Switch等等），它們的顏色基本上也是騷粉。你只要再看一眼剛才的styles.xml，里面的AppTheme的代碼是這樣的：
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
看到了嗎？里面的colorAccent就是那個(gè)騷粉色了。為了理解這三種顏色，我特地找了一張圖：
6、繼承Activity時(shí)自定義下劃線(xiàn)
前面我們做的自定義下劃線(xiàn)操作都是在繼承AppCompatActivity的前提下，如果你改成Activity，然后在Android5.0以下的手機(jī)運(yùn)行的話(huà)，效果是這樣的：
Material Design風(fēng)格消失了，光標(biāo)的顏色雖然還能修改，但是下劃線(xiàn)的顏色卻改不了。所以我們還得另想方法。
EditText是一個(gè)輸入框，我們可以這樣理解：下劃線(xiàn)無(wú)非就是給輸入框的下邊框加一條線(xiàn)。這個(gè)用Android中的layer-list（圖層）就可以做到。新建兩個(gè)xml文件：et_underline_unselected.xml和et_underline_selected.xml，前者是EditText被選中時(shí)的背景，后者則是未被選中時(shí)的背景：
et_underline_unselected.xml
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:bottom="0dp" android:left="-2dp" android:right="-2dp" android:top="-2dp"> <shape> <solid android:color="@android:color/transparent" /> <stroke android:width="1dp" android:color="@android:color/darker_gray" /> <padding android:bottom="4dp" /> </shape> </item></layer-list>
et_underline_selected.xml
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:bottom="0dp" android:left="-2dp" android:right="-2dp" android:top="-2dp"> <shape> <solid android:color="@android:color/transparent" /> <stroke android:color="@android:color/holo_green_light" android:width="2dp" /> <padding android:bottom="4dp" /> </shape> </item></layer-list>
我將layer-list理解成一個(gè)圖層列表，shape就是列表中的一個(gè)item，由于我們只需要下邊框有橫線(xiàn)，所以除了shape在列表中的下邊距外都設(shè)為負(fù)值。光標(biāo)和下劃線(xiàn)之間要有點(diǎn)距離，所以shape的下方內(nèi)邊距設(shè)為4dp。當(dāng)然，被選中時(shí)的下劃線(xiàn)寬度要大一點(diǎn)。
在項(xiàng)目中新建一個(gè)SecondActivity，繼承于Activity，然后在布局文件中放置兩個(gè)EditText，background都設(shè)為“@null”，光標(biāo)就用我們之前的淺藍(lán)色。
<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.lindroid.edittext.SecondActivity"> <EditText android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:background="@null" android:hint="自定義EditText下劃線(xiàn)1" android:textCursorDrawable="@drawable/cursor_color" /> <EditText android:id="@+id/editText2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:background="@null" android:hint="自定義EditText下劃線(xiàn)2" android:textCursorDrawable="@drawable/cursor_color" /></LinearLayout>
然后在代碼中設(shè)置EditText的監(jiān)聽(tīng)事件
/**初始化EditText,默認(rèn)都為未選中狀態(tài)**/ editText1.setBackgroundResource(R.drawable.et_underline_unselected); editText2.setBackgroundResource(R.drawable.et_underline_unselected); /**第一個(gè)EditText的焦點(diǎn)監(jiān)聽(tīng)事件**/ editText1.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if (hasFocus) { Log.e(TAG, "EditText1獲得焦點(diǎn)"); editText1.setBackgroundResource(R.drawable.et_underline_selected); } else { Log.e(TAG, "EditText1失去焦點(diǎn)"); editText1.setBackgroundResource(R.drawable.et_underline_unselected); } } }); /**第二個(gè)EditText的焦點(diǎn)監(jiān)聽(tīng)事件**/ editText2.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if (hasFocus) { Log.e(TAG, "EditText2獲得焦點(diǎn)"); editText2.setBackgroundResource(R.drawable.et_underline_selected); } else { Log.e(TAG, "EditText2失去焦點(diǎn)"); editText2.setBackgroundResource(R.drawable.et_underline_unselected); } } });注意：要先將所有的EditText都設(shè)置為運(yùn)行一下，效果如下：
效果我們是實(shí)現(xiàn)了，但是這樣一來(lái)Activity中的代碼顯得太冗長(zhǎng)，因此我們可以將選中和未選中的狀態(tài)封裝到狀態(tài)選擇器中。在drawable文件夾下新建一個(gè)et_underline_selector.xml文件：
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="false" android:drawable="@drawable/et_underline_unselected"/> <item android:state_focused="true" android:drawable="@drawable/et_underline_selected"/></selector>
android:state_focused表示控件是否獲得焦點(diǎn)。然后在布局文件中設(shè)置
android:background="@drawable/et_underline_selector" ，Activity的焦點(diǎn)監(jiān)聽(tīng)代碼刪去就可以了。運(yùn)行，就可以看到一模一樣的效果了。
7、后記
文章至此就結(jié)束了，但是我要學(xué)的東西還有很多，文章里的某些知識(shí)出于我個(gè)人理解，可能會(huì)有不足或者錯(cuò)誤，歡迎大家指正！
由于這里的代碼比較簡(jiǎn)單，工程就不上傳了，大家動(dòng)手敲一敲，相信沒(méi)有問(wèn)題的。
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
參考文獻(xiàn)
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
