Android Drawable 詳解（教你畫畫！）

安卓開發 · 發表 2018-10-20 22:25:40

摘要：參考 1、Android中的Drawable基礎與自定義Drawable 2、android中的drawable資源 3、Android開發之Shape詳細解讀 Drawable分類 No xml標籤 ...

參考

ofollow,noindex">1、Android中的Drawable基礎與自定義Drawable

Drawable分類

No	xml標籤	Class類	含義
1	shape	ShapeDrawable	特定形狀，模型的圖樣
2	selector	StateListDrawable	不同狀態選擇不同的圖樣
3	layer-list	LayerDrawable	層疊圖樣
4	level-list	LevelListDrawable	不同程度圖樣
5	transition	TransitionDrawable	漸變圖樣
6	ripple	RippleDrawable	波紋圖樣
7	inset	InsetDrawable	內嵌圖樣
8	scale	ScaleDrawable	縮放圖樣
9	clip	ClipDrawable	剪下圖樣
10	rotate	RotateDrawable	旋轉圖樣
11	animation-list	AnimationDrawable	動畫效果
12	bitmap	BitmapDrawable	圖片圖樣
13	nine-patch	NinePatchDrawable	.9圖

一、shape - ShapeDrawable : 特定形狀，模型的圖樣

>>標籤含義

1、shape標籤

屬性	含義	值等解釋
shape	形狀，樣式	rectangle: 矩形，預設的形狀，可以畫出直角矩形、圓角矩形、弧形等 oval: 橢圓形，用得比較多的是畫正圓 line: 線形，可以畫實線和虛線 ring: 環形，可以畫環形進度條
tint	著色	給shape著色
tintMode	著色模式	著色模式（有關tint和tintMode請參看文章： http://blog.csdn.net/u010687392/article/details/47399719 ）
dither	抖動平滑：建議true	將在點陣圖的畫素配置與螢幕不同時（例如：ARGB 8888 點陣圖和 RGB 565 螢幕）啟用點陣圖的抖動；值為“false”時則停用抖動。預設值為 true。
visible	-	-
useLevel	使用等級，建議為false	如果為true，則可在LevelListDrawable中使用。這通常應為“false”，否則形狀不會顯示。
thickness	外環厚度	環的厚度，指內環與外環的環間距。（只適用於shape為ring）
thicknessRatio	同上，浮點型	浮點型，以環的寬度比率來表示環的厚度，預設為9，表示環的厚度為環的寬度除以9，該值會被android:thickness覆蓋（只適用於shape為ring）
innerRatio	內環半徑	內環半徑（只適用於shape為ring）
innerRadiusRatio	同上，浮點型	浮點型，以環的寬度比率來表示內環的半徑，預設為3，表示內環半徑為環的寬度除以3，該值會被android:innerRadius覆蓋（只適用於shape為ring）

2、shape下size標籤：設定shape寬高值

注意事項：只有控制元件寬高設定成wrap_content時，此處寬高才起作用，但是起到的卻是最小寬高值。也就是說，當控制元件寬高超過你此處指定的值時，它會變化（wrap_content!!!）

屬性	含義
width	寬度
height	高度

3、shape下solid標籤：設定形狀填充顏色

屬性	含義
color	指定顏色

4、shape下padding標籤：設定內容與邊界的距離

屬性	含義
left	左內邊距
top	上內邊距
right	右內邊距
bottom	左內邊距

5、shape下corners標籤：設定四個角的圓角

屬性	含義
radius	四個角圓角
topLeftRadius	左上角的圓角
topRightRadius	右上角的圓角
bottomLeftRadius	左下角的圓角
bottomRightRadius	右下角的圓角

6、shape下stroke標籤：設定shape的外邊界線

屬性	含義
color	描邊的顏色
width	邊界線的寬度
dashWidth	段虛線的寬度
dashGap	段虛線的間隔

7、shape下的gradient標籤：設定形狀漸變

屬性	含義	值等解釋
type	漸變的型別	1.linear：線性漸變，預設的漸變型別 2.radial：放射漸變，設定該項時，必須設定android:gradientRadius漸變半徑屬 3.sweep：掃描性漸變
angle	漸變角度	漸變的角度，線性漸變時(linear也是預設的漸變型別)才有效，必須是45的倍數，0表示從左到右，90表示從下到上
centerX	漸變中心的相對X座標	放射漸變時(radial)才有效，在0.0到1.0之間，預設為0.5，表示在正中間
centerY	漸變中心的相對Y座標	放射漸變時(radial才有效，在0.0到1.0之間，預設為0.5，表示在正中間
useLevel	使用等級	如果為true，則可在LevelListDrawable中使用。這通常應為“false”，否則形狀不會顯示
startColor	漸變開始的顏色	-
centerColor	漸變中間的顏色	-
endColor	漸變結束的顏色	-
gradientRadius	漸變半徑	漸變的半徑，只有漸變型別為radial時才使用

>>案例

1、Rectangle-矩形樣式

shape-rectangle.png

矩形：填充+描邊+弧邊

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 填充顏色 -->
<solid android:color="@color/wx_green" />
<!-- 線的寬度 -->
<stroke
android:width="5dp"
android:color="@color/orchid"/>
<!-- 矩形的圓角半徑 -->
<corners android:radius="12dp" />

</shape>

矩形：填充+描邊+上部弧邊

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充顏色 -->
<solid android:color="@color/wx_green" />
<!-- 線的寬度 -->
<stroke
android:width="5dp"
android:color="@color/orchid"/>
<!-- 矩形的圓角半徑,設定四個角 -->
<corners
android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>

</shape>

矩形：填充+描邊虛線+弧邊半圓

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充顏色 -->
<solid android:color="@color/wx_green" />
<!-- 線的寬度,虛線寬度，虛線間隔 -->
<stroke
android:width="5dp"
android:color="@color/orchid"
android:dashWidth="5dp"
android:dashGap="3dp"/>
<!-- 矩形的圓角半徑,半圓形，設定大一點就好了 -->
<corners android:radius="100dp" />

</shape>

2、Oval-圖圓形樣式

shape-oval.png

橢圓形+橫向漸變色，沒有調整角度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<!--漸變色：線性-->
<gradient
android:type="linear"
android:angle="0"
android:startColor="@color/wx_red"
android:centerColor="@color/wx_green"
android:endColor="@color/yellow"/>

</shape>

橢圓形：圓形+發射形漸變色，如果設定的高寬大於gradientRadius*2的話，那麼外圍顏色是endColor

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--漸變色：放射，必須設定android:gradientRadius
如果設定的高寬大於gradientRadius*2的話，那麼外圍顏色是endColor-->
<gradient
android:type="radial"
android:startColor="@color/white"
android:endColor="@color/wx_green"
android:gradientRadius="60dp"/>

</shape>

橢圓形：圓形+掃描漸變色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--漸變色：放射，必須設定android:gradientRadius-->
<gradient
android:type="sweep"
android:startColor="@color/wx_green"
android:endColor="@color/white"
android:gradientRadius="20dp"/>

</shape>

3、Ring-環形樣式

shape-ring.png

環形：只有填充色，inner內部沒顏色，外環是填充色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">

<solid android:color="@color/wx_green"/>

</shape>

環形：有填充顏色和描邊

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="@color/wx_green"/>
<!-- 線的寬度 -->
<stroke
android:width="5dp"
android:color="@color/orchid"/>

</shape>

環形：sweep的漸變色環，加上rotate可以變成loading框

<?xml version="1.0" encoding="utf-8"?>
<!--加上rotate可以變成loading等待框或者進度框-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">

<gradient
android:endColor="@color/wx_green"
android:startColor="@color/white"
android:type="sweep" />

</shape>

4、Line-線形樣式

shape-line.png

線形：實線，只能是橫向的，另外可以設定size

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="3dp"
android:color="@color/orchid"/>

</shape>

線性：虛線，如果要顯示的話，必須加上android:layerType="software"

<?xml version="1.0" encoding="utf-8"?>
<!--要顯示虛線必須view加上：android:layerType="software"-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="3dp"
android:color="@color/orchid"
android:dashWidth="5dp"
android:dashGap="3dp"/>

</shape>

二、selector - StateListDrawable：不同狀態選擇不同的圖樣

>>標籤含義

1、selector下的item標籤

1.1.作為drawable資源使用時，一般和shape一樣放於drawable目錄下，item必須指定android:drawable屬性。

1.2.作為color資源使用時，則放於color目錄下，item必須指定android:color屬性。

屬性	含義
drawable	color顏色或者其他drawable或圖片等
state_enabled	設定觸控或點選事件是否可用狀態**，一般只在false時設定該屬性，表示不可用狀態
state_pressed	設定是否按壓狀態**，一般在true時設定該屬性，表示已按壓狀態，預設為false
state_selected	設定是否選中狀態**，true表示已選中，false表示未選中
state_checked	設定是否勾選狀態**，主要用於CheckBox和RadioButton，true表示已被勾選，false表示未被勾選
state_checkable	設定勾選是否可用狀態**，類似state_enabled，只是state_enabled會影響觸控或點選事件，state_checkable影響勾選事件
state_focused	設定是否獲得焦點狀態**，true表示獲得焦點，預設為false，表示未獲得焦點
state_window_focused	設定當前視窗是否獲得焦點狀態**，true表示獲得焦點，false表示未獲得焦點，例如拉下通知欄或彈出對話方塊時，當前介面就會失去焦點；另外，ListView的ListItem獲得焦點時也會觸發true狀態，可以理解為當前視窗就是ListItem本身
state_activated	設定是否被啟用狀態**，true表示被啟用，false表示未啟用，API Level 11及以上才支援，可通過程式碼呼叫控制元件的setActivated(boolean)方法設定是否啟用該控制元件
state_hovered	設定是否滑鼠在上面滑動的狀態**，true表示滑鼠在上面滑動，預設為false，API Level 14及以上才支援
exitFadeDuration	狀態改變時，舊狀態消失時的淡出時間，以毫秒為單位
enterFadeDuration	狀態改變時，新狀態展示時的淡入時間，以毫秒為單位

>>案例

1、下面就用兩個button一個checkbox來說明吧

1.button不能按，checkbox不能選中

2.button可以按並按中，checkbox選中了

3.又再次關閉使用，button2是1的優化版，還帶有弧角

2、程式碼部分

2.1.button

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--異常：tag requires a 'drawable' attribute or child tag defining a drawable
可用drawable下的shape中新增color顏色值-->
<!--<item android:state_enabled="false" android:color="@color/gray_5"/>-->
<!--不可用-->
<item android:state_enabled="false" android:drawable="@color/gray_5"/>
<!--未按壓-->
<item android:state_enabled="true"
android:state_pressed="false" android:drawable="@color/green" />
<!--游標在-->
<item android:state_enabled="true"
android:state_focused="true" android:drawable="@color/lightgreen" />
<!--按壓-->
<item android:state_enabled="true"
android:state_pressed="true" android:drawable="@color/orange" />
</selector>

2.2.checkbox

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--不可用，未選中-->
<item android:state_enabled="false"
android:state_checked="false"
android:drawable="@mipmap/un_check_gray"/>
<!--不可用，選中-->
<item android:state_enabled="false"
android:state_checked="true"
android:drawable="@mipmap/is_check_gray"/>
<!--可用，未選中-->
<item android:state_enabled="true"
android:state_checked="false"
android:drawable="@mipmap/un_check_purl"/>
<!--可用，選中-->
<item android:state_enabled="true"
android:state_checked="true"
android:drawable="@mipmap/is_check_purl"/>
</selector>

2.3.button2

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

<item android:state_pressed="false">
<shape android:shape="rectangle">
<!-- 填充顏色 -->
<solid android:color="?attr/colorPrimary"></solid>
<!-- 線的寬度，顏色灰色 -->
<stroke android:width="0dp" android:color="#D5D5D5"></stroke> 
<!-- 矩形的圓角半徑 -->
<corners android:radius="6dip" /> 
</shape>
</item>

<item android:state_focused="true">
<shape android:shape="rectangle">
<!-- 填充顏色 -->
<solid android:color="?attr/colorPrimary"></solid>
<!-- 線的寬度，顏色灰色 -->
<stroke android:width="0dp" android:color="#D5D5D5"></stroke> 
<!-- 矩形的圓角半徑 -->
<corners android:radius="6dip" /> 
</shape>
</item>

<item android:state_pressed="true">
<shape android:shape="rectangle">
<!-- 填充顏色 -->
<solid android:color="?attr/colorAccent"></solid>
<!-- 線的寬度，顏色灰色 -->
<stroke android:width="0dp" android:color="#D5D5D5"></stroke> 
<!-- 矩形的圓角半徑 -->
<corners android:radius="6dip" /> 
</shape>
</item>

</selector>

三、layer-list - LayerDrawable：層疊圖樣

>>標籤含義

1、layer-list下的item標籤。上面已經講過了，item下面能放各種樣式的drawable或者shape圖樣

>>案例

1、上左右，亂七八糟陰影，內部漸變色，坐上右上弧角

2、陰影圖案

layer-list.png

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--radius top_left,top_right-->
<!--shadow top,left,right-->

<!--從外到內，層層遞進-->

<!-- 最外層：上左右距外圍2dp，內部是漸變色1、右上帶弧度的矩形 -->
<item
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="@color/gray_3" />

<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>

<!-- 第二層：上左右距外圍4dp，內部是漸變色2、右上帶弧度的矩形 -->
<item
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle">
<solid android:color="@color/gray_5" />

<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>

<!-- 第三層：上左右距外圍6dp，內部是漸變色3、右上帶弧度的矩形 -->
<item
android:left="6dp"
android:right="6dp"
android:top="6dp">
<shape android:shape="rectangle">
<solid android:color="@color/gray_7" />

<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>


<!-- 最內層：上左右距外圍8dp，內部是漸變色的左上、右上帶弧度的矩形 -->
<item
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle">

<gradient
android:angle="45"
android:startColor="@color/wx_green"
android:endColor="@color/limegreen"
android:type="linear"/>

<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>

</shape>
</item>

</layer-list>

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

<!--底層的左邊距離上層左邊3dp, 底層的頂部，距離上層的頂部6dp,如果不做這個控制，底層和上層的左側和上側會重合在一起-->
<item android:left="3dp"
android:top="6dp">
<shape>
<solid android:color="#b4b5b6"/>
</shape>
</item>

<!--上層的右邊距離底層的右邊3dp, 上層的底部距離底層的底部6dp-->
<item android:bottom="6dp"
android:right="3dp">
<shape>
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>

四、level-list - LevelListDrawable：不同程度圖樣

1、level-list下的item標籤。

屬性	含義
minLevel	最小值
maxLevel	最大值
drawable	圖樣

>>案例：比方說電量、wifi質量，音量等

battery_level.png

<?xml version="1.0" encoding="utf-8"?>
<!--此處有個坑，順訊必須從小到大-->
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:minLevel="0" android:maxLevel="19" android:drawable="@drawable/battery_0" />
<item android:minLevel="20" android:maxLevel="39" android:drawable="@drawable/battery_1" />
<item android:minLevel="40" android:maxLevel="59" android:drawable="@drawable/battery_2" />
<item android:minLevel="60" android:maxLevel="79" android:drawable="@drawable/battery_3" />
<item android:minLevel="80" android:maxLevel="99" android:drawable="@drawable/battery_4" />
<item android:minLevel="100" android:maxLevel="100" android:drawable="@drawable/battery_5" />
</level-list>

iv_level_battery.getDrawable().setLevel(25);
iv_level_battery_2.getDrawable().setLevel(63);
iv_level_battery_3.getDrawable().setLevel(100);

五、transition - TransitionDrawable：漸變圖樣

>>標籤含義

1、transition下的item標籤。上面已經講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

>>案例

1、電量變化

draw_transition.gif

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@mipmap/battery_1" />
<item android:drawable="@mipmap/battery_5" />
</transition>

//得到一個Drawable，屬於 TransitionDrawable 型別的
TransitionDrawable transition = (TransitionDrawable)getResources().
getDrawable(R.drawable.draw_transition);

iv_transition_battery.setImageDrawable(transition);
transition.startTransition(2000); // 設定漸變的變化市場

六、ripple - RippleDrawable：波紋圖樣

>>標籤含義

1、ripple有下的item標籤。上面已經講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

ripple屬性	含義
color	波紋顏色
tools:targetApi	lollipop，必須這個api以上才能用

>>案例

1、波紋變化，外放，內部與顏色疊加。gif圖片播放太快了，實際沒那麼快

draw_ripple.2018-10-19 14_58_15.gif

1.1、單純ripple，控制元件高度是wrap_content的話，那麼波紋外擴

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">


</ripple>

1.2、加一個item，有背景色，那麼不會外擴，含定在此drawable中了

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">

<item
android:drawable="@color/wx_green" />

</ripple>

1.3、加一個蒙版遮罩，範圍限定了，但是drawable設定顏色無用

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">

<!--mask遮罩，設定的drawable顏色會失效-->
<item
android:id="@android:id/mask"
android:drawable="@color/wx_green" />

</ripple>

1.4、弧角矩形按鈕點選波紋效果

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">

<item>
<shape android:shape="rectangle">
<solid android:color="@color/wx_green" />
<corners android:radius="12dp" />
</shape>
</item>

</ripple>

七、inset - InsetDrawable：內嵌圖樣

>>標籤含義

1、inset有下的shape標籤。

inset屬性	含義
insetTop	嵌入內部上邊
insetBottom	嵌入內部下邊
insetLeft	嵌入內部左邊
insetRight	嵌入內部右邊

>>案例

1、內嵌一個圖案、感覺沒太大用~~

inset.png

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="10dp"
android:insetBottom="10dp"
android:insetLeft="10dp"
android:insetRight="10dp">

<!--待會要插入的一個藍色的矩形-->
<shape android:shape="rectangle" >
<solid android:color="@color/orange" />
</shape>

</inset>

八、scale - ScaleDrawable：縮放圖樣

>>標籤含義

1、scale標籤。

scale屬性	含義
drawable	資源引用
scaleGravity	縮放的方向, 比如: top, 縮放的時候就會向頂部靠攏,bottom, 縮放時會想底部靠攏;
scaleHeight	表示Drawable能夠在高度上縮放的百分比, 比如: 50%,
scaleWidth	表示Drawable能夠在寬度上縮放的百分比, 同上

>>案例

1、一般做圖片的縮放時候用到

draw_scale.gif

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/android"
android:scaleGravity="left"
android:scaleWidth="50%"
android:scaleHeight="100%"
>

</scale>

//Scale Drawable不能單獨的使用, 他需要配合Level等級使用, level的取值是0~10000, (0為不可見)
sk_scale.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int max = seekBar.getMax();
double scale = (double)progress/(double)max;
ScaleDrawable drawable = (ScaleDrawable) iv_scale.getDrawable();
drawable.setLevel((int) (10000*scale));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) { }
@Override
public void onStopTrackingTouch(SeekBar seekBar) { }
});

九、clip - ClipDrawable：剪下的圖樣

>>標籤含義

1、clip標籤。

clip屬性	含義
drawable	資源引用
clipOrientation	top\bottom\left\right\gravity,fill... 橫向，豎向，中間...
gravity	left,right,top,bottom--哪個方向開始

>>案例

1、一般可用作溫度計啊、聲音啊，各種程度的東西。

draw_clip.gif

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/draw_shape_rectangle_linear_gradient"
android:clipOrientation="horizontal"
android:gravity="left">

</clip>

//Clip Drawable也要level才有用
sk_clip.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int max = seekBar.getMax();
double scale = (double)progress/(double)max;
ClipDrawable drawable = (ClipDrawable) tv_clip.getBackground();
drawable.setLevel((int) (10000*scale));
tv_clip.setText("Clip Progress = "+progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});

十、rotate - RotateDrawable：旋轉圖樣

>>標籤含義

1、rotate標籤。

clip屬性	含義
drawable	資源引用
visible	是否可見
pivotX	pivotX表示旋轉軸心在x軸橫座標上的位置，用百分比表示，表示在當前drawable總寬度百分之幾的位置。
pivotY	同上，Y軸方向的
fromDegrees	從什麼角度開始
toDegrees	到什麼角度

>>案例

1、一般可用作迴圈的東西，比如唱片啊，loading等待框啊~~

draw_rotate.gif

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/draw_shape_ring_gradient"
android:fromDegrees="0"
android:toDegrees="360">

</rotate>

//Rotate Drawable也要level才有用
sk_rotate.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int max = seekBar.getMax();
double scale = (double)progress/(double)max;
RotateDrawable drawable = (RotateDrawable) tv_rotate.getBackground();
drawable.setLevel((int) (10000*scale));
tv_rotate.setText("Rotate Progress = "+progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});

十一、animation-list - AnimationDrawable：動畫效果圖樣

>>標籤含義

1、animation-list標籤下有item（drawable和duration屬性）標籤。

animation-list屬性	含義
oneshot	是否一次，不然就是迴圈

>>案例

1、歡迎介面展示啊等等。。。

<?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/battery_1" android:duration="200"/>
<item android:drawable="@drawable/battery_3" android:duration="200"/>
<item android:drawable="@drawable/battery_5" android:duration="200"/>
</animation-list>

//AnimationDrawable mAnimationDrawable = new AnimationDrawable();
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue01), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue02), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue03), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue04), 150);
 //mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue05), 150);
//mAnimationDrawable.setOneShot(false);

AnimationDrawable a = (AnimationDrawable)btn_animation_list.getBackground();
a.start();//a.stop \ a.isRunning()

十二、bitmap - BitmapDrawable

1、截圖

bd-mirror.png

bd-repeat.png

bd-clamp.png

bd-disabled.png

2、內容

xml屬性	含義	程式碼
src	資源：color\drawable	-
antialias	抗鋸齒，建議開啟	bitmapDrawable.setAntiAlias(true);
dither	顫抖處理：平滑，飽滿，清晰，建議開啟	bitmapDrawable.setDither(true);
filter	點陣圖過濾：平滑，建議開啟	bitmapDrawable.setFilterBitmap(true);
gravity	位置[start,end,top,bottom,center...]	bitmapDrawable.setGravity(Gravity.START);
mipMap	文理對映，建議關閉	bitmapDrawable.setMipMap(false);
tileMode	平鋪方式 disabled-不使用平鋪 clamp-複製邊緣色彩 repeat-重複 mirror-映象]	bitmapDrawable.setTileModeXY(Shader.TileMode.CLAMP,Shader.TileMode.CLAMP); bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT,Shader.TileMode.REPEAT); bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR,Shader.TileMode.MIRROR);

3、程式碼

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

Bitmap bitmap = BitmapFactory.decodeResource(instance.getResources(),
R.drawable.android);//drawable\mipmap\color...
BitmapDrawable bitmapDrawable = new BitmapDrawable(bitmap);
bitmapDrawable.setAntiAlias(true);//抗鋸齒
bitmapDrawable.setDither(true);//抖動平滑
bitmapDrawable.setFilterBitmap(true);//過濾平滑
bitmapDrawable.setGravity(Gravity.START);
//bitmapDrawable.setMipMap(false);

//複製邊緣色彩
bitmapDrawable.setTileModeXY(Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
//重複
bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
//映象
bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR,Shader.TileMode.MIRROR);

ll_bitmap_drawale.setBackground(bitmapDrawable);

十三、nine-patch - NinePatchDrawable

1、這個是.9圖，使用方法和上面bitmap類似，不贅述。好處是可以動態拉伸此圖片某些邊的時候而不造成整體變形。

<?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"
/>

Android Drawable 詳解（教你畫畫！）

參考

Drawable分類

一、shape - ShapeDrawable : 特定形狀，模型的圖樣

>>標籤含義

1、shape標籤

2、shape下size標籤：設定shape寬高值

3、shape下solid標籤：設定形狀填充顏色

4、shape下padding標籤：設定內容與邊界的距離

5、shape下corners標籤：設定四個角的圓角

6、shape下stroke標籤：設定shape的外邊界線

7、shape下的gradient標籤：設定形狀漸變

>>案例

1、Rectangle-矩形樣式

2、Oval-圖圓形樣式

3、Ring-環形樣式

4、Line-線形樣式

二、selector - StateListDrawable：不同狀態選擇不同的圖樣

>>標籤含義

1、selector下的item標籤

>>案例

1、下面就用兩個button一個checkbox來說明吧

2、程式碼部分

三、layer-list - LayerDrawable：層疊圖樣

>>標籤含義

1、layer-list下的item標籤。上面已經講過了，item下面能放各種樣式的drawable或者shape圖樣

>>案例

1、上左右，亂七八糟陰影，內部漸變色，坐上右上弧角

2、陰影圖案

四、level-list - LevelListDrawable：不同程度圖樣

1、level-list下的item標籤。

>>案例：比方說電量、wifi質量，音量等

五、transition - TransitionDrawable：漸變圖樣

>>標籤含義

1、transition下的item標籤。上面已經講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

>>案例

1、電量變化

六、ripple - RippleDrawable：波紋圖樣

>>標籤含義

1、ripple有下的item標籤。上面已經講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

>>案例

1、波紋變化，外放，內部與顏色疊加。gif圖片播放太快了，實際沒那麼快

七、inset - InsetDrawable：內嵌圖樣

>>標籤含義

1、inset有下的shape標籤。

>>案例

1、內嵌一個圖案、感覺沒太大用~~

八、scale - ScaleDrawable：縮放圖樣

>>標籤含義

1、scale標籤。

>>案例

1、一般做圖片的縮放時候用到

九、clip - ClipDrawable：剪下的圖樣

>>標籤含義

1、clip標籤。

>>案例

1、一般可用作溫度計啊、聲音啊，各種程度的東西。

十、rotate - RotateDrawable：旋轉圖樣

>>標籤含義

1、rotate標籤。

>>案例

1、一般可用作迴圈的東西，比如唱片啊，loading等待框啊~~

十一、animation-list - AnimationDrawable：動畫效果圖樣

>>標籤含義

1、animation-list標籤下有item（drawable和duration屬性）標籤。

>>案例

1、歡迎介面展示啊等等。。。

十二、bitmap - BitmapDrawable

1、截圖

2、內容

3、程式碼

十三、nine-patch - NinePatchDrawable

1、這個是.9圖，使用方法和上面bitmap類似，不贅述。好處是可以動態拉伸此圖片某些邊的時候而不造成整體變形。

您可能也會喜歡…