Android Drawable 目录下的 XML 图形文件详解
文章目录
- 一、基本 XML Drawable 类型
- 1. 矢量图形 (VectorDrawable)
- 2. 形状图形 (ShapeDrawable)
- 3. 图层列表 (LayerDrawable)
- 4. 状态列表 (StateListDrawable)
- 5. 动画矢量图 (AnimatedVectorDrawable)
- 二、高级技巧与应用
- 1. 动态修改 Drawable 属性
- 2. 主题属性引用
- 3. 带缩放的矢量图
- 4. 复杂路径组合
- 三、最佳实践
- Android 九宫格图片(.9.png)详解
- 一、基本概念
- 1. 什么是九宫格图片
- 2. 文件特征
- 二、创建九宫格图片
- 1. 使用 Android Studio 创建
- 2. 手动创建
- 三、九宫格图片结构详解
- 1. 四条黑边的含义
- 2. 详细说明
- 四、实际示例
- 1. 示例图片分析
- 2. XML 中使用
- 五、制作技巧
- 1. 设计原则
- 2. 常见错误
- 六、高级应用
- 1. 动态修改九宫格图片
- 2. 代码创建 NinePatch
- 七、常见问题解决
- 1. 图片边缘出现黑线
- 2. 图片拉伸不均匀
- 3. 内容显示不全
- 4. Android Studio 提示 "9-patch image malformed"
- 八、最佳实践
- 九、与传统 PNG 对比
在 Android 开发中，res/drawable 目录下的 XML 文件是一种强大的图形资源定义方式，它们比位图资源更灵活、更易于维护。下面我将详细解析各种类型的 Drawable XML 文件及其使用方法。
一、基本 XML Drawable 类型
1. 矢量图形 (VectorDrawable)
文件位置：res/drawable/ 或 res/drawable-anydpi/
关键属性：
- width/height：矢量图的固有尺寸
- viewportWidth/viewportHeight：画布的逻辑尺寸
- pathData：定义形状的路径数据（SVG 格式）
- fillColor：填充颜色
- strokeColor：描边颜色
- strokeWidth：描边宽度
优点：
- 任意缩放不失真
- 文件体积小
- 可通过代码动态修改属性
2. 形状图形 (ShapeDrawable)
文件位置：res/drawable/
形状类型：
- rectangle（默认）：矩形
- oval：椭圆
- line：水平线
- ring：环形
子元素详解：
- ：圆角
- radius：统一圆角半径
- topLeftRadius等：各角单独设置
- ：渐变
- type：linear（线性）/radial（径向）/sweep（扫描）
- centerX/Y：渐变中心点（0-1）
- gradientRadius：径向渐变半径
- ：描边
- dashWidth：虚线段的长度
- dashGap：虚线间隔
- ：纯色填充
- ：内边距
- ：固有尺寸
3. 图层列表 (LayerDrawable)
特点：
- 按顺序堆叠多个 Drawable
- 每个 可以设置偏移量（left/right/top/bottom）
- 常用于创建复杂组合效果（如带阴影的按钮）
4. 状态列表 (StateListDrawable)
常用状态属性：
- state_pressed：按下状态
- state_focused：获得焦点
- state_selected：选中状态
- state_enabled：启用状态（false 表示禁用）
- state_checked：勾选状态（用于 CheckBox 等）
- state_activated：激活状态
重要规则：
- 状态匹配是第一个符合条件的项
- 最后一个 item 应作为默认状态（不指定任何状态）
5. 动画矢量图 (AnimatedVectorDrawable)
组成：
- 矢量图 (VectorDrawable)
- 动画定义 (ObjectAnimator)
- 动画矢量图 (AnimatedVectorDrawable)
示例：
使用方法：
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. 主题属性引用
3. 带缩放的矢量图
4. 复杂路径组合
三、最佳实践
-
命名规范：
- 按钮状态：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_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 像素的黑边
- 检查黑边是否连续
- 使用 Android Studio 的绘图工具修复
八、最佳实践
- 命名规范：使用 _9 后缀，如 btn_normal_9.png
- 最小尺寸：确保图片足够大以适应各种拉伸情况
- 测试验证：在不同分辨率和尺寸的设备上测试显示效果
- 备用方案：为不同屏幕密度提供多个版本的九宫格图片
- 替代方案：对于简单形状，考虑使用 VectorDrawable 或 ShapeDrawable
九、与传统 PNG 对比
特性 九宫格图片 普通 PNG 拉伸方式 智能拉伸 整体拉伸 文件大小 稍大 较小 边角保护 保持原样 会变形 适用场景 按钮/背景 图标/图片 制作复杂度 较高 低 九宫格图片是 Android 开发中处理可拉伸背景的强大工具，合理使用可以显著提升应用的界面适配性和视觉效果。
- ：圆角
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。
