最近一個專案效果，輸入框只保留底部下劃線，並可以根據是否獲取到焦點變色。首先想到了自定義View。但是感覺為這麼個小功能，有點大材小用。查了一下資料，發現使用自定義背景樣式就可以簡單的實現。特此記錄。

首先，需要繪製繪製一個Edittext的背景邊框。填充色設定為透明

<shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent" />

   <!--

  <stroke
                android:width="1dp"
                android:color="@android:color/holo_blue_bright" />
  </shape>

 但是這是一個有四個邊框的方形圖片。需要把左、上、右的邊框去掉。方法很簡單，就是設定邊框的邊距。將邊距設定為 負數，就看不到了。

完整程式碼如下：

第一步、設定 沒有焦點時的邊框

unfocus_bg.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
      <!-- 給邊框 設定編邊距   將邊框的左、上、右 設定為負數，會將邊框移除螢幕 ，只能看到底部的下劃線 -->
     <item
        android:left="-10px"
        android:right="-10px"
        android:top="-10px">

    <!-- 繪製一個方形邊框，填充色設定為透明 -->
        <shape android:shape="rectangle"> 
            <solid android:color="@android:color/transparent" />

<!--設定邊框的寬度和顏色 -->

            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_light" />
      <!-- 如果感覺字型距離底部或者左邊太近，可以設定 padding屬性 拉開距離 -->
            <padding
                android:bottom="5px"
                android:left="10px"/>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>
 

第二步、設定 獲取焦點時的邊框和顏色

focus_bg.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:left="-10px"
        android:right="-10px"
        android:top="-10px">

        <shape android:shape="rectangle"> 
            <solid android:color="@android:color/transparent" />

            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_light" />
      
            <padding
                android:bottom="5px"
                android:left="10px"/>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

第三步、設定背景選擇器，根據有無焦點，顯示不同的背景

edit_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="true"  android:drawable="@drawable/focus_bg"></item>
    <item android:drawable="@drawable/unfocus_bg"></item>
</selector>

最後 使用：

  <EditText
        android:id="@+id/et"
        android:background="@drawable/edit_selector"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:hint="底部下劃線" />

提示：如果想剛進入頁面的時候，Editext 不自動獲取焦點，可以在 Editext的父佈局新增屬性：

    android:focusable="true"
    android:focusableInTouchMode="true"

具體效果如下：

無焦點時：

獲取到焦點時：