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>

现在检查当使用app：srcCompat for imageView时它的实际外观。

有没有办法解决这个问题，因为我对VectorDrawables没有多少经验？

任何形式的帮助都将受到赞赏。

编辑：这就是我使用矢量drawable的方式。

<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的区域。

根据您的预期结果，您有几种方法可以解决此问题。

解决方案1 

如果您希望放大图标以占据整个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>

我通过更改视口来完成的工作是告诉Android，VectorDrawable的实际内容位于从（0,0）到（13.4,13.1）的区域。这不是确切的，但它可能足够接近。 Android应该扩展该区域中的所有内容以填充24x24图标区域。

解决方案2

另一种解决方案是将路径移动到24x24视口的中心。您可以使用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>

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

Answer 2

试试这个：

<?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">

    <group
          android:name="randomname"
          android:pivotX="12.0"
          android:pivotY="12.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" />
    </group>
</vector>

或者将layout_gravity="center"添加到您的ImageView

Answer 3

我有同样的问题。我只是将width，height，viewportWidth和viewportHeight更改为：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

<path
    android:fillColor="#FFFFFFFF"
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />

</vector>

Answer 4

<group
    android:pivotX="12"
    android:pivotY="12"
    android:scaleX="0.75"
    android:scaleY="0.75">

<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>

将焦点放在“组”标签上，如果viewportHeight和viewportWidth为24，则枢轴X和枢轴Y会定位图像，这意味着枢轴X和枢轴Y 12会将其居中，因为24/2为12：）

另一个重要的标记scaleX和scaleY将缩放图像的大小。

Answer 5

您可以通过在路径数据的开头调整 M 的x和y值来实现。

我并不是说这比<group>更好，但这是一种替代解决方案，我发现在某些情况下会有所帮助。

原始路径：

<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" />

相同的路径将右移100向下调整了200：

<path
        android:fillColor="@android:color/white"
        android:pathData="M107.144375,206.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" />

注意：其他答案已经表明了计算要调整的X和Y正确数量的方法，该答案仅表明了进行调整的另一种方法。

VectorDrawable不是居中对齐的

5 个答案: