EditText 背景设置

EditText 背景设置

1. 调整背景颜色

EditText默认的效果：

其中，下划线的颜色有两种状态：

1. normal color 没有焦点时的颜色，可以通过colorControlNormal来设置。
2. activated color 获取到焦点时的颜色，可以通过colorControlActivated来设置。

eg.

styles.xml

    
    <style name="EditTextStyle" parent="Base.Widget.AppCompat.EditText">

        <item name="colorControlNormal">@color/edit_text_normal_color
        "colorControlActivated">@color/edit_text_activated_color
    style>

colors.xml

    
    <color name="edit_text_normal_color">#00FF00color>
    <color name="edit_text_activated_color">#FF00FFcolor>

在布局文件中，设置EditText的theme：

    <EditText
        android:id="@+id/et_user_name"
        android:layout_width="300dp"
        android:layout_height="80dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:hint="请输入用户名"
        android:textSize="20sp"
        android:theme="@style/EditTextStyle" />

这样设置之后，效果图为：

2. 设置背景下划线的位置

默认情况下，EditText的style设置为Base.Widget.AppCompat.EditText，查看其源代码，我们可以一步一步地看到其具体的设值：(具体代码位置为sdk_path/platforms/android-xx/data/res)

    
    <style name="Base.Widget.AppCompat.EditText" parent="Base.V7.Widget.AppCompat.EditText"/>

    -- styles.xml -->
    <style name="Base.V7.Widget.AppCompat.EditText" parent="android:Widget.EditText">
        <item name="android:background">?attr/editTextBackgrounditem>
        <item name="android:textColor">?attr/editTextColoritem>
        <item name="android:textAppearance">?android:attr/textAppearanceMediumInverseitem>
    style>

    
    <item name="editTextBackground">@drawable/edit_text_materialitem>

其中，edit_text_material的内容为：

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="@dimen/edit_text_inset_horizontal_material"
       android:insetRight="@dimen/edit_text_inset_horizontal_material"
       android:insetTop="@dimen/edit_text_inset_top_material"
       android:insetBottom="@dimen/edit_text_inset_bottom_material">
    <selector>
        <item android:state_enabled="false">
            <nine-patch android:src="@drawable/textfield_default_mtrl_alpha"
                android:tint="?attr/colorControlNormal" />
        item>
        <item android:state_pressed="false" android:state_focused="false">
            <nine-patch android:src="@drawable/textfield_default_mtrl_alpha"
                android:tint="?attr/colorControlNormal" />
        item>
        <item>
            <nine-patch android:src="@drawable/textfield_activated_mtrl_alpha"
                android:tint="?attr/colorControlActivated" />
        item>
    selector>
inset>

可以看到，EditText默认的background是一个InsetDrawable。

关于InsetDrawable的相关知识：

InsetDrawable对应于标签，它可以将其他Drawable内嵌到自己当中去，并可以在四周留出一定的间距。当一个View希望自己的背景比自己的实际区域小的时候，可以使用InsetDrawable来实现。其中，InsetDrawable的语法为：

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:drawable="@drawable/drawable_resource"
       android:insetLeft="dimension"
       android:insetRight="dimension"
       android:insetTop="dimension"
       android:insetBottom="dimension">
inset>

android:insetLeft等四个属性分别表示，左右上下内凹的大小。

android:drawable表示资源图片的位置。该资源距离外边距的大小即insetLeft等的值。

另外，inset内部还可以包含shape，color, nine-patch等元素。这些边距表示距离inset内部的元素的距离。在EditText的backgound中，安卓系统就使用了selector+nine-patch。

EditText的背景默认边距

我们可以查看源代码：

    
    <dimen name="edit_text_inset_horizontal_material">4dpdimen>
    <dimen name="edit_text_inset_top_material">10dpdimen>
    <dimen name="edit_text_inset_bottom_material">7dpdimen>

所以，我们看到的默认EditText背景框，其距离左右距离各4dp，距离上部10dp，距离底部7dp。

修改背景边距

在做项目的时候，我们有一个需求，就是EdtiText的背景下划线，是紧贴这EditText的底部的，并且左右也是紧贴着的。所以，我们可以将相关的源代码拿过来，然后修改边距的数值即可：

具体步骤为:

1. 复制相关源代码到资源目录：edit_text_material.xml, textfield_activated_mtrl_alpha.9.png , textfield_default_mtrl_alpha.9.png
2. 在dimens.xml文件中添加尺寸，并根据需求设值。
3. 在布局文件中设值EditText的background。

在demo中，我将第一个EditText的背景边距设置为0，而第二个EditText为默认边距，大家可以对比看一下效果：

Demo 地址