修改 EditText 下劃線及被激活後的顏色

繼承自 AppCompatActivity

在開發中，咱們常常用到 EditText，通常 EditText 默認樣式不能知足咱們的需求。下面說下經常使用的兩種修改方法。

• android:theme 方式修改
• 自定義樣式

android:theme 方式修改

<style name="EditTextStyle"> <!--表示控件默認的顏色--> <item name="android:colorControlNormal">#ccc</item> <!--表示控件被激活時的顏色--> <item name="android:colorControlActivated">#ccc</item> </style>
複製代碼

在 EditText 上加上 android:theme="@style/EditTextStyle" 屬性。請記住是 android:theme 而不是 style。

自定義樣式

EditText 有一個屬性：android:textCursorDrawable ，它就是用來設置光標樣式的。若是將 textCursorDrawable 設置爲 @null ，表示去除系統默認的樣式，但咱們都記得隱藏光標的屬性是 android:cursorVisible , 那麼這時光標會是什麼樣子的呢？這是咱們給文字（android:textColor）和提示文字（android:textColorHint屬性）設置不一樣的顏色，運行以後就會發現此時光標的顏色是跟文字的保持一致的。

設置光標的樣式

在drawable資源文件夾下新建一個 cursor_color.xml 文件

<?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>
複製代碼

在 EditText 中使用

<EditText android:textCursorDrawable="@drawable/cursor_color" android:hint="自定義光標顏色" android:layout_width="match_parent" android:layout_height="wrap_content" />
複製代碼

EditText 取消背景

咱們發現將 EditText android:textCursorDrawable 設置爲"@null"以後，光標的樣式會變得跟文字的顏色同樣，若是咱們將整個EditText的背景設置爲"@null"以後，再給EditText添加 android:background="@null"，若是EditText沒有獲取焦點看上去跟TextView效果同樣。

全局修改EditText顏色

咱們能夠直接修改 Style.xml 中樣式，來實現全局修改EditText顏色。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <!--標題欄的顏色--> <item name="colorPrimary">@color/colorPrimary</item> <!--狀態欄的顏色--> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!--EditText默認顏色--> <item name="colorAccent">@color/colorAccent</item> </style>
複製代碼

若是繼承自Activity時自定義下劃線

若是繼承 Activity，上面的方式，雖然光標的顏色雖然還能修改，可是下劃線的顏色卻改不了。

EditText是一個輸入框，咱們能夠這樣理解：下劃線無非就是給輸入框的下邊框加一條線。這個用Android中的layer-list（圖層）就能夠作到。新建兩個xml文件：et_underline_unselected.xml 和 et_underline_selected.xml，前者是EditText被選中時的背景，後者則是未被選中時的背景：

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理解成一個圖層列表，shape就是列表中的一個item，因爲咱們只須要下邊框有橫線，因此除了shape在列表中的下邊距外都設爲負值。光標和下劃線之間要有點距離，因此shape的下方內邊距設爲4dp。固然，被選中時的下劃線寬度要大一點。

<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下劃線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下劃線2" android:textCursorDrawable="@drawable/cursor_color" />
</LinearLayout>
複製代碼

/**初始化EditText,默認都爲未選中狀態**/
editText1.setBackgroundResource(R.drawable.et_underline_unselected);
editText2.setBackgroundResource(R.drawable.et_underline_unselected);
/**第一個EditText的焦點監聽事件**/
editText1.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            Log.e(TAG, "EditText1得到焦點");
            editText1.setBackgroundResource(R.drawable.et_underline_selected);

        } else {
            Log.e(TAG, "EditText1失去焦點");
            editText1.setBackgroundResource(R.drawable.et_underline_unselected);
        }
    }
});
/**第二個EditText的焦點監聽事件**/
editText2.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            Log.e(TAG, "EditText2得到焦點");
            editText2.setBackgroundResource(R.drawable.et_underline_selected);

        } else {
            Log.e(TAG, "EditText2失去焦點");
            editText2.setBackgroundResource(R.drawable.et_underline_unselected);
        }
    }
});
複製代碼

咱們能夠將選中和未選中的狀態封裝到狀態選擇器中。在drawable文件夾下新建一個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 表示控件是否得到焦點。而後在佈局文件中設置 android:background="@drawable/et_underline_selector" ，Activity的焦點監聽代碼刪去就能夠了。

About Me

• 簡書

• 掘金

• Github