關於shape和selector和layer-list的drawable詳細說明

　　在Android開發中，但凡涉及控件的的特效問題，<shape>，<selector>以及<layer-list>都是不可或缺的drawable。但是發現有同事並不了解或系統的記得一些常用的特性，經常是不知道就搜，用完又忘了……今天特意總結一下這幾個。

　　<shape> —— 用於設置控件的自身屬性的效果形狀，這些效果不會因為狀態的改變而改變，比如圓形，圓角，邊框效果等等。

　　<selector> —— 顧名思義就是選擇器，所以使用Selector設置的是跟狀態有關的效果，比如點擊時，獲取焦點時，選中時等所展現的控件效果。

　　<layer-list> —— 用於控件效果的層疊。每一個item都可以實現獨立的效果，比如shape或者selector，甚至item中也可以再包含一個layer-list。

　　有了總體概念，我們一一來分析各個drawable的使用格式：

　　一，<shape>屬性

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@android:color/holo_purple" />
    <corners android:radius="20dp" />
    <gradient android:centerColor="@android:color/holo_purple" android:endColor="@android:color/holo_blue_dark" android:startColor="@android:color/holo_blue_light" />
</shape>

 

<shape>屬性的設置比較中規中矩，沒有什么特別好說的，只要你跟着屬性設置規則走就行了。

<shape>常用屬性如下：

<shape> android:shape=["rectangle" | "oval" | "line" | "ring"] 其中rectagle矩形，oval橢圓，line水平直線，ring環形
<shape>中子節點的常用屬性：
　　<gradient> 設置漸變
　　　　　　android:startColor  起始顏色
　　　　　　android:endColor  結束顏色
　　　　　　android:angle  漸變角度，0從左到右，90表示從下到上，數值為45的整數倍，默認為0；
　　　　　　android:type 漸變的樣式 liner線性漸變 radial環形漸變 sweep
　　<solid > 設置填充
　　　　　　android:color  填充的顏色
　　<stroke >描邊
　　　　　　android:width 描邊的寬度
　　　　　　android:color 描邊的顏色
　　　　　　android:dashWidth 表示'-'橫線的寬度
　　　　　　android:dashGap 表示'-'橫線之間的距離
　　<corners >圓角
　　　　　　android:radius  圓角的半徑 值越大角越圓
　　　　　　android:topRightRadius 右上圓角半徑
　　　　　　android:bottomLeftRadius 右下圓角角半徑
　　　　　　android:topLeftRadius 左上圓角半徑
　　　　　　android:bottomRightRadius 左下圓角半徑

　　<padding >填充
　　　　　　android:bottom="1.0dip"  底部填充
　　　　　　android:left="1.0dip"  左邊填充
　　　　　　android:right="1.0dip" 右邊填充
　　　　　　android:top="0.0dip"  上面填充

 

二，<selector>屬性

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <transition android:opacity="transparent" android:paddingBottom="30dp" android:paddingLeft="10dp">
            <item android:drawable="@android:drawable/ic_delete" />
        </transition>
    </item>
    <item android:state_selected="false">
        <animated-rotate android:drawable="@android:drawable/dark_header" android:pivotX="30%" android:pivotY="70%" android:visible="true" />
    </item>
</selector>

如上所示，selector每一個item都會有狀態的設置，如果沒有設置就是默認狀態。而每一個item里面包含的則是對應該item狀態的效果。比如上面的transition就是在點擊的時候背景顯示ic_delete的圖片，而不點擊的時候，則是一個翻轉的動畫，很有意思。

由於item設置比較靈活，大家直接在編輯器的xml里面邊設置邊學習就可以了。主要就是關注一下shape標簽的各種state屬性設置，那些都是設置效果生效的狀態的值。

 

三，<layer-list>屬性

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

    <item android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/background_light" />
        </shape>
    </item>

    <item>
        <selector>
            <item android:state_pressed="true">
                <transition android:opacity="transparent" android:paddingBottom="30dp" android:paddingLeft="10dp">
                    <item android:drawable="@android:drawable/ic_delete" />
                </transition>
            </item>

            <item android:state_selected="false">
                <animated-rotate android:drawable="@android:drawable/dark_header" android:pivotX="30%" android:pivotY="70%" android:visible="true" />
            </item>
        </selector>
    </item>


</layer-list>

layer-list就更加靈活了，每一個item都是獨立存在的，都可以獨當一面，然后item可以包含任何的上面所說的效果設置！當然也包括layer-list自己本身。而item自身的屬性中有各種left，gravity，width等屬性跟我們平時在布局文件中使用的是一個意思，只是這次的對象是那些drawable圖層罷了。最后要注意的是由於是層疊效果，所以后面的總是覆蓋前面的。就比如上面的例子，如果把selector的屬性挪到前面，那么動畫就會被擋住。

 

結束語：紙上得來終覺淺，絕知此事要躬行～