Android Drawable 詳解(教你畫畫!)

參考

1、Android中的Drawable基礎與自定義Drawable
2、android中的drawable資源
3、Android開發之Shape詳細解讀

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圖

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

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

\color{red}{1.ring的話放在view中最好算一下尺寸,就是(內環+外環+線)*2=尺寸 }
\color{red}{ 2.android:useLevel="false" 需要加上去,不然顯示不出來}

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>

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

二、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、代碼部分

\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標籤。上面已經講過了,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>

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

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

1、level-list下的item標籤。
屬性 含義
minLevel 最小值
maxLevel 最大值
drawable 圖樣

>>案例:比方說電量、wifi質量,音量等

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標籤。上面已經講過了,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); // 設定漸變的變化市場

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

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

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

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

\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內}

//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:旋轉圖樣

>>標籤含義

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

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

十一、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()

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

十二、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);

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

十三、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"
    />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章