Android 應用開發中如何自定義 Drawable 背景？

2020-02-06

關鍵字：EditText自定義背景、shape、corners

---

 

通過 xml 定義 View 的背景 Drawable 資源還是挺常用的。

 

本篇博文記錄幾種常用的自定義 Drawable 方式。

 

1、圓角矩形

A、普通圓角矩形

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

    <corners android:radius="5dp" />

    <solid
        android:color="@android:color/holo_green_light" />

</shape>

出來的效果如下圖所示：

 

圓角率可以自行微調確定合適的值，也可以通過計算而來。如果想要呈現出一個橢圓形背景，則圓角率的值應等於 View 高度的一半。例如，筆者上圖所示 View 的高度為 70dp，要讓它的背景呈現橢圓形，則需將圓角率設置為 35dp：

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

    <corners android:radius="35dp" />

    <solid
        android:color="@android:color/holo_green_light" />

</shape>

效果如果下圖所示：

 

 

B、帶邊框的圓角矩形

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

    <corners android:radius="10dp" />

    <solid
        android:color="@android:color/holo_green_light" />

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

</shape>

效果如下圖所示：

 

2、漸變色背景

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

    <corners android:radius="35dp" />

    <gradient
        android:angle="0"
        android:startColor="#74C941"
        android:endColor="#ffffff"/>

</shape>

出來的效果如下圖所示：

 

漸變方向受 android:angle 標簽控制。0度時為從左至右漸變，90度時為從下至上漸變。角度控制漸變方向的關系是逆時針方向旋轉。

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

    <corners android:radius="35dp" />

    <gradient
        android:angle="90"
        android:startColor="#74C941"
        android:endColor="#ffffff"/>

</shape>

 

 

 

3、狀態切換背景

這種背景通常用於按鈕。我們常常能遇到某個按鈕在未按下時是一種背景色，在按下以后切換到另外一種背景色的需求。這種背景的設置代碼如下所示：

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

    <item
        android:state_selected="true"
        android:drawable="@android:color/holo_red_light" />

    <item
        android:state_selected="false"
        android:drawable="@android:color/holo_green_light" />

</selector>

效果圖如下所示：

  

 

 

 

4、組合圓環背景

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

    <item
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <corners android:radius="35dp" />
            <solid android:color="@android:color/holo_red_light" />
        </shape>
    </item>

    <item
        android:left="3dp"
        android:top="3dp"
        android:right="3dp"
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <corners android:radius="35dp" />
            <solid android:color="@android:color/holo_green_light" />
        </shape>
    </item>

    <item
        android:left="6dp"
        android:top="6dp"
        android:right="6dp"
        android:bottom="6dp">
        <shape android:shape="rectangle">
            <corners android:radius="35dp" />
            <solid android:color="@android:color/holo_blue_light" />
        </shape>
    </item>

</layer-list>

出來的效果圖如下所示：

 

這種背景圖片比較常見的場景有：用戶頭像背景框。如下圖所示：

 

上圖的用戶頭像就是由上面的圓環背景再加上一個普通圖標組合而成的。

 

 

5、EditText的背景

EditText 自定義背景的方式與前面普通 View 的一樣。都是通過自定義 xml 形式的 Drawable 再將它以 setBackground() 的形式設置進 EditText 即可。同時若要改變 EditText 光標的背景，也是一樣，具體參閱下面代碼即可：

    <EditText
        android:id="@+id/etOrderNo" android:textCursorDrawable="@drawable/edittext_cursor_color" android:background="@drawable/activity_main_cdjh_searchbar_et"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"/>

上述加粗標綠的兩行即是自定義控件及光標背景的代碼。若不想要 EditText 的背景，則直接將顏色設置成透明或者為 null 即可。

 

以筆者上面的代碼為例，EditText 背景 Drawable 為：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <stroke android:color="@null" android:width="0dp"/>
            <corners
                android:radius="8dp" />
        </shape>
    </item>

</selector>

光標背景的 Drawable 為：

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

    <size android:width="2dp" />
    <solid android:color="@color/edittext_cursor" />

</shape>

 

---