为EditText创建可自定义的背景绘制 [英] Create a custom background drawable for a EditText

问题描述

我正尝试按如下所示将自定义可绘制对象设置为EditText:

I'm trying to set a custom drawable to a EditText as expected below:

所以我写了这个自定义可绘制对象:

So I wrote this custom drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"

        android:paddingBottom="12dp"
        android:paddingLeft="36dp"
        android:paddingRight="12dp"
        android:paddingTop="12dp">
<item>
    <shape>
        <corners android:radius="6dp"/>
        <solid android:color="@android:color/white"/>
        <stroke
            android:width="1dp"
            android:color="#BBBBBB"/>
    </shape>
</item>
<item
    android:width="32dp"
    android:gravity="left">
    <shape android:shape="rectangle">
        <size android:width="32dp"/>
        <corners
            android:bottomLeftRadius="6dp"
            android:topLeftRadius="6dp"/>
        <solid android:color="#AAAAAA"/>
    </shape>
</item>
<item android:left="8dp">
    <bitmap
        android:gravity="left"
        android:src="@drawable/ic_email"
        android:tileMode="disabled"/>
</item>
</layer-list>

预览中的结果非常好(除了不同的角落大小，Android Studio无法处理

The result in preview is quite good (except different corner size, not handled by Android Studio)

但是在设备中，它完全不起作用... 第二项是拉伸的，不尊重width属性.

But in device, it totally not works... The second item is stretched and does not respect the width attribute.

我知道，我可以用9个补丁来做到这一点，但是我想知道可绘制对象是否可能?

I know, I can do it with a 9-patch, but I want to know if is it possible with drawables?

推荐答案

设法通过在EditText上使用单个背景可绘制对象和复合可绘制对象来完成此操作.

Managed to do it with a single background drawable and a compound drawable on the EditText.

bg_edittext_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <corners android:radius="6dp" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#AAAAAA" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item
        android:left="34dp">
        <!-- left is icon size + 2x side padding around icon-->
        <!-- 18 + 8 + 8 -->
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="6dp"
                android:topRightRadius="6dp"
                android:topLeftRadius="0dp"
                android:bottomRightRadius="6dp"
                android:bottomLeftRadius="0dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#BBBBBB" />
        </shape>
    </item>
</layer-list>

在布局中，像这样使用它:

In your layout, use it like that:

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_edittext_icon"
    android:inputType="textEmailAddress"
    android:drawableLeft="@drawable/ic_email_white_18dp"
    android:drawablePadding="20dp"
    android:paddingLeft="8dp"
    android:paddingRight="12dp"
    android:paddingTop="12dp"
    android:paddingBottom="12dp"
    android:hint="Email"
    />

使用paddingLeft图标将其填充在灰色框中，并使用drawablePadding图标将其填充在灰色框中+编辑区域的填充.

With paddingLeft the icon padding inside the grey box and drawablePadding the padding inside the grey box + padding of the edit zone.

以下是Genymotion(又称真实设备)的结果:

Here is the result from Genymotion (aka, real device):

希望你喜欢它！

这篇关于为EditText创建可自定义的背景绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！