Android開發：用Drawable XML繪製帶陰影效果的圓形按鈕

衆所周知，在Android開發裏，爲了優化在各類分辨率設備上的顯示效果，同一份圖片素材每每要提供mdpi、hdpi、xhdpi三種（之前還有ldpi），尤爲是按鈕類的素材，考慮到normal、pressed、focused更是須要至少3×3=9張圖片。NinePatch技術雖然能夠解決一部分尺寸靈活性的問題，但大部分修改和適配仍是要再次製做一批圖片的。

根據交互設計的須要，能夠考慮用Drawable的XML繪製按鈕，好處有：

• 矢量繪製，易於縮放；

• 字節數更少（通常而言）；

• 基於XML文本，屬性值易於調整；

• Drawable組件間可嵌套，可重用；

• XML與項目其餘源代碼在一塊兒，便於版本控制。

固然也有缺點：

• 沒有可視化的編輯器，編輯不夠直觀；

• 受限於基本的圖形和填充方式；

• 美工人員很難上手。

以本站開發的習做《泡麪管家》（參見這裏）爲例。

下圖是泡麪管家的計時器，中間的圓形（包含鏤空陰影效果）默認是表示計時器狀態的icon，在計時器運行期間會變換爲中止計時的按鈕：

這裏icon的背景是用Drawable XML繪製的。在Android中，Drawable XML並不支持陰影，參考了網上諸多例子，通常都是以額外繪製的漸變或者邊框來實現陰影。這裏是用疊加shape的方式來繪製的。

上圖中綠色方框中的標識的色塊，從外到內能夠劃分紅幾個部分：

1. Outer circle

2. Inner shadow of outer circle

3. Gap

4. Outer shadow of center circle

5. Center circle

使用<layer-list/>，從最底層開始，畫對應最外部分的、最大的圓形，而後逐層的、邊擴大padding邊疊加圓形，圓形的填充顏色要對應到相應的色塊。res/drawable/timer_center_bg.xml代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- outer circle -->
    <item>
        <shape android:shape="oval" >
            <solid android:color="#FFACB8C3" />
        </shape>
    </item>
 
    <!-- inner shadow of outer circle -->
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="oval">
            <solid android:color="#FFbdcad6" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="oval">
            <solid android:color="#FFc3cfd9" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="oval">
            <solid android:color="#FFcbd6df" />
        </shape>
    </item>
    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="oval">
            <solid android:color="#FFd4dee5" />
        </shape>
    </item>
 
    <!-- gap -->
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape android:shape="oval" >
            <solid android:color="#FFdae2e8" />
        </shape>
    </item>
 
    <!-- outer shadow of center circle -->
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="oval">
            <solid android:color="#FFced5dc" />
        </shape>
    </item>
    <item
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp">
        <shape android:shape="oval">
            <solid android:color="#FFbcc4c9" />
        </shape>
    </item>
    <item
        android:bottom="13dp"
        android:left="13dp"
        android:right="13dp"
        android:top="13dp">
        <shape android:shape="oval">
            <solid android:color="#FFb4bbc0" />
        </shape>
    </item>
    <item
        android:bottom="14dp"
        android:left="14dp"
        android:right="14dp"
        android:top="14dp">
        <shape android:shape="oval">
            <solid android:color="#FFacb3b8" />
        </shape>
    </item>
 
    <!-- center circle -->
    <item
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp"
        android:top="15dp">
        <shape android:shape="oval">
            <stroke android:width="1dp" android:color="#FFFCFCFC"/>
            <gradient
                android:angle="270"
                android:endColor="#FFCFD7DD"
                android:startColor="#FFF0F5F9" />
        </shape>
    </item>
 
</layer-list>

從以上代碼中能夠看出，只是簡單的圓形的疊加，就能夠繪製出具備立體感的按鈕。

要注意上邊只是按鈕的背景。文章開頭也講過，Drawable XML的特徵之一就是可複用。繼續看res/drawable/stop_timer_btn.xml的代碼：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <!-- normal -->
    <item android:state_enabled="true" android:state_focused="false" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/timer_center_bg" />
            <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">
                <shape android:shape="oval">
                    <stroke android:width="1dp" android:color="#FFFCFCFC" />
                    <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />
                </shape>
            </item>
        </layer-list>
    </item>
 
    <!-- pressed -->
    <item android:state_enabled="true" android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/timer_center_bg" />
            <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">
                <shape android:shape="oval">
                    <stroke android:width="2dp" android:color="#FFf8f640" />
                    <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />
                </shape>
            </item>
        </layer-list>
    </item>
 
    <!-- selected -->
    <item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/timer_center_bg" />
            <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">
                <shape android:shape="oval">
                    <stroke android:width="2dp" android:color="#FFf8f640" />
                    <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />
                </shape>
            </item>
        </layer-list>
    </item>
 
    <!-- ...... -->
</selector>

上述代碼以看出，<selector/>中每一個<item/>都是一個<layer-list/>，將@drawable/timer_center_bg做爲背景在前景疊加圓形以區分不一樣狀態。