android:pivotY 不向我的 android vector drawable 添加顶部填充

Question

我有带有 CompoundDrawable 的 compactTextView。

我想向compoundDrawable由矢量图像提供的顶部填充添加顶部填充（我将 svg 导入到 android studio 中）

我看到了这篇关于如何向矢量可绘制对象添加填充的帖子

但是当我尝试这个时，没有添加填充：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="13dp"
    android:height="8dp"
    android:autoMirrored="true"
    android:viewportHeight="8.11"
    android:viewportWidth="13.44">
  <group
      android:pivotX="0"
      android:pivotY="12"
      android:scaleX="1"
      android:scaleY="1">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6.71,8.12l-6.71,-6.7l1.42,-1.42l5.29,5.3l5.29,-5.3l1.42,1.42z"/>
  </group>
</vector>

我还需要添加什么吗？

Answer 1

链接的解决方案通过缩小 VectorDrawable 中的路径来工作。

在另一例子中，viewPortWidth和viewportHeight分别为24pivotX和pivotY用于变换的原点。它相当于transform-origin在 CSS 中。因此，将scaleX和设置scaleY为 0.5，会导致其图标从 24x24 缩小到 12x12，中心位于枢轴点 (12,12)。

因此，您最终会在 24x24 VectorDrawable 的中间得到一个 12x12 的图标。从而在整个事物周围创建一个 6 的填充。

在您的图标中，您将缩放属性设置为 1。因此不会发生缩放，并且您不会创建任何填充。

您确定要在图标中创建填充空间吗？引入填充的正常方法是通过您的布局。例如使用android:layout_marginTop或android:paddingTop。我建议您首先考虑这种方法。

如果你真的想调整你的 VectorDrawable。然后你想要做的只是在顶部创建填充，就是将形状缩小到图标的底部。

因此，将您的枢轴点放在图标的底部：

  android:pivotX="0"
  android:pivotY="8.11"

并适当缩小

  android:scaleX="0.5"
  android:scaleY="0.5"

在这里，我们向图标的左下角缩小，因此我们还将在右侧创建填充。因为我们也在 X 方向缩放。您可以通过减少width和来解决这个问题viewportWidth。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="7dp"
    android:height="8dp"
    android:autoMirrored="true"
    android:viewportWidth="6.72"
    android:viewportHeight="8.11">
  <group
      android:pivotX="0"
      android:pivotY="8.11"
      android:scaleX="0.5"
      android:scaleY="0.5">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6.71,8.12l-6.71,-6.7l1.42,-1.42l5.29,5.3l5.29,-5.3l1.42,1.42z"/>
  </group>
</vector>

您还可以通过保留scaleX“1”来防止右侧的额外填充，但这会导致您的图标看起来像被垂直挤压。

翻译方法

另一种方法是将图标垂直向下移动，在顶部创建空间，而不是缩放它的大小。这样做的好处是您可以更明确地设置所需的填充。

你可以通过使用translateY属性来做到这一点。显然，这意味着 VectorDrawable 的高度也必须改变。所以你必须通过调整viewportHeight.

在下面的示例中，我添加了 4 的垂直填充，使图标的视口高度从 8.11 变为 12.11。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="13dp"
    android:height="12dp"
    android:autoMirrored="true"
    android:viewportWidth="13.44"
    android:viewportHeight="12.11">
  <group
      android:translateY="4">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6.71,8.12l-6.71,-6.7l1.42,-1.42l5.29,5.3l5.29,-5.3l1.42,1.42z"/>
  </group>
</vector>

如果您这样做，您可能还需要调整android:width和/或android:height。您可以选择：

• 增加android:height以及匹配额外的填充（即“12”），或
• 将高度保持在 8，并向下调整宽度以进行补偿（例如“9”）。