Android vector viewportHeight是什么 如何设置矢量图视口高度

Android矢量图使用XML格式定义，viewportHeight是<vector>标签的核心属性，用来指定矢量图虚拟视口的高度，它和viewportWidth共同决定了矢量图的绘制坐标系范围，所有路径元素的绘制都会基于这个坐标系进行。

viewportHeight的基本定义

viewportHeight表示矢量图虚拟视口的高度数值，单位是dp，它和viewportWidth一起构成了一个虚拟的二维坐标系，这个坐标系的左上角是原点(0,0)，右下角的坐标是(viewportWidth, viewportHeight)。矢量图里的所有<path>元素的路径数据，都是基于这个坐标系来绘制的。

比如下面的矢量图配置，viewportHeight设置为24，说明虚拟视口的高度是24dp，所有路径的y坐标取值范围都在0到24之间：

<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,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z" />
</vector>

viewportHeight和矢量图显示的关系

viewportHeight需要和<vector>标签的android:height属性配合工作，两者的作用完全不同：

• android:height是矢量图在界面上实际显示的高度，会根据设备的屏幕密度进行缩放
• viewportHeight是虚拟绘制坐标系的高度，不会随屏幕密度变化，只用来定义路径的绘制范围

系统会将基于viewportHeight坐标系绘制的路径，自动缩放到android:height指定的实际高度上。如果viewportHeight和android:height的比例不匹配，就可能导致矢量图显示变形。

常见错误配置示例

如果viewportHeight设置为24，但是android:height设置为48dp，那么路径会被放大两倍显示，只要路径的坐标都在0到24范围内，就不会出现裁剪问题。但如果路径里有y坐标为30的点，而viewportHeight只有24，那么这个点就会被裁剪掉，不会显示出来。

下面的错误配置中，路径的y坐标最大值是30，超过了viewportHeight的24，会导致部分路径被裁剪：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!-- 路径y坐标最大为30，超过viewportHeight的24，会被裁剪 -->
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,0 L24,0 L24,30 L0,30 Z" />
</vector>

viewportHeight的设置原则

设置viewportHeight时可以遵循以下原则：

• viewportHeight的数值要和矢量图内所有路径的y坐标最大值匹配，确保所有路径内容都能被包含在视口范围内，避免裁剪
• 通常viewportHeight和viewportWidth的比例，要和矢量图的实际宽高比例（android:width和android:height的比例）保持一致，避免显示拉伸变形
• 如果是从设计工具导出的矢量图，直接使用导出时的viewportHeight数值即可，不要随意修改，否则容易破坏原有绘制比例

动态修改viewportHeight的方法

如果需要在代码中动态修改矢量图的viewportHeight，可以通过VectorDrawableCompat类来实现，示例代码如下：

// 加载矢量图资源
VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.ic_test, getTheme());
if (drawable != null) {
    // 修改viewportHeight为30
    drawable.setViewportSize(drawable.getViewportWidth(), 30);
    // 重新设置给ImageView
    imageView.setImageDrawable(drawable);
}

需要注意的是，动态修改viewportHeight后，如果新的视口范围小于原有路径的坐标范围，还是会出现路径裁剪的问题，修改前需要确认路径的坐标都在新的视口范围内。

AndroidvectorviewportHeight矢量图视口高度修改时间：2026-06-29 00:18:26