android如何使用矢量图（svg）资源

其他 2025-04-09 18:14
0 阅读

一 viewportWidth和viewportHeight含义

viewportWidth 和 viewportHeight 控制的是矢量图的绘制空间大小，即图形的虚拟坐标系统的大小。

详细解释：

在矢量图中，图形的元素（如路径、形状等）是根据一个坐标系统来绘制的。这个坐标系统定义了矢量图的“工作空间”，并且**viewportWidth** 和 viewportHeight 就是用来设置这个工作空间的尺寸的。

  • viewportWidth：定义了矢量图形的虚拟宽度（单位是图形坐标系的单位，而不是像素）。这表示矢量图形设计时的宽度单位，可以理解为设计图形时使用的“画布”宽度。

  • viewportHeight：定义了矢量图形的虚拟高度，类似地，表示矢量图形设计时的高度单位。

例如：

假设你设置了以下属性：

android:viewportWidth="24.0"
android:viewportHeight="24.0"

这表示该矢量图形的绘制空间是一个 24x24 的单位空间。所有的路径、形状和元素都会在这个 24x24 单位的坐标系统内进行定义和绘制。

  • 如果你的路径数据（android:pathData）是在这个 24x24 的坐标系统下设计的，那么路径会被缩放到这个虚拟坐标系中，适应这个尺寸。
  • 通过这些坐标，你可以自由地控制图形元素在空间中的位置和比例。

作用：

  • 图形设计时的统一标准：viewportWidth 和 viewportHeight 提供了一个统一的坐标系统，设计者和开发者可以在这个坐标系统内设计图形，而不用担心实际显示尺寸。

  • 缩放适配：当你把这个矢量图应用到 UI 上时，Android 会根据实际的显示尺寸（由 height 和 width 控制）来缩放和渲染图形，而 viewportWidth 和 viewportHeight 的设置则决定了图形缩放的比例。

小结：

viewportWidth 和 viewportHeight 是用于定义矢量图形的绘制空间大小，它们设定了一个虚拟坐标系统，图形中的元素都是在这个坐标系统下进行设计和绘制的。当图形显示到屏幕上时，Android 会根据实际显示尺寸来缩放这些元素，但设计时的坐标系统是由 viewportWidth 和 viewportHeight 控制的。

二 android 如何使用svg图片资源

在 Android 中，要将 SVG 图片资源显示在 UI 界面上，可以通过以下几种方式，其中最常见和推荐的方式是使用 VectorDrawable 或者第三方库（如 Glide 或 Picasso）来加载 SVG 文件。

方法 1：将 SVG 转换为 VectorDrawable

Android 直接不支持 SVG 文件，但你可以通过将 SVG 文件转换为 VectorDrawable 来处理，并通过 ImageView 显示它们。

扫描二维码关注公众号，回复： 17574171 查看本文章
步骤：

  1. 将 SVG 文件转换为 VectorDrawable：

    从 Android Studio 3.0 开始，Android Studio 提供了一个工具可以自动将 SVG 文件转换为 VectorDrawable 文件。你可以通过以下步骤将 SVG 文件导入到项目中：

    • 在 res/drawable 目录下右键点击，选择 New -> Vector Asset。
    • 选择 “Local file (SVG, PSD)”，然后选择你的 SVG 文件，Android Studio 会自动将其转换为 VectorDrawable 格式。

    生成的 VectorDrawable 文件会是类似于以下的 XML 文件：

    <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2L15,8H9L12,2z"/>
</vector>

  2. 通过 ImageView 显示 VectorDrawable：

    在你的布局 XML 文件中，使用 ImageView 来显示这个 VectorDrawable 资源：

    <ImageView
    android:id="@+id/myImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_svg_file" />

    这里的 android:src 指向的是你刚才生成的 VectorDrawable 资源。

  3. 运行你的应用，你应该能够看到 SVG 图片被成功渲染为 VectorDrawable 并显示在 UI 界面上。

方法 2：使用第三方库（如 Glide 或 Picasso）

如果你不想手动转换 SVG 文件为 VectorDrawable，可以使用第三方库如 Glide 或 Picasso，它们支持直接加载 SVG 图片资源。

使用 Glide 加载 SVG：

  1. 添加 Glide 的依赖：

    在 build.gradle 文件中添加 Glide 的依赖：

    dependencies {
    implementation 'com.github.bumptech.glide:glide:4.12.0'
    implementation 'com.caverock:androidsvg:1.4'
}

  2. 使用 Glide 加载 SVG 文件：

    在 ImageView 中加载 SVG 图片资源：

    Glide.with(context)
    .load(Uri.parse("file:///android_asset/my_image.svg"))  // 或者从 URL 加载 SVG
    .into(imageView);

    Glide 会自动将 SVG 文件转换并渲染到 ImageView 上。

使用 Picasso 加载 SVG：

  1. 添加 Picasso 的依赖：

    dependencies {
    implementation 'com.squareup.picasso:picasso:2.71828'
}

  2. 使用 Picasso 加载 SVG 文件：

    Picasso.get()
    .load("file:///android_asset/my_image.svg")  // 或者从 URL 加载 SVG
    .into(imageView);

    Picasso 会自动处理 SVG 文件并显示在 ImageView 中。

方法 3：直接使用 SVG 库

如果你需要更细粒度的控制或想直接在 ImageView 中加载和渲染 SVG 文件，可以使用 AndroidSVG 库，它是一个专门用来解析和渲染 SVG 文件的库。

  1. 添加依赖：

    dependencies {
    implementation 'com.caverock:androidsvg:1.4'
}

  2. 加载并显示 SVG 文件：

    你可以使用 SVG 库加载和渲染 SVG 文件，然后将其绘制到 ImageView 中：

    try {
      
      
    // 从 assets 或文件加载 SVG 文件
    SVG svg = SVG.getFromAsset(context.getAssets(), "my_image.svg");
    PictureDrawable drawable = new PictureDrawable(svg.renderToPicture());
    
    // 将绘制的 SVG 设置到 ImageView 中
    imageView.setImageDrawable(drawable);
} catch (SVGParseException e) {
      
      
    e.printStackTrace();
}

总结：

  • 最简单的方式是将 SVG 文件转换为 VectorDrawable，然后通过 ImageView 进行显示。
  • 如果不想手动转换，可以使用第三方库 Glide 或 Picasso 来直接加载并显示 SVG 文件。
  • 如果需要更多控制或者直接渲染 SVG 文件，可以使用 AndroidSVG 库。

其中，使用 VectorDrawable 是官方推荐的方式，尤其在 Android 5.0 以上版本，它提供了很好的性能和可扩展性。

猜你喜欢

目录

热门文章