Android Drawable 詳解（教你畫畫Ｋ濉）

參考

1、Android中的Drawable基礎(chǔ)與自定義Drawable
2拓哟、android中的drawable資源
 3想许、Android開發(fā)之Shape詳細解讀

Drawable分類

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

$\color{green}{=======================================}$

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

>>標簽含義

1、shape標簽

屬性	含義	值等解釋
shape	形狀违诗，樣式	rectangle: 矩形漱凝，默認的形狀，可以畫出直角矩形诸迟、圓角矩形茸炒、弧形等 oval: 橢圓形，用得比較多的是畫正圓 line: 線形阵苇，可以畫實線和虛線 ring: 環(huán)形壁公，可以畫環(huán)形進度條
tint	著色	給shape著色
tintMode	著色模式	著色模式（有關(guān)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	外環(huán)厚度	環(huán)的厚度关斜，指內(nèi)環(huán)與外環(huán)的環(huán)間距。（只適用于shape為ring）
thicknessRatio	同上铺浇，浮點型	浮點型痢畜，以環(huán)的寬度比率來表示環(huán)的厚度，默認為9鳍侣，表示環(huán)的厚度為環(huán)的寬度除以9丁稀，該值會被android:thickness覆蓋（只適用于shape為ring）
innerRatio	內(nèi)環(huán)半徑	內(nèi)環(huán)半徑（只適用于shape為ring）
innerRadiusRatio	同上，浮點型	浮點型倚聚，以環(huán)的寬度比率來表示內(nèi)環(huán)的半徑线衫，默認為3，表示內(nèi)環(huán)半徑為環(huán)的寬度除以3惑折，該值會被android:innerRadius覆蓋（只適用于shape為ring）

2授账、shape下size標簽：設(shè)置shape寬高值

注意事項：只有控件寬高設(shè)置成wrap_content時枯跑，此處寬高才起作用，但是起到的卻是最小寬高值白热。也就是說敛助，當控件寬高超過你此處指定的值時，它會變化（wrap_content!!!）

屬性	含義
width	寬度
height	高度

3屋确、shape下solid標簽：設(shè)置形狀填充顏色

屬性	含義
color	指定顏色

4纳击、shape下padding標簽：設(shè)置內(nèi)容與邊界的距離

屬性	含義
left	左內(nèi)邊距
top	上內(nèi)邊距
right	右內(nèi)邊距
bottom	左內(nèi)邊距

5、shape下corners標簽：設(shè)置四個角的圓角

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

6乍恐、shape下stroke標簽：設(shè)置shape的外邊界線

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

7评疗、shape下的gradient標簽：設(shè)置形狀漸變

屬性	含義	值等解釋
type	漸變的類型	1.linear：線性漸變测砂，默認的漸變類型 2.radial：放射漸變茵烈，設(shè)置該項時，必須設(shè)置android:gradientRadius漸變半徑屬 3.sweep：掃描性漸變
angle	漸變角度	漸變的角度砌些，線性漸變時(linear也是默認的漸變類型)才有效呜投，必須是45的倍數(shù)，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	漸變結(jié)束的顏色	-
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"/>
    <!-- 矩形的圓角半徑,設(shè)置四個角 -->
    <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"/>
    <!-- 矩形的圓角半徑,半圓形胡诗，設(shè)置大一點就好了 -->
    <corners android:radius="100dp" />

</shape>

2、Oval-圖圓形樣式

shape-oval.png

橢圓形+橫向漸變色淌友，沒有調(diào)整角度

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

橢圓形：圓形+發(fā)射形漸變色煌恢，如果設(shè)置的高寬大于gradientRadius*2的話，那么外圍顏色是endColor

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!--漸變色：放射震庭，必須設(shè)置android:gradientRadius
    如果設(shè)置的高寬大于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">
    <!--漸變色：放射，必須設(shè)置android:gradientRadius-->
    <gradient
        android:type="sweep"
        android:startColor="@color/wx_green"
        android:endColor="@color/white"
        android:gradientRadius="20dp"/>

</shape>

3归薛、Ring-環(huán)形樣式

shape-ring.png

環(huán)形：只有填充色谍憔，inner內(nèi)部沒顏色匪蝙，外環(huán)是填充色

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

環(huán)形：有填充顏色和描邊

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

環(huán)形：sweep的漸變色環(huán)，加上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>

$\color{red}{1.ring的話放在view中最好算一下尺寸习贫，就是（內(nèi)環(huán)+外環(huán)+線）*2=尺寸 }$
$\color{red}{ 2.android:useLevel="false" 需要加上去逛球，不然顯示不出來}$

4、Line-線形樣式

shape-line.png

線形：實線苫昌，只能是橫向的颤绕，另外可以設(shè)置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>

$\color{green}{=======================================}$

二奥务、selector - StateListDrawable：不同狀態(tài)選擇不同的圖樣

>>標簽含義

1、selector下的item標簽

1.1.作為drawable資源使用時袜硫，一般和shape一樣放于drawable目錄下氯葬，item必須指定android:drawable屬性。
1.2.作為color資源使用時婉陷，則放于color目錄下帚称，item必須指定android:color屬性。

屬性	含義
drawable	color顏色或者其他drawable或圖片等
state_enabled	設(shè)置觸摸或點擊事件是否可用狀態(tài)**秽澳，一般只在false時設(shè)置該屬性闯睹，表示不可用狀態(tài)
state_pressed	設(shè)置是否按壓狀態(tài)**，一般在true時設(shè)置該屬性担神，表示已按壓狀態(tài)楼吃，默認為false
state_selected	設(shè)置是否選中狀態(tài)**，true表示已選中妄讯，false表示未選中
state_checked	設(shè)置是否勾選狀態(tài)**孩锡，主要用于CheckBox和RadioButton，true表示已被勾選捞挥，false表示未被勾選
state_checkable	設(shè)置勾選是否可用狀態(tài)**浮创，類似state_enabled，只是state_enabled會影響觸摸或點擊事件砌函，state_checkable影響勾選事件
state_focused	設(shè)置是否獲得焦點狀態(tài)**斩披，true表示獲得焦點，默認為false讹俊，表示未獲得焦點
state_window_focused	設(shè)置當前窗口是否獲得焦點狀態(tài)**垦沉，true表示獲得焦點，false表示未獲得焦點仍劈，例如拉下通知欄或彈出對話框時厕倍，當前界面就會失去焦點；另外贩疙，ListView的ListItem獲得焦點時也會觸發(fā)true狀態(tài)讹弯，可以理解為當前窗口就是ListItem本身
state_activated	設(shè)置是否被激活狀態(tài)**况既，true表示被激活，false表示未激活组民，API Level 11及以上才支持棒仍，可通過代碼調(diào)用控件的setActivated(boolean)方法設(shè)置是否激活該控件
state_hovered	設(shè)置是否鼠標在上面滑動的狀態(tài)**，true表示鼠標在上面滑動臭胜，默認為false莫其，API Level 14及以上才支持
exitFadeDuration	狀態(tài)改變時，舊狀態(tài)消失時的淡出時間耸三，以毫秒為單位
enterFadeDuration	狀態(tài)改變時乱陡，新狀態(tài)展示時的淡入時間，以毫秒為單位

>>案例

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

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

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

3.又再次關(guān)閉使用睛驳，button2是1的優(yōu)化版烙心，還帶有弧角

2膜廊、代碼部分

$\color{red}{注意item不能直接用color不然異常乏沸，得用drawable }$
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>

$\color{green}{=======================================}$

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

>>標簽含義

1翁都、layer-list下的item標簽。上面已經(jīng)講過了谅猾，item下面能放各種樣式的drawable或者shape圖樣

>>案例

1柄慰、上左右，亂七八糟陰影税娜，內(nèi)部漸變色坐搔，坐上右上弧角

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-->

    <!--從外到內(nèi)敬矩，層層遞進-->

    <!-- 最外層：上左右距外圍2dp概行，內(nèi)部是漸變色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弧岳，內(nèi)部是漸變色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组去，內(nèi)部是漸變色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>


    <!-- 最內(nèi)層：上左右距外圍8dp曾我，內(nèi)部是漸變色的左上章钾、右上帶弧度的矩形 -->
    <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,如果不做這個控制艺演，底層和上層的左側(cè)和上側(cè)會重合在一起-->
    <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>

$\color{green}{=======================================}$

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

1、level-list下的item標簽胎撤。

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

>>案例：比方說電量晓殊、wifi質(zhì)量，音量等

battery_level.png

$\color{red}{注意：此處level的值必須從小到大伤提，不然會空指針異常}$

<?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);

$\color{green}{=======================================}$

五、transition - TransitionDrawable：漸變圖樣

>>標簽含義

1肿男、transition下的item標簽介汹。上面已經(jīng)講過了，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); // 設(shè)定漸變的變化市場

$\color{green}{=======================================}$

六、ripple - RippleDrawable：波紋圖樣

>>標簽含義

1如庭、ripple有下的item標簽叹卷。上面已經(jīng)講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

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

>>案例

1骤竹、波紋變化，外放往毡，內(nèi)部與顏色疊加蒙揣。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設(shè)置顏色無用

<?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遮罩恐锣，設(shè)置的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>

$\color{green}{=======================================}$

七、inset - InsetDrawable：內(nèi)嵌圖樣

>>標簽含義

1土榴、inset有下的shape標簽诀姚。

inset屬性	含義
insetTop	嵌入內(nèi)部上邊
insetBottom	嵌入內(nèi)部下邊
insetLeft	嵌入內(nèi)部左邊
insetRight	嵌入內(nèi)部右邊

>>案例

1、內(nèi)嵌一個圖案玷禽、感覺沒太大用~~

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>

$\color{green}{=======================================}$

八赫段、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>

$\color{red}{注意，此ScaleDrawable要配合setLevel一起用撩银，level在0-10000內(nèi)}$

//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) { }
        });

$\color{green}{=======================================}$

九给涕、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) {}
        });

$\color{green}{=======================================}$

十毅桃、rotate - RotateDrawable：旋轉(zhuǎn)圖樣

>>標簽含義

1、rotate標簽准夷。

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

>>案例

1彻秆、一般可用作循環(huán)的東西楔绞，比如唱片啊，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) {}
        });

$\color{green}{=======================================}$

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

>>標簽含義

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

animation-list屬性	含義
oneshot	是否一次扎附，不然就是循環(huán)

>>案例

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()

$\color{green}{=======================================}$

十二图甜、bitmap - BitmapDrawable

1、截圖

bd-mirror.png

bd-repeat.png

bd-clamp.png

bd-disabled.png

2鳖眼、內(nèi)容

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	文理映射愿卒，建議關(guān)閉	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);

$\color{green}{=======================================}$

十三、nine-patch - NinePatchDrawable

1掘猿、這個是.9圖病游，使用方法和上面bitmap類似，不贅述稠通。好處是可以動態(tài)拉伸此圖片某些邊的時候而不造成整體變形衬衬。

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

最后編輯于：2018.10.20 22:03:51

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市改橘，隨后出現(xiàn)的幾起案子滋尉，更是在濱河造成了極大的恐慌，老刑警劉巖飞主，帶你破解...
沈念sama閱讀 222,378評論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件狮惜，死亡現(xiàn)場離奇詭異，居然都是意外死亡碌识，警方通過查閱死者的電腦和手機碾篡，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,970評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來筏餐，“玉大人开泽，你說我怎么就攤上這事】桑” “怎么了穆律？”我有些...
開封第一講書人閱讀 168,983評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長导俘。經(jīng)常有香客問我峦耘，道長，這世上最難降的妖魔是什么旅薄？我笑而不...
開封第一講書人閱讀 59,938評論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任辅髓，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘利朵。我一直安慰自己律想，他們只是感情好，可當我...
茶點故事閱讀 68,955評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布绍弟。她就那樣靜靜地躺著技即，像睡著了一般。火紅的嫁衣襯著肌膚如雪樟遣。梳的紋絲不亂的頭發(fā)上而叼，一...
開封第一講書人閱讀 52,549評論 1贊 312
城市分裂傳說
那天，我揣著相機與錄音豹悬，去河邊找鬼葵陵。笑死，一個胖子當著我的面吹牛瞻佛，可吹牛的內(nèi)容都是我干的脱篙。我是一名探鬼主播，決...
沈念sama閱讀 41,063評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼伤柄，長吁一口氣：“原來是場噩夢啊……” “哼绊困！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起适刀，我...
開封第一講書人閱讀 39,991評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤秤朗，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后笔喉，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體取视，經(jīng)...
沈念sama閱讀 46,522評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,604評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年常挚，在試婚紗的時候發(fā)現(xiàn)自己被綠了作谭。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,742評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡待侵，死狀恐怖丢早，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情秧倾，我是刑警寧澤，帶...
沈念sama閱讀 36,413評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布傀缩，位于F島的核電站那先，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏赡艰。R本人自食惡果不足惜售淡，卻給世界環(huán)境...
茶點故事閱讀 42,094評論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧揖闸，春花似錦揍堕、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,572評論 0贊 25
一樁弒父案衩茸，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至贮泞，卻和暖如春楞慈，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背啃擦。一陣腳步聲響...
開封第一講書人閱讀 33,671評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工囊蓝，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人令蛉。一個月前我還...
沈念sama閱讀 49,159評論 3贊 378
代替公主和親
正文我出身青樓聚霜，卻偏偏與公主長得像，于是被迫代替她去往敵國和親珠叔。傳聞我的和親對象是個殘疾皇子蝎宇，可洞房花燭夜當晚...
茶點故事閱讀 45,747評論 2贊 361

Android Drawable 詳解（教你畫畫Ｋ濉）

參考

Drawable分類

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

>>標簽含義

1、shape標簽

2授账、shape下size標簽：設(shè)置shape寬高值

3屋确、shape下solid標簽：設(shè)置形狀填充顏色

4纳击、shape下padding標簽：設(shè)置內(nèi)容與邊界的距離

5、shape下corners標簽：設(shè)置四個角的圓角

6乍恐、shape下stroke標簽：設(shè)置shape的外邊界線

7评疗、shape下的gradient標簽：設(shè)置形狀漸變

>>案例

1、Rectangle-矩形樣式

2、Oval-圖圓形樣式

3归薛、Ring-環(huán)形樣式

4、Line-線形樣式

二奥务、selector - StateListDrawable：不同狀態(tài)選擇不同的圖樣

>>標簽含義

1、selector下的item標簽

>>案例

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

2膜廊、代碼部分

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

>>標簽含義

1翁都、layer-list下的item標簽。上面已經(jīng)講過了谅猾，item下面能放各種樣式的drawable或者shape圖樣

>>案例

1柄慰、上左右，亂七八糟陰影税娜，內(nèi)部漸變色坐搔，坐上右上弧角

2、陰影圖案

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

1、level-list下的item標簽胎撤。

>>案例：比方說電量晓殊、wifi質(zhì)量，音量等

五、transition - TransitionDrawable：漸變圖樣

>>標簽含義

1肿男、transition下的item標簽介汹。上面已經(jīng)講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

>>案例

1舶沛、電量變化

六、ripple - RippleDrawable：波紋圖樣

>>標簽含義

1如庭、ripple有下的item標簽叹卷。上面已經(jīng)講過了，item下面能放各種樣式的drawable或者shape圖樣還有自己的屬性top,left等

>>案例

1骤竹、波紋變化，外放往毡，內(nèi)部與顏色疊加蒙揣。gif圖片播放太快了，實際沒那么快

七、inset - InsetDrawable：內(nèi)嵌圖樣

>>標簽含義

1土榴、inset有下的shape標簽诀姚。

>>案例

1、內(nèi)嵌一個圖案玷禽、感覺沒太大用~~

八赫段、scale - ScaleDrawable：縮放圖樣

>>標簽含義

1、scale標簽矢赁。

>>案例

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

九给涕、clip - ClipDrawable：剪切的圖樣

>>標簽含義

1、clip標簽额获。

>>案例

1抄邀、一般可用作溫度計啊耘眨、聲音啊，各種程度的東西撤摸。

十毅桃、rotate - RotateDrawable：旋轉(zhuǎn)圖樣

>>標簽含義

1、rotate標簽准夷。

>>案例

1彻秆、一般可用作循環(huán)的東西楔绞，比如唱片啊，loading等待框啊~~

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

>>標簽含義

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

>>案例

1蔫耽、歡迎界面展示啊等等。留夜。匙铡。

十二图甜、bitmap - BitmapDrawable

1、截圖

2鳖眼、內(nèi)容

3匪凡、代碼

十三、nine-patch - NinePatchDrawable

1掘猿、這個是.9圖病游，使用方法和上面bitmap類似，不贅述稠通。好處是可以動態(tài)拉伸此圖片某些邊的時候而不造成整體變形衬衬。

推薦閱讀更多精彩內(nèi)容