Android Vector Drawable在ImageView中底部被裁切，如何解决？

我有如下Vector Drawable矢量文件：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="18dp"
    android:height="3dp"
    android:viewportWidth="8.64"
    android:viewportHeight="1.44">
  <path
      android:fillColor="#363636"
      android:pathData="M0.72,0C0.3223,0 0,0.3224 0,0.72s0.3223,0.72 0.72,0.72 0.72,-0.3224 0.72,-0.72S1.1177,0 0.72,0Z" />
  <path
      android:fillColor="#363636"
      android:pathData="M4.3201,0C3.9224,0 3.6,0.3224 3.6,0.72s0.3224,0.72 0.7201,0.72c0.3976,0 0.72,-0.3224 0.72,-0.72S4.7177,0 4.3201,0Z" />
  <path
      android:fillColor="#363636"
      android:pathData="M7.9199,0C7.5224,0 7.2,0.3224 7.2,0.72s0.3224,0.72 0.72,0.72c0.3977,0 0.7201,-0.3224 0.7201,-0.72S8.3177,0 7.9199,0Z" />
</vector>

将其用于ImageView的布局代码如下：

<com.google.android.material.appbar.AppBarLayout
        android:background="@color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="1dp">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetStart="0dp"
            app:contentInsetEnd="0dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/back_button"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:src="@drawable/ic_arrow_left_black"
                    android:scaleType="centerInside" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:text="@string/avatar"
                    android:textColor="#313131"
                    android:textSize="16sp" />

                <ImageView
                    android:id="@+id/menu_button"
                    android:paddingLeft="16dp"
                    android:paddingRight="16dp"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/ic_menu_more" />

            </RelativeLayout>

        </androidx.appcompat.widget.Toolbar>

    </com.google.android.material.appbar.AppBarLayout>

矢量图预览显示正常：

但在ImageView中，矢量图底部被裁切并变平，不再呈现圆形：

请问我是否错误使用了Vector Drawable和SVG？

解决方案 #

问题原因 #

你的Vector Drawable本身没有问题，显示异常是ImageView的scaleType和尺寸设置导致的：

• 菜单按钮的ImageView设置了android:layout_height="match_parent"，高度与Toolbar一致（约56dp），而矢量图本身高度仅3dp，默认scaleType="fitCenter"会按比例拉伸矢量图填满ImageView高度，因矢量图viewport高度过小，拉伸后渲染精度问题导致圆形边缘被裁切变平。
• 左侧返回按钮设置了scaleType="centerInside"，能保持矢量图原始比例居中显示，而菜单按钮未设置该属性，导致变形。

解决方法 #

任选以下一种方案即可：

1. 给菜单按钮ImageView添加scaleType属性
   和返回按钮保持一致，设置scaleType="centerInside"，让矢量图保持原始比例居中显示，避免强制拉伸：

   <ImageView
       android:id="@+id/menu_button"
       android:paddingLeft="16dp"
       android:paddingRight="16dp"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_centerVertical="true"
       android:layout_alignParentRight="true"
       android:src="@drawable/ic_menu_more"
       android:scaleType="centerInside" />
   

2. 调整ImageView高度为自适应
   将菜单按钮的layout_height改为wrap_content，让ImageView高度匹配矢量图大小，同时保持垂直居中：

   <ImageView
       android:id="@+id/menu_button"
       android:paddingLeft="16dp"
       android:paddingRight="16dp"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:layout_alignParentRight="true"
       android:src="@drawable/ic_menu_more" />
   

3. 优化Vector Drawable的尺寸设置
   适当增大矢量图的android:height（比如改为24dp），保持viewport比例不变，拉伸后的显示精度会更高：

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
       android:width="24dp"
       android:height="24dp"
       android:viewportWidth="8.64"
       android:viewportHeight="1.44">
       <!-- 路径代码保持不变 -->
   </vector>
   

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