本章內容的項目實戰呢，是在美化BeatBox應用，由于沒有實踐此應用，那以Demo形式來總結此章的核心知識點吧。

凡是要在屏幕上繪制的東西都可以叫作drawable，比如抽象圖形、Drawable類的子類、位圖圖像等。用來封裝圖片的BitmapDrawable也是一種drawable。state list drawable、shape drawable 和 layer list drawable 統稱為XML drawable。

1. shape drawable

ShapeDrawable可以把按鈕變成圓形。XML drawable和屏幕像素密度無關，無需考慮創建特定像素密度目錄，直接放入drawable文件夾即可。

button_beat_box_normal.xml（書中例子）

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
</shape>

截圖取自Demo

截圖取自Demo

1. shape 圖形形狀
2. corners 圓角標簽（指定長方形四角的圓滑度）
   • bottomLeftRadius 左下角
   • bottomRightRadius 右下角
   • topLeftRadius 左上角
   • topRightRadius 右上角
   • radius 是四個角，設置了這個就不需要設置上面的四個了，但是它的優先級比較低， 會被上面的設置覆蓋。
3. gradient 階梯漸變標簽
   • angle 是顏色變換的角度，默認是0， 取值必須是45的倍數， 0： 是顏色從左邊到右邊， 90：是顏色從底部到頂部
   • startColor centerColor endColor : 開始的顏色，中間的顏色， 結束的顏色
   • centerX centerY是指定位置坐標，取值是0.0f ~ 1.0f 之間，例如： android:centerX="0.5f" 表示X方向的中間位置
   • type 顏色漸變的類型， 取值類型有三種：linear/radial/sweep
   • linear 線性漸變，就是顏色從左往右， 從下往上
   • radial 放射漸變， 例如：從一個圓中心到圓的邊緣變化
   • sweep 掃描式漸變， 類似雷達掃描的那種圖形
   • gradientRadius 和android:type=”radial”一起連用，配置shape圖片的半徑
4. padding 邊距標簽（設置控件中(文字)內容與shape圖片邊框的距離，bottom 底部距離，left 左邊距離，right 右邊距離，top 頂部距離）
5. size 大小標簽（shape圖形的寬度和高度，這里一般不用設置，它的優先級沒有控件的優先級大）
6. solid 背景標簽（stroke標簽中如果不指定color的顏色， 則默認是黑色，solid標簽會和gradient標簽沖突, 會覆蓋gradient配置的顏色）
7. stroke 邊框標簽 （給shape圖形設置邊框， 設置邊框的寬度， 顏色，實現還是虛線， 以及虛線的間隔大小）
   • width 邊框線的寬度
   • color 邊框線的顏色
   • dashGap 虛線間隔的長度
   • dashWidth 虛線中實線的長度

shape圖形：

1. rectangle 長方形/默認是長方形
2. oval 橢圓
3. line 線（line形狀下，solid標簽下的color會無效）
4. ring 環形 （innerRadius——中間圓圈的半徑；innerRadiusRatio——如果和innerRadius同時存在, innerRadiusRatio無效，是一個比率: shape圖片寬度/內半徑, 默認是9；thickness——圓環的厚度，整的shape圖片的半徑減去內圓的半徑；thicknessRatio——同樣如果和thickness同時存在，thicknessRatio無效， 也是一個比率: shape圖片寬度/圓環厚度，默認值是3；useLevel—— 一般使用false）

2. state list drawable

這里例子就是在完善上一個知識點的按鈕按下狀態的切換了，除了按下狀態，state list drawable還支持禁用、聚焦以及激活等狀態。

button_beat_box_pressed.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
   <solid android:color="@color/colorPrimary" />
</shape>

button_beat_box.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_beat_box_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_beat_box_normal" />
</selector>

截圖取自Demo

按下后的效果：

截圖取自Demo

當然，state list drawable還支持禁用、聚焦以及激活等狀態。

3. layer list drawable

layer list drawable能讓兩個XML drawable合二為一，現在為按下狀態的添加一個深色的圓環。

button_beat_box_pressed.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="4dp"
                android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
</layer-list>

按下效果：

截圖取自Demo

深入學習：為什么要用XML drawable

• 方便靈活、用法多樣、易于更新維護，搭配shape drawable 和 layer list drawable可作出復雜的背景圖，配色簡單。
• XML drawable 獨立于屏幕像素密度，直接定義在drawable目錄中，不需要加屏幕密度資源修飾符，不需要準備多個版本以適配更多設備。

深入學習：使用 9-patch 圖像

（比如說聊天界面的氣泡框，會用到這種圖片，解決了不同長度圖片或文字可能被拉伸的問題）

• 9-patch 圖像是一種特別處理過的文件，讓Android知道圖像的哪些部分是可以拉伸的。
• 9-patch 圖像分成 3 x 3 的網格，即由9部分或者9 patch組成的網格。網格角落部分不會被縮放。邊緣部分的4個patch只按一個維度縮放，而中間部分則按兩個維度縮放。

截圖取于網上

• 9-patch 圖像文件名以 .9.png結尾，圖邊緣具有1像素寬度的邊框。

• 任意圖形編輯器都可以用來創建 9-patch 圖像，Android SDK自帶的draw9patch工具更方便，工具地址：SDK安裝目錄下的tools中，找到打開即可。

  
  
  截圖取自自身電腦
  截圖取自自身電腦
• 9-patch工具中，把圖像頂部和左邊填充為黑色，以標記圖像的可伸縮區域。 底部和右邊定義可選drawable區域，通常是繪制內容，比如說文字的地方，若不標記drawable區域，則默認與可拉伸區域保持一致。
• Android Studio內置有9-patch編輯器，可以直接在項目中把圖片轉換為9-patch圖，先重命名，然后打開，就可以自行去設置.9圖了。

1

2

3

這個非常實用！

深入學習：使用Mipmap圖像

推薦把應用啟動器圖標放在mipmap目錄中，其他圖片都放在drawable目錄中。

谷歌官方：

• drawable/
  For bitmap files (PNG, JPEG, or GIF), 9-Patch image files, and XML files that describe Drawable shapes or Drawable objects that contain multiple states (normal, pressed, or focused). See the Drawable resource type.
• mipmap/
  For app launcher icons. The Android system retains the resources in this folder (and density-specific folders such as mipmap-xxxhdpi) regardless of the screen resolution of the device where your app is installed. This behavior allows launcher apps to pick the best resolution icon for your app to display on the home screen. For more information about using the mipmap folders, see Managing Launcher Icons as mipmap Resources.

google說圖片放入mipmap系統會在縮放上提供一定的性能優化，使用上來說，drawable和mipmap上放普通圖片區別也不大。原來我們把項目中用到的png、jpeg圖片還有xml文件都是放在drawable中，顯得還是很雜亂的，找個圖片多難哇~ 所以，建議就把icon圖片放mipmap，然后xml就放drawable，這樣不錯的。

建議尺寸：

截圖取自網絡

參考里面的dpi范圍-密度表格：

截取自網絡