Android?Drawable目錄下的XML圖形文件詳解

更新時間：2025年04月21日 09:50:34 作者：百錦再@新空間代碼工作室

在?Android?開發(fā)中,res/drawable?目錄下的?XML?文件是一種強(qiáng)大的圖形資源定義方式,它們比位圖資源更靈活、更易于維護(hù),下面我將詳細(xì)解析各種類型的?Drawable?XML?文件及其使用方法,需要的朋友可以參考下

一、基本 XML Drawable 類型

1. 矢量圖形 (VectorDrawable)

文件位置：res/drawable/ 或 res/drawable-anydpi/

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
</vector>

關(guān)鍵屬性：

width/height：矢量圖的固有尺寸
viewportWidth/viewportHeight：畫布的邏輯尺寸
pathData：定義形狀的路徑數(shù)據(jù)（SVG 格式）
fillColor：填充顏色
strokeColor：描邊顏色
strokeWidth：描邊寬度

優(yōu)點(diǎn)：

任意縮放不失真
文件體積小
可通過代碼動態(tài)修改屬性

2. 形狀圖形 (ShapeDrawable)

文件位置：res/drawable/

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners android:radius="8dp" />
    <gradient
        android:angle="45"
        android:startColor="#FF6200EE"
        android:endColor="#FF03DAC5"
        android:type="linear" />
    <stroke
        android:width="2dp"
        android:color="#FFFFFF"
        android:dashWidth="4dp"
        android:dashGap="2dp" />
    <size
        android:width="200dp"
        android:height="100dp" />
</shape>

形狀類型：

rectangle（默認(rèn)）：矩形
oval：橢圓
line：水平線
ring：環(huán)形

子元素詳解：

<corners>：圓角
- radius：統(tǒng)一圓角半徑
- topLeftRadius等：各角單獨(dú)設(shè)置
<gradient>：漸變
- type：linear（線性）/radial（徑向）/sweep（掃描）
- centerX/Y：漸變中心點(diǎn)（0-1）
- gradientRadius：徑向漸變半徑
<stroke>：描邊
- dashWidth：虛線段的長度
- dashGap：虛線間隔
<solid>：純色填充
<padding>：內(nèi)邊距
<size>：固有尺寸

3. 圖層列表 (LayerDrawable)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底層陰影 -->
    <item android:top="4dp" android:left="4dp">
        <shape android:shape="rectangle">
            <solid android:color="#33000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    
    <!-- 上層內(nèi)容 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF6200EE" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

特點(diǎn)：

按順序堆疊多個 Drawable
每個 <item> 可以設(shè)置偏移量（left/right/top/bottom）
常用于創(chuàng)建復(fù)雜組合效果（如帶陰影的按鈕）

4. 狀態(tài)列表 (StateListDrawable)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下狀態(tài) -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#FF3700B3" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    
    <!-- 默認(rèn)狀態(tài) -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF6200EE" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

常用狀態(tài)屬性：

state_pressed：按下狀態(tài)
state_focused：獲得焦點(diǎn)
state_selected：選中狀態(tài)
state_enabled：啟用狀態(tài)（false 表示禁用）
state_checked：勾選狀態(tài)（用于 CheckBox 等）
state_activated：激活狀態(tài)

重要規(guī)則：

狀態(tài)匹配是第一個符合條件的項(xiàng)
最后一個 item 應(yīng)作為默認(rèn)狀態(tài)（不指定任何狀態(tài)）

5. 動畫矢量圖 (AnimatedVectorDrawable)

組成：

矢量圖 (VectorDrawable)
動畫定義 (ObjectAnimator)
動畫矢量圖 (AnimatedVectorDrawable)

示例：

<!-- res/drawable/avd_heart.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_heart">
    
    <target
        android:name="heart"
        android:animation="@animator/heart_beat" />
</animated-vector>

<!-- res/drawable/ic_heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    
    <path
        android:name="heart"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"
        android:fillColor="#FF0000" />
</vector>

<!-- res/animator/heart_beat.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="scaleX"
        android:duration="300"
        android:valueFrom="1"
        android:valueTo="1.2"
        android:valueType="floatType"
        android:repeatCount="1"
        android:repeatMode="reverse" />
    
    <objectAnimator
        android:propertyName="scaleY"
        android:duration="300"
        android:valueFrom="1"
        android:valueTo="1.2"
        android:valueType="floatType"
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>

使用方法：

ImageButton heartButton = findViewById(R.id.heart_button);
AnimatedVectorDrawableCompat avd = AnimatedVectorDrawableCompat.create(
    this, R.drawable.avd_heart);
heartButton.setImageDrawable(avd);
avd.start();

二、高級技巧與應(yīng)用

1. 動態(tài)修改 Drawable 屬性

// 修改矢量圖顏色
VectorDrawableCompat vector = VectorDrawableCompat.create(
    getResources(), R.drawable.ic_vector, getTheme());
vector.setTint(ContextCompat.getColor(this, R.color.new_color));

// 修改形狀圓角
GradientDrawable shape = (GradientDrawable) view.getBackground();
shape.setCornerRadii(new float[]{
    0, 0,          // 左上
    20, 20,        // 右上
    40, 40,        // 右下
    0, 0           // 左下
});

2. 主題屬性引用

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="?attr/colorPrimary" />
    <stroke 
        android:width="1dp"
        android:color="?attr/colorPrimaryDark" />
</shape>

3. 帶縮放的矢量圖

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    
    <group
        android:name="rotationGroup"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="0">
        
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
    </group>
</vector>

4. 復(fù)雜路徑組合

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    
    <path
        android:name="circle"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:fillColor="#4CAF50" />
    
    <path
        android:name="check"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"
        android:fillColor="#FFFFFF" />
</vector>

三、最佳實(shí)踐

命名規(guī)范：
- 按鈕狀態(tài)：btn_[狀態(tài)]_[顏色]（如 btn_pressed_primary）
- 圖標(biāo)：ic_[名稱]（如 ic_search）
- 背景：bg_[描述]（如 bg_rounded_corner）
性能優(yōu)化：
- 優(yōu)先使用矢量圖（簡單圖標(biāo)）
- 復(fù)雜圖形使用 WebP 格式位圖
- 避免在 StateListDrawable 中使用過多層級
適配技巧：
- 為不同主題提供替代 Drawable（drawable-night/）
- 為不同 API 級別提供兼容版本（drawable-v21/）
工具推薦：
- Android Studio 的 Vector Asset Studio
- SVG 轉(zhuǎn) VectorDrawable 在線工具
- Shape Shifter（高級矢量動畫工具）

通過合理使用這些 XML Drawable 資源，你可以創(chuàng)建出既美觀又高效的界面元素，同時保持應(yīng)用的輕量化和可維護(hù)性。

Android 九宮格圖片(.9.png)詳解

九宮格圖片（NinePatch Drawable，文件擴(kuò)展名為 .9.png）是 Android 平臺上一種特殊的 PNG 圖片格式，它能夠智能地拉伸圖片而不會使邊角變形。

一、基本概念

1. 什么是九宮格圖片

九宮格圖片將一張圖片劃分為 9 個部分：

4個角（不拉伸）
4條邊（單向拉伸）
1個中心區(qū)域（雙向拉伸）

2. 文件特征

文件擴(kuò)展名必須是 .9.png
圖片四周有 1 像素的黑邊（定義拉伸區(qū)域和內(nèi)容區(qū)域）
實(shí)際顯示時黑邊不會顯示

二、創(chuàng)建九宮格圖片

1. 使用 Android Studio 創(chuàng)建

步驟：

右鍵點(diǎn)擊 res/drawable 目錄
選擇 New → Image Asset
在 Asset Type 中選擇 Nine-Patch
選擇源圖片并調(diào)整黑邊

2. 手動創(chuàng)建

準(zhǔn)備普通 PNG 圖片
使用圖片編輯工具（如 Photoshop）添加 1 像素的黑邊
按照規(guī)則標(biāo)記拉伸區(qū)域和內(nèi)容區(qū)域
保存為 .9.png 格式

三、九宮格圖片結(jié)構(gòu)詳解

1. 四條黑邊的含義

+---------------------+
| 上邊：水平拉伸區(qū)域    |
| 左邊：垂直拉伸區(qū)域    |
| 右邊：垂直內(nèi)容區(qū)域    |
| 下邊：水平內(nèi)容區(qū)域    |
+---------------------+

2. 詳細(xì)說明

邊緣	作用	標(biāo)記規(guī)則
上邊	定義水平拉伸區(qū)域	黑色像素表示可拉伸部分，透明表示不拉伸
左邊	定義垂直拉伸區(qū)域	黑色像素表示可拉伸部分，透明表示不拉伸
右邊	定義垂直內(nèi)容區(qū)域（內(nèi)邊距）	黑色像素表示內(nèi)容邊界
下邊	定義水平內(nèi)容區(qū)域（內(nèi)邊距）	黑色像素表示內(nèi)容邊界

四、實(shí)際示例

1. 示例圖片分析

+-------------------------+
| 1px 黑邊標(biāo)記區(qū)域          |
|                         |
|    +---------------+    |
|    | 角區(qū)域(不拉伸) |    |
|    | 邊區(qū)域(拉伸)   |    |
|    | 中心區(qū)域(拉伸) |    |
|    +---------------+    |
|                         |
+-------------------------+

2. XML 中使用

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background" />

其中 button_background.9.png 是九宮格圖片。

五、制作技巧

1. 設(shè)計(jì)原則

四個角區(qū)域應(yīng)包含不希望變形的內(nèi)容（如圓角、裝飾元素）
邊區(qū)域應(yīng)使用可重復(fù)的簡單圖案
中心區(qū)域可以是純色或簡單紋理

2. 常見錯誤

忘記添加 1 像素的黑邊
黑邊標(biāo)記不連續(xù)
拉伸區(qū)域標(biāo)記過大導(dǎo)致圖片變形明顯
內(nèi)容區(qū)域標(biāo)記不正確導(dǎo)致文字錯位

六、高級應(yīng)用

1. 動態(tài)修改九宮格圖片

// 獲取九宮格圖片
NinePatchDrawable npd = (NinePatchDrawable) getResources()
    .getDrawable(R.drawable.button_background);

// 修改顏色濾鏡
npd.setColorFilter(new PorterDuffColorFilter(
    Color.RED, PorterDuff.Mode.SRC_IN));

// 應(yīng)用到視圖
button.setBackground(npd);

2. 代碼創(chuàng)建 NinePatch

// 加載位圖
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 
    R.drawable.button_background);

// 獲取 NinePatch 塊數(shù)據(jù)
byte[] chunk = bitmap.getNinePatchChunk();

// 創(chuàng)建 NinePatchDrawable
NinePatchDrawable npd = new NinePatchDrawable(
    getResources(), 
    bitmap, 
    chunk, 
    new Rect(), 
    null);

七、常見問題解決

1. 圖片邊緣出現(xiàn)黑線

原因：黑邊標(biāo)記被錯誤地包含在顯示區(qū)域
解決：確保只在最外 1 像素標(biāo)記

2. 圖片拉伸不均勻

原因：拉伸區(qū)域標(biāo)記不正確
解決：調(diào)整黑邊標(biāo)記，確?？衫靺^(qū)域合理

3. 內(nèi)容顯示不全

原因：內(nèi)容區(qū)域（右/下邊）標(biāo)記不正確
解決：調(diào)整右/下邊黑邊標(biāo)記

4. Android Studio 提示 “9-patch image malformed”

原因：九宮格圖片格式錯誤
解決：
1. 檢查是否有 1 像素的黑邊
2. 檢查黑邊是否連續(xù)
3. 使用 Android Studio 的繪圖工具修復(fù)

八、最佳實(shí)踐

命名規(guī)范：使用 _9 后綴，如 btn_normal_9.png
最小尺寸：確保圖片足夠大以適應(yīng)各種拉伸情況
測試驗(yàn)證：在不同分辨率和尺寸的設(shè)備上測試顯示效果
備用方案：為不同屏幕密度提供多個版本的九宮格圖片
替代方案：對于簡單形狀，考慮使用 VectorDrawable 或 ShapeDrawable

九、與傳統(tǒng) PNG 對比

特性	九宮格圖片	普通 PNG
拉伸方式	智能拉伸	整體拉伸
文件大小	稍大	較小
邊角保護(hù)	保持原樣	會變形
適用場景	按鈕/背景	圖標(biāo)/圖片
制作復(fù)雜度	較高	低

九宮格圖片是 Android 開發(fā)中處理可拉伸背景的強(qiáng)大工具，合理使用可以顯著提升應(yīng)用的界面適配性和視覺效果。

以上就是Android Drawable目錄下的XML圖形文件詳解的詳細(xì)內(nèi)容，更多關(guān)于Android Drawable XML圖形文件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片