Android中Bitmap替换Vector绘图及相关属性使用问题

背景与资源文件 #

在Android Studio中从SVG生成矢量图ic_cercle.xml，并通过ic_myimage.xml引用；现计划用288x288dp的PNG位图ic_cercle_png替换矢量图，已创建ic_myimage_png.xml。相关资源代码如下：

ic_cercle.xml（矢量图） #

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="288dp"
    android:height="288dp"
    android:viewportWidth="76.2"
    android:viewportHeight="76.2">
  <path
      android:pathData="M38.1,38.1m-25.1354,0a25.1354,25.1354 0,1 1,50.2708 0a25.1354,25.1354 0,1 1,-50.2708 0"
      android:strokeWidth="0.529167"
      android:fillColor="#ff0000"
      android:strokeColor="#000000"/>
</vector>

ic_myimage.xml（矢量图引用） #

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <item android:drawable="@color/color_background" />
    <item
        android:drawable="@drawable/ic_cercle"
        android:gravity="center"/>
</layer-list>

ic_myimage_png.xml（位图引用模板） #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/color_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/ic_cercle_png"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

问题解答 #

1. 如何通过位图实现原矢量图的288x288dp居中显示效果？ #

• 第一步：给PNG资源做多分辨率适配，在对应密度目录（mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi）放置匹配尺寸的图片：
  • mdpi: 288px × 288px
  • hdpi: 432px × 432px（288×1.5）
  • xhdpi: 576px × 576px（288×2）
  • xxhdpi: 864px × 864px（288×3）
  • xxxhdpi: 1152px × 1152px（288×4）
• 第二步：修改ic_myimage_png.xml，给包含<bitmap>的<item>标签指定android:width和android:height为288dp，保留android:gravity="center"，最终代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/color_background"/>
  </item>
  <item
      android:width="288dp"
      android:height="288dp"
      android:gravity="center">
    <bitmap
        android:src="@drawable/ic_cercle_png"
        android:tileMode="disabled"/>
  </item>
</layer-list>

这样就能实现和原矢量图一致的288x288dp居中显示效果。

2. 能否为位图添加android:width、android:height、android:viewportWidth和android:viewportHeight属性？ #

• <bitmap>标签本身不支持android:viewportWidth和android:viewportHeight，这两个是矢量图<vector>的专属属性；
• <bitmap>也不能直接设置android:width和android:height，但可以通过它的父标签<item>来指定这两个属性，以此约束位图的显示尺寸，具体方式见问题1的修改示例。

3. android:viewportWidth和android:viewportHeight是什么？绘制位图时是否需要使用它们？ #

• android:viewportWidth和android:viewportHeight是矢量图（Vector Drawable）的核心属性，用来定义矢量图的逻辑画布坐标系尺寸（单位为抽象单位，对应SVG的viewBox）。矢量图的路径数据都基于这个坐标系绘制，系统会根据android:width/android:height的设置，将矢量路径从viewport坐标系缩放至目标显示尺寸；
• 绘制位图时不需要使用这两个属性。位图是基于像素的静态图像，其显示尺寸由资源本身的像素密度、父容器约束或<item>标签的width/height属性共同决定，与viewport坐标系无关。

内容的提问来源于stack exchange，提问作者Red Monkey