Android Drawable目录下的XML图形文件详解_Android

一、基本 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：描边宽度

优点：

任意缩放不失真
文件体积小
可通过代码动态修改属性

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：环形

子元素详解：

<corners>：圆角
- radius：统一圆角半径
- 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）
常用于创建复杂组合效果（如带阴影的按钮）

4. 状态列表 (statelistdrawable)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按下状态 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#ff3700b3" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    
    <!-- 默认状态 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ff6200ee" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

常用状态属性：

state_pressed：按下状态
state_focused：获得焦点
state_selected：选中状态
state_enabled：启用状态（false 表示禁用）
state_checked：勾选状态（用于 checkbox 等）
state_activated：激活状态

重要规则：

状态匹配是第一个符合条件的项
最后一个 item 应作为默认状态（不指定任何状态）

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();

二、高级技巧与应用

1. 动态修改 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>

三、最佳实践

命名规范：
- 按钮状态：btn_[状态]_[颜色]（如 btn_pressed_primary）
- 图标：ic_[名称]（如 ic_search）
- 背景：bg_[描述]（如 bg_rounded_corner）
性能优化：
- 优先使用矢量图（简单图标）
- 复杂图形使用 webp 格式位图
- 避免在 statelistdrawable 中使用过多层级
适配技巧：
- 为不同主题提供替代 drawable（drawable-night/）
- 为不同 api 级别提供兼容版本（drawable-v21/）
工具推荐：
- android studio 的 vector asset studio
- svg 转 vectordrawable 在线工具
- shape shifter（高级矢量动画工具）

通过合理使用这些 xml drawable 资源，你可以创建出既美观又高效的界面元素，同时保持应用的轻量化和可维护性。

android 九宫格图片(.9.png)详解

九宫格图片（ninepatch drawable，文件扩展名为 .9.png）是 android 平台上一种特殊的 png 图片格式，它能够智能地拉伸图片而不会使边角变形。

一、基本概念

1. 什么是九宫格图片

九宫格图片将一张图片划分为 9 个部分：

4个角（不拉伸）
4条边（单向拉伸）
1个中心区域（双向拉伸）

2. 文件特征

文件扩展名必须是 .9.png
图片四周有 1 像素的黑边（定义拉伸区域和内容区域）
实际显示时黑边不会显示

二、创建九宫格图片

1. 使用 android studio 创建

步骤：

右键点击 res/drawable 目录
选择 new → image asset
在 asset type 中选择 nine-patch
选择源图片并调整黑边

2. 手动创建

准备普通 png 图片
使用图片编辑工具（如 photoshop）添加 1 像素的黑边
按照规则标记拉伸区域和内容区域
保存为 .9.png 格式

三、九宫格图片结构详解

1. 四条黑边的含义

+---------------------+
| 上边：水平拉伸区域    |
| 左边：垂直拉伸区域    |
| 右边：垂直内容区域    |
| 下边：水平内容区域    |
+---------------------+

2. 详细说明

边缘	作用	标记规则
上边	定义水平拉伸区域	黑色像素表示可拉伸部分，透明表示不拉伸
左边	定义垂直拉伸区域	黑色像素表示可拉伸部分，透明表示不拉伸
右边	定义垂直内容区域（内边距）	黑色像素表示内容边界
下边	定义水平内容区域（内边距）	黑色像素表示内容边界

四、实际示例

1. 示例图片分析

+-------------------------+
| 1px 黑边标记区域          |
|                         |
|    +---------------+    |
|    | 角区域(不拉伸) |    |
|    | 边区域(拉伸)   |    |
|    | 中心区域(拉伸) |    |
|    +---------------+    |
|                         |
+-------------------------+

2. xml 中使用

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

其中 button_background.9.png 是九宫格图片。

五、制作技巧

1. 设计原则

四个角区域应包含不希望变形的内容（如圆角、装饰元素）
边区域应使用可重复的简单图案
中心区域可以是纯色或简单纹理

2. 常见错误

忘记添加 1 像素的黑边
黑边标记不连续
拉伸区域标记过大导致图片变形明显
内容区域标记不正确导致文字错位

六、高级应用

1. 动态修改九宫格图片

// 获取九宫格图片
ninepatchdrawable npd = (ninepatchdrawable) getresources()
    .getdrawable(r.drawable.button_background);

// 修改颜色滤镜
npd.setcolorfilter(new porterduffcolorfilter(
    color.red, porterduff.mode.src_in));

// 应用到视图
button.setbackground(npd);

2. 代码创建 ninepatch

// 加载位图
bitmap bitmap = bitmapfactory.decoderesource(getresources(), 
    r.drawable.button_background);

// 获取 ninepatch 块数据
byte[] chunk = bitmap.getninepatchchunk();

// 创建 ninepatchdrawable
ninepatchdrawable npd = new ninepatchdrawable(
    getresources(), 
    bitmap, 
    chunk, 
    new rect(), 
    null);

七、常见问题解决

1. 图片边缘出现黑线

原因：黑边标记被错误地包含在显示区域
解决：确保只在最外 1 像素标记

2. 图片拉伸不均匀

原因：拉伸区域标记不正确
解决：调整黑边标记，确保可拉伸区域合理

3. 内容显示不全

原因：内容区域（右/下边）标记不正确
解决：调整右/下边黑边标记

4. android studio 提示 “9-patch image malformed”

原因：九宫格图片格式错误
解决：
1. 检查是否有 1 像素的黑边
2. 检查黑边是否连续
3. 使用 android studio 的绘图工具修复

八、最佳实践

命名规范：使用 _9 后缀，如 btn_normal_9.png
最小尺寸：确保图片足够大以适应各种拉伸情况
测试验证：在不同分辨率和尺寸的设备上测试显示效果
备用方案：为不同屏幕密度提供多个版本的九宫格图片
替代方案：对于简单形状，考虑使用 vectordrawable 或 shapedrawable

九、与传统 png 对比

特性	九宫格图片	普通 png
拉伸方式	智能拉伸	整体拉伸
文件大小	稍大	较小
边角保护	保持原样	会变形
适用场景	按钮/背景	图标/图片
制作复杂度	较高	低

九宫格图片是 android 开发中处理可拉伸背景的强大工具，合理使用可以显著提升应用的界面适配性和视觉效果。

以上就是android drawable目录下的xml图形文件详解的详细内容，更多关于android drawable xml图形文件的资料请关注代码网其它相关文章！


验证码：

Android Drawable目录下的XML图形文件详解

2025年04月24日 • Android •我要评论