[安藤]Android xml繪圖筆記

在設計Android應用程式的時候，不可避免的會在各個元件套上背景圖或是直接用ImageView秀圖。使用在繪圖程式裡面做好的圖檔的話，在跟實作目標的dpi不同的機種上面顯示的時候，可能會因為縮圖出現鋸齒顯得難看。為了避免這個問題，android提供了以xml為描述方法的向量繪圖renderer。這邊列出目前我使用過的一些功能。

1. <shape>標籤。只要不是太複雜的圖，都可以用它達成目的。大部分拿來畫四周圓弧的按鈕圖居多。

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

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <-- 可以指定shape為 [rectangle|oval|line|ring]，指定line的話需用下面提到的storke參數指定線寬 -->

    <corners android:topLeftRadius="8dp" android:bottomLeftRadius="8dp"

        android:topRightRadius="8dp" android:bottomRightRadius="8dp" />  <!-- 指定該圖的四個角落要留多大半徑的圓角。 要注意的是目前ADT的預覽功能不能顯示部分角落不指定圓弧的設計，不過在app上面是可以顯示的。習慣做Tab式layout的話蠻好用的。 -->  

<!--    <corners android:Radius="8dp"/> -->   <!-- 也可以直接一次指定4個角落。 -->

<!--    <stroke android:width="1dp"  android:color="#FFde8a33" /> --> <-- 指定在圖形的周邊加上指定寬度的顏色 -->
<!--    <solid android:color="#FFde8a33" /> --> <-- 指定塗滿圖形的顏色(除了上面的圓弧跟stroke以內的區塊的顏色) -->

    <gradient

   android:type="linear"

        android:startColor="#7C532d"

android:centerColor="#73512b"

        android:endColor="#55381B"

android:centerX="0.5"

android:centerY="0.5"

        android:angle="270"  

        />  

漸層色。塗佈方式如stroke。type有三個參數可選：linear為線性變色，radial為圓型擴散(起點為圓心)，sweep為。依照angle參數指定變色的方向。此例中的angle 270度表示由上端往下端變化，0度就是由左往右畫，以45度為單位。centerX/centerY的參數代表centerColor所在的位置。數值是相對比例。X的話左端為0，右端為1，中間就是0.5。Y的話上端為0，下端為1。

<!--    <solid android:color="#de8a33" /> -->

<padding  

        android:left="8dp"

        android:top="8dp"

        android:right="8dp"

        android:bottom="8dp"

    />  <-- 指定這個圖的上下左右的預留空間。若是此drawable要用在按鈕的話，可以讓掛著這個圖的View上下左右保留空間，對於增加該按鈕的點擊範圍尤其好用。 -->

</shape>

2.Transition Drawable
可以讓掛上這個drawable的view，使用程式碼控制，產生轉圖的效果。

<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/on" />
    <item android:drawable="@drawable/off" />
</transition>

item可以掛很多組。然後使用以下程式碼啟動轉圖效果。

ImageButton button = (ImageButton) findViewById(R.id.button);
if (button.getDrawable() instanceof TransitionDrawable)
{    TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
    drawable.startTransition(500);
}

500為轉圖效果的持續時間。單位是毫秒(ms)。
需要注意的是，安全起見，取出drawable的時候記得要做物件型態測試。


3.Layer List
可以用許多圖來疊出一張圖。也是相當好用的。尤其在ui designer擔心直出png會因為手機的螢幕比例不同，而出現扭曲變形的時候。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

item就是一個個其他的圖。越底下的圖的層數越高，若是item的位置有重疊，下面的圖會蓋住上面的圖。

詳細參數解說請參考google文件 http://developer.android.com/guide/topics/resources/drawable-resource.html