2018年9月11日 星期二

Android vector drawable resize

Android 內建有提供很多的 vector drawable 可以用,不過這些內建的 drawable 雖然可以設定成一樣的大小,但是因為 drawable 本身在畫布上繪製的大小不同,所以顯示出來的效果會讓你覺得不一樣大

因為 vector drawable 以 xml 的形式並且以 path 屬性描述圖案,所以要改變它的大小不是那麼容易,這時可以用 group 屬性來將圖案作縮小或放大

group 屬性原本是用來讓 xml 內的多個 path 包在一起讓想修改的效果同時作用在多個 path 上,但當然只有一個 path 的話也是可以用的,而 group 屬性提供的其中一種效果就是可以設定圖案的放大或縮小



可以看到 Android 官網上的說明,主要就是 pivotX、pivotY、scaleX、scaleY 這四個屬性可以作到放大縮小的效果

scale 屬性就是指定圖案要縮放的倍數,例如設為 2 就是放大為兩倍,設為 0.5 就是縮小一倍,pivot 屬性就是設定縮放的基準點位置在哪,這個會跟 drawable 的 viewportHeight 跟 viewportWidth 相關連,例如 viewportWidth 設定為 24,那 pivotX 通常會設為 12,也就是從中心點開始對圖案作縮放,例如下面的例子,就是將圖案縮小一倍
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:alpha="0.6"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <group
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:pivotX="12"
        android:pivotY="12">
        <path
            android:fillColor="#FF000000"
            android:pathData="M3,4L3,1h2v3h3v2L5,6v3L3,9L3,6L0,6L0,4h3zM6,10L6,7h3L9,
4h7l1.83,2L21,6c1.1,0 2,0.9 2,2v12c0,1.1 -0.9,2 -2,2L5,22c-1.1,0 -2,-0.9 -2,-2L3,10h3zM13,
19c2.76,0 5,-2.24 5,-5s-2.24,-5 -5,-5 -5,2.24 -5,5 2.24,5 5,5zM9.8,14c0,1.77 1.43,3.2 3.2,
3.2s3.2,-1.43 3.2,-3.2 -1.43,-3.2 -3.2,-3.2 -3.2,1.43 -3.2,3.2z"/>
    </group>

</vector>

沒有留言:

張貼留言