Android APK開發 Drawable文件夾下的自定義Drawable文件

版本：2018/2/11

---

 

• Drawable的分類
• 自定義Drawable
• SVG矢量圖

我的總結的知識點外，部分知識點選自《Android開發藝術探索》-第六章 Drawable

一、Drawable是什麼？

1. 一種能夠在Canvas上進行繪製的抽象的概念
2. 顏色、圖片等均可以是一個Drawable
3. Drawable能夠經過XML定義，或者經過代碼建立
4. Android中Drawable是一個抽象類，每一個具體的Drawable都是其子類

二、Drawable的優勢

1. 使用簡單，比自定義View成本低
2. 非圖片類的Drawable所佔空間小，能減少apk大小

三、Drawable的內部寬/高

1. 通常getIntrinsicWidth/Height能得到內部寬/高
2. 圖片Drawable其內部寬高就是圖片的寬高
3. 顏色Drawable沒有內部寬高的概念
4. 內部寬高不等同於它的大小，通常Drawable沒有大小概念(做爲View背景時，會被拉伸至View的大小)

Drawable的分類

四、BitmapDrawable的做用和使用

表示一種圖片，能夠直接引用原始圖片或者經過XML進行描述

<?xml version="1.0" encoding="utf-8"?>
<bitmap  xmlns:android="http://schemas.android.com/apk/res/android" android:src="@color/colorPrimary" android:antialias="true" android:dither="true" android:filter="true" android:gravity="center" android:mipMap="false" android:tileMode="disabled" />

五、Bitmap的屬性

屬性	做用	備註
android:src	圖片資源ID
android:antialias	圖片抗鋸齒-圖片平滑，清晰度下降	應該開啓
android:dither	開啓抖動效果-用於高質量圖片在低質量屏幕上保存較好的顯示效果(不會失真)	應該開啓
android:filter	開啓過濾-在圖片尺寸拉伸和壓縮時保持較好的顯示效果	應該開啓
android:gravity	圖片小於容器尺寸時，對圖片進行定位-選項之間用‘	’來組合使用
android:mipMap	紋理映射-圖像處理技術	默認false
android:tileMode	平鋪模式-repeat單純重複、mirror鏡面反射、clamp圖片四周像素擴散	默認disable關閉

六、gravity屬性詳情

可選項	含義
top/bottom/left/right	將圖片放在容器上/下/左/右，不改變圖片大小
center_vertical/horizontal	垂直居中/水平居中，不改變圖片大小
center	水平和垂直方向同時居中，不改變圖片大小
fill_vertical/horizontal	垂直/水平方向填充容器
fill	水平和垂直方向同時填充容器
clip_vertical/horizontal	垂直/水平方向的裁剪-較少使用

七、NinePatchDrawable(.9圖片)的做用

1. 自動根據寬高進行縮放且不會失真
2. 實際使用，能夠直接引用圖片或者經過XML描述

<?xml version="1.0" encoding="utf-8"?>
<nine-patch  xmlns:android="http://schemas.android.com/apk/res/android" android:src="@color/colorPrimary" android:antialias="true" android:dither="true" android:filter="true" android:gravity="center" android:mipMap="false" android:tileMode="disabled" />

八、ShapeDrawable的做用

1. 經過顏色構造的圖形
2. 能夠是純色的圖形
3. 也能夠是有漸變效果的圖形
4. shape標籤建立的Drawable實體是GradientDrawable

九、ShapeDrawable的使用

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

    <corners  android:radius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"/>
    <gradient  android:angle="45" android:centerX="30" android:centerY="30" android:centerColor="@color/colorAccent" android:endColor="@color/colorPrimary" android:startColor="@color/colorPrimaryDark" android:gradientRadius="20" android:type="linear" android:useLevel="true" />
    <padding  android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <size  android:width="200dp" android:height="200dp" />
    <solid  android:color="@color/colorPrimary"/>
    <stroke  android:width="10dp" android:color="@color/colorAccent" android:dashWidth="5dp" android:dashGap="3dp"/>

</shape>

十、ShapeDrawable的屬性介紹

屬性/標籤	做用	備註
android:shape	圖形的形狀：rectangle矩形、oval橢圓、line橫線、ring圓環	corners標籤對應於矩形；line和ring經過stroke指定線的寬度和顏色; ring圓環有五個特殊的shape屬性
corners標籤	四個角的角度
gradient標籤	漸變效果-android:angle表示漸變角度，必須爲45的倍數	android:type指明漸變類型：linear線性，radial徑向、sweep掃描
solid標籤	純色填充	與gradient標籤排斥
stroke標籤	描邊	有描邊線和虛線
size標籤	表示shape的固有大小，並不是最終顯示的大小	沒有時getIntrinsicWidth返回-1；能指明Drawable的固有寬高，但若是做爲View背景仍是會被拉伸

十一、LayerDrawable的做用

1. XML標籤爲layer-list
2. 層次化的Drawable合集
3. 能夠包含多個item，每一個item表示一個Drawable
4. item中能夠經過android:drawable直接引用資源
5. android:top等表示Drawable至關於View上下左右的偏移量

十二、LayerDrawable的使用(微信文本輸入框)

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

    <item>
        <shape android:shape="rectangle">
            <solid  android:color="#0ac39e"/>
        </shape>
    </item>

    <item  android:bottom="6dp">
        <shape android:shape="rectangle">
            <solid  android:color="#FFFFFF"/>
        </shape>
    </item>

    <item  android:bottom="1dp" android:left="1dp" android:right="1dp">
        <shape android:shape="rectangle">
            <solid  android:color="#FFFFFF"/>
        </shape>
    </item>

</layer-list>

1三、StateListDrawable的做用

1. 對應於selector標籤
2. 用於View根據狀態選擇不一樣的Drawable

1四、StateListDrawable的使用和要點

<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="false" //StateListDrawable的固有大小是否根據狀態而改變，默認false=根據狀態而改變 android:dither="true" //是否開啓抖動-讓高質量圖片在低質量屏幕上依舊效果好，默認true開啓 android:variablePadding="false" //padding是否根據狀態的改變而改變，不建議開啓(false) >
    <item android:state_pressed="true" //Button被按下後卻沒有鬆開的狀態 android:drawable="@color/colorAccent"/>
    <item android:state_focused="true" //View獲取了焦點 android:drawable="@color/colorPrimary"/>
    <item android:state_selected="true" //用戶選擇了View android:drawable="@color/colorPrimary"/>
    <item android:state_checked="true" //用戶選中了View，通常用於CheckBox這類在選中和沒有選中狀態之間切換的View android:drawable="@drawable/ic_launcher_background"/>
    <item android:state_enabled="true" //View處於可用狀態 android:drawable="@drawable/ic_launcher_foreground"/>
    <item android:drawable="#FFFFFF"/> //默認Drawable: 按順序向下匹配，須要放在最下方，由於能夠匹配任何狀態
</selector>

1五、LevelListDrawable的做用

1. 對應於level-list標籤
2. 擁有多個item，每一個item都有maxLevel和minLevel
3. Level的範圍爲0~10000
4. 給定level後，會按從上至下的順序匹配，直到找到範圍合適的Drawable，並返回
5. item的level必定要降序或者升序
6. 調用View的getBackground得到Drawable對象，並調用setLevel設置等級level
7. ImageView的setImageLevel()能快速指定src引用的Drawable的Level
8. LevelListDrawable是根據level改變，選擇不一樣的Drawable，能用於實現進度條、音量調節等等

1六、LevelListDrawable的使用

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:minLevel="0" android:maxLevel="10" android:drawable="@drawable/d1" />
    <item android:minLevel="11" android:maxLevel="20" android:drawable="@drawable/d2" />
    <item android:minLevel="21" android:maxLevel="30" android:drawable="@drawable/d3" />
    <item android:minLevel="31" android:maxLevel="40" android:drawable="@drawable/d4" />
</level-list>

1七、TransitionDrawable的做用

1. 對應於transition標籤
2. 實現兩個Drawable以前的淡入淡出效果
3. 得到背景的TransitionDrawable後，經過startTransition和reverseTransition方法實現效果和逆過程

1八、TransitionDrawable的使用

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:id="@+id/transition_drawable" android:drawable="@drawable/ic_launcher" android:top="10dp" //四周的偏移量 android:bottom="10dp" android:right="10dp" android:left="10dp"/>
    <item android:drawable="@drawable/ic_launcher_round" />
</transition>

1九、InsetDrawable的做用和使用

1. 對應inset標籤
2. 將其餘Drawable內嵌到自身，並在四周留出間距
3. View須要背景比本身實際區域要小的時候，可使用inset，layer-list也能夠實現該需求

<inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_launcher" android:insetTop="10dp" android:insetBottom="10dp" android:insetLeft="10dp" android:insetRight="10dp">
</inset>

20、ScaleDrawable的做用

1. 對應於scale標籤
2. 根據本身的等級level(0~10000)將指定的Drawable縮放到必定比例
3. android:scaleHeight="70%"用於指定寬高的縮放比例=爲原來的30%
4. ScaleDrawable的level爲0，不可見。爲10000時，不縮放。
5. 通常將level設置爲1，就會按照屬性指定的比例縮放。其餘值也會改變縮放效果。
6. android:scaleGravity屬性和gravity屬性徹底一致

2一、ScaleDrawable的使用

<scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_launcher" android:scaleGravity="center" android:scaleHeight="70%" android:scaleWidth="70%">
</scale>

2二、ClipDrawable的做用

1. 對應於clip標籤
2. 根據本身當前的等級level(0~10000)來裁剪另外一個Drawable
3. 裁剪方向由clipOrientation和gravity屬性共同控制
4. level爲0，Drawable不可見；10000表示不裁剪；爲8000，表示裁減了2000；爲1，表示裁剪了9999

2三、ClipDrawable的gravity

可選項	含義
top/bottom	將圖片放在容器上/下。若爲垂直裁剪，從另外一頭開始裁剪；若爲水平裁剪，則從水平方向左/右兩頭開始裁剪
left/right	將圖片放在容器左/右。若爲水平裁剪，從另外一頭開始裁剪；若爲垂直裁剪，則從垂直方向上/下兩頭開始裁剪
center_vertical/horizontal/center	垂直居中/水平居中/兩個方向均居中。效果只與clipOrientation有關：水平裁剪，左右兩頭開始裁剪；垂直裁剪，上下兩頭開始裁剪
fill_vertical/horizontal	垂直/水平方向填充容器。gravity和orientation方向相同時，不裁剪；方向不一樣時，按照orientation的方向，從兩頭開始裁剪
fill	水平和垂直方向同時填充容器，沒有裁剪效果
clip_vertical/horizontal	效果相似center_center

2四、AnimationDrawable的做用

1. 對應於animation-list標籤
2. 用於實現逐幀動畫效果
3. android:oneShot決定是循環播放仍是播放一次，false：循環播放
4. item中設置一幀一幀的Drawable以及持續時間
5. AnimationDrawable的setOneShot(boolean flag) 和android:oneShot配置同樣
6. addFrame (Drawable frame, int duration) 動態的添加一個圖片進入該動畫中
7. stop()和start()用於中止和開始/繼續播放，中止時會停留在當前一幀上

2五、AnimationDrawable的使用

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/shake_anim_01" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_02" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_03" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_04" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_05" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_06" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_07" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_08" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_09" android:duration="100"/>
    <item android:drawable="@drawable/shake_anim_10" android:duration="100"/>
</animation-list>

val imageview = findViewById<ImageView>(R.id.imaview)
(imageview.drawable as AnimationDrawable).start() //開始播放

2七、ShapeDrawable的OvalShape、RectShape、ArcShape和PaintDrawable的做用和使用

1. 用於得到有shape形狀的drawable(橢圓、長方形、扇形以及更爲通用PaintDrawable-具備圓角和邊界)

/**=================================================== * 一個繼承自ShapeDrawable更爲通用的Drawable：具備圓角 *====================================================*/
        PaintDrawable drawable3 = new PaintDrawable(Color.GREEN);
        drawable3.setCornerRadius(30);
        findViewById(R.id.textView3).setBackgroundDrawable(drawable3);

        /**============================================ * 經過Shape構造出相應的ShapeDrawable *=============================================*/
        //橢圓形形狀 : shape賦予ShapeDrawable
        OvalShape ovalShape = new OvalShape();
        ShapeDrawable drawable1 = new ShapeDrawable(ovalShape);
        drawable1.getPaint().setColor(Color.BLUE);
        drawable1.getPaint().setStyle(Paint.Style.FILL);
        findViewById(R.id.textView1).setBackgroundDrawable(drawable1);

        //矩形形狀 : shape賦予ShapeDrawable
        RectShape rectShape = new RectShape();
        ShapeDrawable drawable2 = new ShapeDrawable(rectShape);
        drawable2.getPaint().setColor(Color.RED);
        drawable2.getPaint().setStyle(Paint.Style.FILL);
        findViewById(R.id.textView2).setBackgroundDrawable(drawable2);

        //扇形、扇面形狀 : shape賦予ShapeDrawable
        //順時針,開始角度30， 掃描的弧度跨度180
        ArcShape arcShape = new ArcShape(30, 180);
        ShapeDrawable drawable4 = new ShapeDrawable(arcShape);
        drawable4.getPaint().setColor(Color.YELLOW);
        drawable4.getPaint().setStyle(Paint.Style.FILL);
        findViewById(R.id.textView4).setBackgroundDrawable(drawable4);

2六、其他Drawable及其功能

Drwable分類	xml標籤	功能
ColorDrawable	color	純色Drawable
RotateDrawable	rotate	實現旋轉效果
RippleDrawable	ripple	觸摸反饋動畫，Andorid 5.0推出
VectorDrawable	vector中使用path	【繪製靜態圖】使用矢量圖SVG, 能繪製一張圖就能適配不一樣分辨率, Android 5.0推出
AnimatedVectorDrawable	animated-vector	【動畫矢量圖】針對VectorDrawable來作動畫， Android 5.0
AnimatedStateListDrawable	animated-selector	【動畫型StateListDrawable】在View狀態改變時，展現動畫

自定義Drawable

2七、自定義Drawable

1. 通常做爲ImageView的圖像來顯示
2. 另外一個是做爲View的背景
3. 自定義Drawable主要就是實現draw方法
4. setAlpha、setColorFilter、getOpacity也須要重寫，可是模板固定
5. 當自定義Drawable有固定大小時(好比繪製一張圖片)，須要重寫getIntrinsicWidth()/getIntrinsicHeight()方法(默認返回-1)，會影響到View的wrap_content佈局
6. 內部固定大小不等於Drawable的實際區域大小，getBounds能得到實際區域大小

2八、自定義Drawable模板代碼

class CustomDrawable(color: Int) : Drawable(){ var mPaint: Paint init { mPaint = Paint(Paint.ANTI_ALIAS_FLAG) mPaint.color = color } override fun draw(canvas: Canvas) { val rect = bounds canvas.drawCircle(rect.exactCenterX(), rect.exactCenterY(), Math.min(rect.exactCenterX(), rect.exactCenterY()), mPaint) } override fun setAlpha(alpha: Int) { mPaint.alpha = alpha invalidateSelf() } override fun setColorFilter(colorFilter: ColorFilter?) { mPaint.colorFilter = colorFilter invalidateSelf() } override fun getOpacity(): Int { //not sure, so be safe return PixelFormat.TRANSLUCENT } }

SVG矢量圖

2九、SVG是什麼?(Scalable Vetor Graphics)

1. 可伸縮矢量圖(Android 5.0推出)
2. 定義用於網絡的基於矢量的圖形(在Web上應用很是普遍)
3. 使用XML格式定義圖形
4. 圖像縮放不會影響質量
5. 萬維網聯盟標準(與DOM和XSL之類的W3C標準是一個總體）

30、SVG和Bitmap區別

1. SVG是一個繪圖標準。
2. Bitmap是經過每一個像素點上存儲色彩信息來表示圖像。
3. SVG放大不會失真, Bitmap會失真。
4. Bitmap須要爲不一樣分辨率設計多套圖表，SVG繪製一張圖就能適配不一樣分辨率。

3一、靜態矢量圖SVG-VectorDrawable

1. 基於XML的靜態矢量圖
2. 採用標籤vector
3. vector中path是最小單位，建立SVG-用指令繪製SVG圖形
4. vector中group將不一樣path組合起來

3二、VectorDrawable的vector標籤有哪些屬性

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" // SVG的具體大小 android:height="200dp" android:viewportWidth="100" //將寬度分爲多少份，與path配合(50份等於100dp) android:viewportHeight="100">
    <group>   //將不一樣`path`組合起來
        <path //SVG樹形結構的最小單位，用指令繪製SVG圖形 android:name="path1" //該path的名稱 android:pathData="M 20,80 L 50,80 80,80" android:strokeColor="@color/colorAccent" android:strokeWidth="3" android:strokeLineCap="round"/>
        <path  .../>
    </group>
</vector>

3三、VectorDrawable的path標籤的所有指令

指令	含義
M = moveto(M X, Y)	將畫筆移動到指定的座標位置，但並未繪製
L = lineto(L X, Y)	畫直線到指定的座標位置
H = horizontal lineto(H X)	畫水平線到指定X座標位置
V = vertical lineto(V Y)	畫水平線到指定Y座標位置
C = curveto(C X1, Y1, X2, Y2, ENDX, ENDY)	三次貝賽曲線
S = smooth curveto(S X2, Y2, ENDX, ENDY)	三次貝賽曲線
Q = quadratic Belzier curve(Q X, Y, ENDX, ENDY)	二次貝賽曲線
T = smooth quadratic Belzier curveTO(T ENDX, ENDY)	映射前面路徑後的終點
A = elliptical Arc(A RX, RY, XROTATION, FLAG1, FLAG2, X, Y)	弧線(RX/RY：橢圓半軸大小 XROTATION：橢圓X軸與水平方向順時針方向夾角)
Z = closepath()	關閉路徑

1. 座標軸以(0, 0)爲中心， X軸水平向右， Y軸水平向下
2. 指令大寫-絕對定位，參考全局座標系；指令小寫-相對定位，參考父容器座標系
3. 指令和數據間空格能夠省略
4. 同一指令出現屢次，能夠只用一個。
5. A的參數：RX/RY：橢圓半軸大小 XROTATION：橢圓X軸與水平方向順時針方向夾角 FLAG1：1-大角度弧線 0-小角度弧線 FLAG2：起點到終點的方向，1-順時針，2-逆時針 X/Y：終點座標

3四、VectorDrawable實例

//1. 使用`vector`標籤訂義矢量圖VectorDrawable(ic_black_24dp.xml)
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0">
        <group  android:name="test"> //該組的名稱：能夠在AnimatedVectorDrawable中指定動畫效果
           <path  android:fillColor="#FF000000" android:pathData="M12,6c1.11,0 2,-0.9 2,-2 0,-0.38 -0.1,-0.73 -0.29,-1.03L12,0l-1.71,2.97c-0.19,0.3 -0.29,0.65 -0.29,1.03 0,1.1 0.9,2 2,2zM16.6,15.99l-1.07,-1.07 -1.08,1.07c-1.3,1.3 -3.58,1.31 -4.89,0l-1.07,-1.07 -1.09,1.07C6.75,16.64 5.88,17 4.96,17c-0.73,0 -1.4,-0.23 -1.96,-0.61L3,21c0,0.55 0.45,1 1,1h16c0.55,0 1,-0.45 1,-1v-4.61c-0.56,0.38 -1.23,0.61 -1.96,0.61 -0.92,0 -1.79,-0.36 -2.44,-1.01zM18,9h-5L13,7h-2v2L6,9c-1.66,0 -3,1.34 -3,3v1.54c0,1.08 0.88,1.96 1.96,1.96 0.52,0 1.02,-0.2 1.38,-0.57l2.14,-2.13 2.13,2.13c0.74,0.74 2.03,0.74 2.77,0l2.14,-2.13 2.13,2.13c0.37,0.37 0.86,0.57 1.38,0.57 1.08,0 1.96,-0.88 1.96,-1.96L20.99,12C21,10.34 19.66,9 18,9z"/>
        </group>
</vector>
//2. 使用矢量圖
<ImageView  android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@drawable/ic_black_24dp"/>

3五、矢量圖動畫-AnimatedVectorDrawable

1. 針對靜態矢量圖-VectorDrawable來作動畫
2. xml標籤爲animated-vector
3. 在target子標籤下指明VectorDrawable的名字(都是android:name="..."屬性指明)，並指定動畫效果android:animation="@animator/..."

3六、AnimatedVectorDrawable實例

//1. 靜態矢量圖-VectorDrawable(vector_two_line.xml)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="200dp" android:viewportWidth="100" android:viewportHeight="100">
    <group>
        <path  android:name="path1" //路徑1的名稱 android:pathData="M 20,80 L 50,80 80,80" android:strokeColor="@color/colorAccent" android:strokeWidth="3" android:strokeLineCap="round"/>
        <path  android:name="path2" //路徑2的名稱 android:pathData="M 20,20 L 50,20 80,20" android:strokeColor="@color/colorAccent" android:strokeWidth="3" android:strokeLineCap="round"/>
    </group>
</vector>

//2. 軌跡動畫效果-屬性動畫ObjectAnimator(res/animator/trimpath_animator)
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="trimPathEnd" android:valueFrom="0" android:valueTo="1" android:valueType="floatType" android:interpolator="@android:interpolator/accelerate_decelerate">
</objectAnimator>

//3. 粘合靜態SVG和屬性動畫：AnimatedVectorDrawable(vector_trimpath_anim.xml)
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_two_line"> //靜態SVG
   <target  android:animation="@animator/trimpath_animator" //屬性動畫 android:name="path1"> //靜態SVG中路徑1的名稱
   </target>
   <target  android:animation="@animator/trimpath_animator" //屬性動畫 android:name="path2"> //靜態SVG中路徑2的名稱
   </target>
</animated-vector>

//4. 佈局中使用AnimatedVectorDrawable
<ImageView  android:id="@+id/trimpath_anim_imageview" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:src="@drawable/vector_trimpath_anim"/> //動畫矢量圖

代碼中開啓動畫：

ImageView imageView = (ImageView) findViewById(R.id.trimpath_anim_imageview);
((Animatable)imageView.getDrawable()).start();