2014年4月14日月曜日

[安藤]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

0 件のコメント:

コメントを投稿