2015-09-15 14 views
10

我試圖設置自定義繪製的EditText上創建一個自定義背景繪製預期如下:的EditText上

except

所以我寫了這個自定義繪製:

<?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處理)

result in preview

但在設備中,它完全不工作... 第二項被拉伸,並不尊重寬度屬性。

result in device

我知道,我可以用一個9補丁做到這一點,但我想知道是否有可繪製這可能嗎?

回答

22

管理它在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(又名,真實設備)結果:

Result from real device

希望你喜歡它!

+0

謝謝@ pdegand59它就像一個魅力;) – sagix