为 EditText 创建自定义背景可绘制对象
Create a custom background drawable for a EditText
我正在尝试将自定义可绘制对象设置为 EditText,如下所示:
所以我写了这个自定义可绘制对象:
<?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 没有处理)
但在设备上,它完全不起作用...
第二项被拉伸,不符合宽度属性。
我知道,我可以用 9-patch 来做,但我想知道是否可以用 drawables 做?
设法在 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>
在你的布局中,像这样使用它:
<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
灰色框内的填充+编辑区的填充。
这是 Genymotion(又名真实设备)的结果:
希望你喜欢!
我正在尝试将自定义可绘制对象设置为 EditText,如下所示:
所以我写了这个自定义可绘制对象:
<?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 没有处理)
但在设备上,它完全不起作用... 第二项被拉伸,不符合宽度属性。
我知道,我可以用 9-patch 来做,但我想知道是否可以用 drawables 做?
设法在 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>
在你的布局中,像这样使用它:
<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
灰色框内的填充+编辑区的填充。
这是 Genymotion(又名真实设备)的结果:
希望你喜欢!