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

道家人  论坛元老 | 5 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1807|帖子 1807|积分 5421

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
在 Android 开发中，res/drawable 目次下的 XML 文件是一种强大的图形资源定义方式，它们比位图资源更灵活、更易于维护。下面我将详细解析各种类型的 Drawable XML 文件及其利用方法。
一、根本 XML Drawable 类型

1. 矢量图形 (VectorDrawable)

文件位置：res/drawable/ 或 res/drawable-anydpi/
  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:width="24dp"
  3.     android:height="24dp"
  4.     android:viewportWidth="24.0"
  5.     android:viewportHeight="24.0">
  6.    
  7.     <path
  8.         android:fillColor="#FF000000"
  9.         android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/>
  10. </vector>
复制代码
关键属性：


  • width/height：矢量图的固有尺寸
  • viewportWidth/viewportHeight：画布的逻辑尺寸
  • pathData：定义外形的路径数据（SVG 格式）
  • fillColor：填充颜色
  • strokeColor：描边颜色
  • strokeWidth：描边宽度
优点：


  • 任意缩放不失真
  • 文件体积小
  • 可通过代码动态修改属性
2. 外形图形 (ShapeDrawable)

文件位置：res/drawable/
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:shape="rectangle">
  3.    
  4.     <corners android:radius="8dp" />
  5.     <gradient
  6.         android:angle="45"
  7.         android:startColor="#FF6200EE"
  8.         android:endColor="#FF03DAC5"
  9.         android:type="linear" />
  10.     <stroke
  11.         android:width="2dp"
  12.         android:color="#FFFFFF"
  13.         android:dashWidth="4dp"
  14.         android:dashGap="2dp" />
  15.     <size
  16.         android:width="200dp"
  17.         android:height="100dp" />
  18. </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)

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!-- 底层阴影 -->
  3.     <item android:top="4dp" android:left="4dp">
  4.         <shape android:shape="rectangle">
  5.             <solid android:color="#33000000" />
  6.             <corners android:radius="8dp" />
  7.         </shape>
  8.     </item>
  9.    
  10.     <!-- 上层内容 -->
  11.     <item>
  12.         <shape android:shape="rectangle">
  13.             <solid android:color="#FF6200EE" />
  14.             <corners android:radius="8dp" />
  15.         </shape>
  16.     </item>
  17. </layer-list>
复制代码
特点：


  • 按顺序堆叠多个 Drawable
  • 每个 <item> 可以设置偏移量（left/right/top/bottom）
  • 常用于创建复杂组合效果（如带阴影的按钮）
4. 状态列表 (StateListDrawable)

  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <!-- 按下状态 -->
  3.     <item android:state_pressed="true">
  4.         <shape android:shape="rectangle">
  5.             <solid android:color="#FF3700B3" />
  6.             <corners android:radius="8dp" />
  7.         </shape>
  8.     </item>
  9.    
  10.     <!-- 默认状态 -->
  11.     <item>
  12.         <shape android:shape="rectangle">
  13.             <solid android:color="#FF6200EE" />
  14.             <corners android:radius="8dp" />
  15.         </shape>
  16.     </item>
  17. </selector>
复制代码
常用状态属性：


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


  • 状态匹配是第一个符合条件的项
  • 最后一个 item 应作为默认状态（不指定任何状态）
5. 动画矢量图 (AnimatedVectorDrawable)

构成：

  • 矢量图 (VectorDrawable)
  • 动画定义 (ObjectAnimator)
  • 动画矢量图 (AnimatedVectorDrawable)
示例：
  1. <!-- res/drawable/avd_heart.xml -->
  2. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:drawable="@drawable/ic_heart">
  4.    
  5.     <target
  6.         android:name="heart"
  7.         android:animation="@animator/heart_beat" />
  8. </animated-vector>
复制代码
  1. <!-- res/drawable/ic_heart.xml -->
  2. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:width="24dp"
  4.     android:height="24dp"
  5.     android:viewportWidth="24.0"
  6.     android:viewportHeight="24.0">
  7.    
  8.     <path
  9.         android:name="heart"
  10.         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"
  11.         android:fillColor="#FF0000" />
  12. </vector>
复制代码
  1. <!-- res/animator/heart_beat.xml -->
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <objectAnimator
  4.         android:propertyName="scaleX"
  5.         android:duration="300"
  6.         android:valueFrom="1"
  7.         android:valueTo="1.2"
  8.         android:valueType="floatType"
  9.         android:repeatCount="1"
  10.         android:repeatMode="reverse" />
  11.    
  12.     <objectAnimator
  13.         android:propertyName="scaleY"
  14.         android:duration="300"
  15.         android:valueFrom="1"
  16.         android:valueTo="1.2"
  17.         android:valueType="floatType"
  18.         android:repeatCount="1"
  19.         android:repeatMode="reverse" />
  20. </set>
复制代码
利用方法：
  1. ImageButton heartButton = findViewById(R.id.heart_button);
  2. AnimatedVectorDrawableCompat avd = AnimatedVectorDrawableCompat.create(
  3.     this, R.drawable.avd_heart);
  4. heartButton.setImageDrawable(avd);
  5. avd.start();
复制代码
二、高级本领与应用

1. 动态修改 Drawable 属性

  1. // 修改矢量图颜色
  2. VectorDrawableCompat vector = VectorDrawableCompat.create(
  3.     getResources(), R.drawable.ic_vector, getTheme());
  4. vector.setTint(ContextCompat.getColor(this, R.color.new_color));
  6. // 修改形状圆角
  7. GradientDrawable shape = (GradientDrawable) view.getBackground();
  8. shape.setCornerRadii(new float[]{
  9.     0, 0,          // 左上
  10.     20, 20,        // 右上
  11.     40, 40,        // 右下
  12.     0, 0           // 左下
  13. });
复制代码
2. 主题属性引用

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <solid android:color="?attr/colorPrimary" />
  3.     <stroke
  4.         android:width="1dp"
  5.         android:color="?attr/colorPrimaryDark" />
  6. </shape>
复制代码
3. 带缩放的矢量图

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:width="24dp"
  3.     android:height="24dp"
  4.     android:viewportWidth="24.0"
  5.     android:viewportHeight="24.0">
  6.    
  7.     <group
  8.         android:name="rotationGroup"
  9.         android:pivotX="12"
  10.         android:pivotY="12"
  11.         android:rotation="0">
  12.         
  13.         <path
  14.             android:name="v"
  15.             android:fillColor="#000000"
  16.             android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
  17.     </group>
  18. </vector>
复制代码
4. 复杂路径组合

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:width="24dp"
  3.     android:height="24dp"
  4.     android:viewportWidth="24.0"
  5.     android:viewportHeight="24.0">
  6.    
  7.     <path
  8.         android:name="circle"
  9.         android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
  10.         android:fillColor="#4CAF50" />
  11.    
  12.     <path
  13.         android:name="check"
  14.         android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"
  15.         android:fillColor="#FFFFFF" />
  16. </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. 四条黑边的寄义

  1. +---------------------+
  2. | 上边：水平拉伸区域    |
  3. | 左边：垂直拉伸区域    |
  4. | 右边：垂直内容区域    |
  5. | 下边：水平内容区域    |
  6. +---------------------+
复制代码
2. 详细阐明

边沿作用标志规则上边定义水平拉伸地区黑色像素表示可拉伸部分，透明表示不拉伸左边定义垂直拉伸地区黑色像素表示可拉伸部分，透明表示不拉伸右边定义垂直内容地区（内边距）黑色像素表示内容边界下边定义水平内容地区（内边距）黑色像素表示内容边界 四、实际示例

1. 示例图片分析

  1. +-------------------------+
  2. | 1px 黑边标记区域          |
  3. |                         |
  4. |    +---------------+    |
  5. |    | 角区域(不拉伸) |    |
  6. |    | 边区域(拉伸)   |    |
  7. |    | 中心区域(拉伸) |    |
  8. |    +---------------+    |
  9. |                         |
  10. +-------------------------+
复制代码
2. XML 中利用

  1. <Button
  2.     android:layout_width="wrap_content"
  3.     android:layout_height="wrap_content"
  4.     android:background="@drawable/button_background" />
复制代码
此中 button_background.9.png 是九宫格图片。
五、制作本领

1. 设计原则



  • 四个角地区应包含不希望变形的内容（如圆角、装饰元素）
  • 边地区应利用可重复的简单图案
  • 中心地区可以是纯色或简单纹理
2. 常见错误



  • 忘记添加 1 像素的黑边
  • 黑边标志不一连
  • 拉伸地区标志过大导致图片变形显着
  • 内容地区标志不准确导致笔墨错位
六、高级应用

1. 动态修改九宫格图片

  1. // 获取九宫格图片
  2. NinePatchDrawable npd = (NinePatchDrawable) getResources()
  3.     .getDrawable(R.drawable.button_background);
  5. // 修改颜色滤镜
  6. npd.setColorFilter(new PorterDuffColorFilter(
  7.     Color.RED, PorterDuff.Mode.SRC_IN));
  9. // 应用到视图
  10. button.setBackground(npd);
复制代码
2. 代码创建 NinePatch

  1. // 加载位图
  2. Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
  3.     R.drawable.button_background);
  5. // 获取 NinePatch 块数据
  6. byte[] chunk = bitmap.getNinePatchChunk();
  8. // 创建 NinePatchDrawable
  9. NinePatchDrawable npd = new NinePatchDrawable(
  10.     getResources(),
  11.     bitmap,
  12.     chunk,
  13.     new Rect(),
  14.     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 开发中处理可拉伸背景的强大工具，公道利用可以明显提升应用的界面适配性和视觉效果。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

道家人

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表