Android Android中的13種Drawable小結(jié) Part 3

本節(jié)引言：

本節(jié)我們來把剩下的四種Drawable也學(xué)完，他們分別是：LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable, 依舊貼下13種Drawable的導(dǎo)圖：

1.LayerDrawable

層圖形對(duì)象，包含一個(gè)Drawable數(shù)組，然后按照數(shù)組對(duì)應(yīng)的順序來繪制他們，索引 值最大的Drawable會(huì)被繪制在最上層！雖然這些Drawable會(huì)有交叉或者重疊的區(qū)域，但 他們位于不同的層，所以并不會(huì)相互影響，以作為根節(jié)點(diǎn)！

相關(guān)屬性如下：

• drawable:引用的位圖資源,如果為空徐璈有一個(gè)Drawable類型的子節(jié)點(diǎn)
• left:層相對(duì)于容器的左邊距
• right:層相對(duì)于容器的右邊距
• top:層相對(duì)于容器的上邊距
• bottom:層相對(duì)于容器的下邊距
• id:層的id

使用示例：

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

非常簡單，結(jié)合前面學(xué)習(xí)的shapeDrawable和ClipDrawable：

layerList_one.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#C2C2C1" />
            <corners android:radius="50dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#BCDA73" />
                <corners android:radius="50dp" />
            </shape>
        </clip>
    </item>
</layer-list> 

然后在布局文件中添加一個(gè)Seekbar，內(nèi)容如下：

<SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"
        android:indeterminateOnly="false"
        android:maxHeight="10dp"
        android:minHeight="5dp"
        android:progressDrawable="@drawable/layerlist_one"
        android:thumb="@drawable/shape_slider" />

臥槽，沒了？對(duì)的，就是這么點(diǎn)東西~說了是層圖形對(duì)象，我們還可以弄個(gè)層疊圖片的效果：

運(yùn)行效果圖：

實(shí)現(xiàn)代碼：

層疊圖片的layerlist_two.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_bg_ciwei" />
    </item>
    <item
        android:left="25dp"
        android:top="25dp">
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_bg_ciwei" />
    </item>
    <item
        android:left="50dp"
        android:top="50dp">
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_bg_ciwei" />
    </item>
</layer-list> 

然后在activity_main.xml里加個(gè)ImageView，內(nèi)容如下：

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/layerlist_two"/>

 簡單好用，還等什么，快快應(yīng)用到你的項(xiàng)目中吧~

2.TransitionDrawable

LayerDrawable的一個(gè)子類，TransitionDrawable只管理兩層的Drawable！兩層！兩層！ 并且提供了透明度變化的動(dòng)畫，可以控制一層Drawable過度到另一層Drawable的動(dòng)畫效果。 根節(jié)點(diǎn)為，記住只有兩個(gè)Item，多了也沒用，屬性和LayerDrawable差不多， 我們需要調(diào)用startTransition方法才能啟動(dòng)兩層間的切換動(dòng)畫； 也可以調(diào)用reverseTransition()方法反過來播放：

使用示例：

運(yùn)行效果圖：

實(shí)現(xiàn)代碼：

在res/drawable創(chuàng)建一個(gè)TransitionDrawable的xml文件

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

然后布局文件里加個(gè)ImageView，然后把src設(shè)置成上面的這個(gè)drawable 然后MainActivity.java內(nèi)容如下：

public class MainActivity extends AppCompatActivity {
    private ImageView img_show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        TransitionDrawable td = (TransitionDrawable) img_show.getDrawable();
        td.startTransition(3000);
        //你可以可以反過來播放，使用reverseTransition即可~
        //td.reverseTransition(3000);
    }
}

另外，如果你想實(shí)現(xiàn)：多張圖片循環(huán)的淡入淡出的效果 可參考：Android Drawable Resource學(xué)習(xí)（七）、TransitionDrawable中的示例 很簡單，核心原理就是：handler定時(shí)修改Transition中兩個(gè)圖片！

3.LevelListDrawable

用來管理一組Drawable的,我們可以為里面的drawable設(shè)置不同的level， 當(dāng)他們繪制的時(shí)候，會(huì)根據(jù)level屬性值獲取對(duì)應(yīng)的drawable繪制到畫布上，根節(jié)點(diǎn) 為:他并沒有可以設(shè)置的屬性，我們能做的只是設(shè)置每個(gè) 的屬性！

item可供設(shè)置的屬性如下：

• drawable:引用的位圖資源,如果為空徐璈有一個(gè)Drawable類型的子節(jié)點(diǎn)
• minlevel:level對(duì)應(yīng)的最小值
• maxlevel:level對(duì)應(yīng)的最大值

使用示例：

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

通過shapeDrawable畫圓，一式五份，改下寬高即可：

shape_cir1.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#2C96ED"/>
    <size android:height="20dp" android:width="20dp"/>
</shape>

接著到LevelListDrawable，這里我們?cè)O(shè)置五層：

level_cir.xml：

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/shape_cir1" android:maxLevel="2000"/>
    <item android:drawable="@drawable/shape_cir2" android:maxLevel="4000"/>
    <item android:drawable="@drawable/shape_cir3" android:maxLevel="6000"/>
    <item android:drawable="@drawable/shape_cir4" android:maxLevel="8000"/>
    <item android:drawable="@drawable/shape_cir5" android:maxLevel="10000"/>
</level-list> 

最后MainActivity寫如下代碼：

public class MainActivity extends AppCompatActivity {

    private ImageView img_show;

    private LevelListDrawable ld;
    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            if (msg.what == 0x123) {
                if (ld.getLevel() > 10000) ld.setLevel(0);
                img_show.setImageLevel(ld.getLevel() + 2000);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img_show = (ImageView) findViewById(R.id.img_show);
        ld = (LevelListDrawable) img_show.getDrawable();
        img_show.setImageLevel(0);
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0x123);
            }
        }, 0, 100);
    }
}

也很簡單，一個(gè)Timer定時(shí)器,handler修改level值~

4.StateListDrawable

好了終于迎來了最后一個(gè)drawable：StateListDrawable，這個(gè)名字看上去模式，其實(shí)我們 以前就用到了，還記得為按鈕設(shè)置不同狀態(tài)的drawable的嗎？沒錯(cuò)，用到的 就是這個(gè)StateListDrawable！

可供設(shè)置的屬性如下：

• drawable:引用的Drawable位圖,我們可以把他放到最前面,就表示組件的正常狀態(tài)~
• state_focused:是否獲得焦點(diǎn)
• state_window_focused:是否獲得窗口焦點(diǎn)
• state_enabled:控件是否可用
• state_checkable:控件可否被勾選,eg:checkbox
• state_checked:控件是否被勾選
• state_selected:控件是否被選擇,針對(duì)有滾輪的情況
• state_pressed:控件是否被按下
• state_active:控件是否處于活動(dòng)狀態(tài),eg:slidingTab
• state_single:控件包含多個(gè)子控件時(shí),確定是否只顯示一個(gè)子控件
• state_first:控件包含多個(gè)子控件時(shí),確定第一個(gè)子控件是否處于顯示狀態(tài)
• state_middle:控件包含多個(gè)子控件時(shí),確定中間一個(gè)子控件是否處于顯示狀態(tài)
• state_last:控件包含多個(gè)子控件時(shí),確定最后一個(gè)子控件是否處于顯示狀態(tài)

使用示例：

那就來寫個(gè)簡單的圓角按鈕吧！

運(yùn)行效果圖：

代碼實(shí)現(xiàn)：

那就先通過shapeDrawable來畫兩個(gè)圓角矩形，只是顏色不一樣而已：

shape_btn_normal.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#DD788A"/>
    <corners android:radius="5dp"/>
    <padding android:top="2dp" android:bottom="2dp"/>
</shape>

接著我們來寫個(gè)selctor：selctor_btn.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape_btn_pressed"/>
    <item android:drawable="@drawable/shape_btn_normal"/>
</selector>

然后按鈕設(shè)置android:background="@drawable/selctor_btn"就可以了~ 你可以根據(jù)自己需求改成矩形或者橢圓，圓形等！

本節(jié)小結(jié)：

好的，關(guān)于Android中的13種不同類型的Drawable已經(jīng)講解完畢了，當(dāng)然，這只是基礎(chǔ)，實(shí)際 開發(fā)中肯定還有各種高逼格的用法，這就要靠大家去擴(kuò)展了，這里只是給大家一個(gè)引導(dǎo)！

嗯，時(shí)間關(guān)系，上述的例子都是一個(gè)個(gè)試的，所以最后的demo亂七八糟哈，可能 你對(duì)這些素材又需要，還是貼下，有需要的自行下載：DrawableDemo.zip 嗯，謝謝~祝周末愉快