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

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

 更新時間：2025年04月21日 09:50:34   作者：百錦再@新空間代碼工作室  
在?Android?開發(fā)中,res/drawable?目錄下的?XML?文件是一種強大的圖形資源定義方式,它們比位圖資源更靈活、更易于維護,下面我將詳細解析各種類型的?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>

關鍵屬性：

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

優(yōu)點：

  • 任意縮放不失真
  • 文件體積小
  • 可通過代碼動態(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（默認）：矩形
  • oval：橢圓
  • line：水平線
  • ring：環(huán)形

子元素詳解：

  • <corners>：圓角
    • radius：統(tǒng)一圓角半徑
    • topLeftRadius等：各角單獨設置
  • <gradient>：漸變
    • type：linear（線性）/radial（徑向）/sweep（掃描）
    • centerX/Y：漸變中心點（0-1）
    • gradientRadius：徑向漸變半徑
  • <stroke>：描邊
    • dashWidth：虛線段的長度
    • dashGap：虛線間隔
  • <solid>：純色填充
  • <padding>：內邊距
  • <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>
    
    <!-- 上層內容 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF6200EE" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

特點：

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

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>
    
    <!-- 默認狀態(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：獲得焦點
  • state_selected：選中狀態(tài)
  • state_enabled：啟用狀態(tài)（false 表示禁用）
  • state_checked：勾選狀態(tài)（用于 CheckBox 等）
  • state_activated：激活狀態(tài)

重要規(guī)則：

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

5. 動畫矢量圖 (AnimatedVectorDrawable)

組成：

  1. 矢量圖 (VectorDrawable)
  2. 動畫定義 (ObjectAnimator)
  3. 動畫矢量圖 (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();

二、高級技巧與應用

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. 復雜路徑組合

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

三、最佳實踐

  1. 命名規(guī)范：

    • 按鈕狀態(tài)：btn_[狀態(tài)]_[顏色]（如 btn_pressed_primary）
    • 圖標：ic_[名稱]（如 ic_search）
    • 背景：bg_[描述]（如 bg_rounded_corner）

  2. 性能優(yōu)化：

    • 優(yōu)先使用矢量圖（簡單圖標）
    • 復雜圖形使用 WebP 格式位圖
    • 避免在 StateListDrawable 中使用過多層級

  3. 適配技巧：

    • 為不同主題提供替代 Drawable（drawable-night/）
    • 為不同 API 級別提供兼容版本（drawable-v21/）

  4. 工具推薦：

    • Android Studio 的 Vector Asset Studio
    • SVG 轉 VectorDrawable 在線工具
    • Shape Shifter（高級矢量動畫工具）

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

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

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

一、基本概念

1. 什么是九宮格圖片

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

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

2. 文件特征

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

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

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

步驟：

  1. 右鍵點擊 res/drawable 目錄
  2. 選擇 New → Image Asset
  3. 在 Asset Type 中選擇 Nine-Patch
  4. 選擇源圖片并調整黑邊

2. 手動創(chuàng)建

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

三、九宮格圖片結構詳解

1. 四條黑邊的含義

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

2. 詳細說明

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

四、實際示例

1. 示例圖片分析

+-------------------------+
| 1px 黑邊標記區(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. 設計原則

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

2. 常見錯誤

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

六、高級應用

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

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

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

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

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

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

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

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

七、常見問題解決

1. 圖片邊緣出現黑線

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

2. 圖片拉伸不均勻

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

3. 內容顯示不全

  • 原因：內容區(qū)域（右/下邊）標記不正確
  • 解決：調整右/下邊黑邊標記

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

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

八、最佳實踐

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

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

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

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

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

相關文章

最新評論