android - VectorDrawable 未居中对齐

Question

我已经用我拥有的路径数据创建了一个 VectorDrawable 文件。但问题是图像没有在总区域的中心对齐，而是创建为左上对齐。看看:

文件:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

现在检查当 as app:srcCompat 用于 imageView 时它的实际外观。

我对 VectorDrawables 没有多少经验，有什么办法可以解决这个问题吗？

如有任何帮助，我们将不胜感激。

编辑:这就是我使用矢量可绘制对象的方式。

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/close_button"/>

Answer 1

您指定您的向量是 24x24，但路径并没有那么大。如果我们实际检查它的尺寸，它的边界框坐标是:

     x: -0.034
     y: -0.033
 width: 13.369
height: 13.032

所以它只占据左上角大约 13x13 的区域。

根据您想要的结果，您有多种选择来解决此问题。

解决方案一

如果您希望图标放大以占据整个 24x24 图标区域，则更改 viewportWidth和 viewportHeight更合适的东西应该工作。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="13.4"
    android:viewportWidth="13.1">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

我在这里通过改变视口(viewport)所做的是告诉 Android VectorDrawable 的实际内容在从 (0,0) 到 (13.4,13.1) 的区域中。这并不准确，但可能已经足够接近了。 Android 应缩放该区域中的所有内容以填充 24x24 图标区域。

方案二

另一种解决方案是将路径移动到 24x24 视口(viewport)的中心。您可以使用 VectorDrawable <group> 来做到这一点标签。

我们需要对移动该路径的路径应用平移，使其居中。

现在路径的中心位于:

x = -0.034 + 13.369/2
  = 6.651
y = -0.033 + 13.032/2
  = 6.483

我们希望将其移动到 12,12。因此，我们将路径包装在一个带有 translateX 的组中和 translateY适当数量的值。

我们需要沿 X 轴向右移动 (12 - 6.651) = 5.349，并且我们需要向下移动 (12 - 6.483) = 5.517。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <group translateX="5.349" translateY="5.517"> 
        <path
            android:fillColor="@android:color/white"
            android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
    </group>
</vector>

当然，您也可以选择结合这两种方法。或者，如果您不仅需要移动十字架，还需要将其放大一点，也可以向组中添加比例尺。