Android Vector Asset Studio 为一些矢量图像提供了额外的填充

Posted 2023-02-25

【中文标题】Android Vector Asset Studio 为一些矢量图像提供了额外的填充

【英文标题】：Android Vector Asset Studio gives extra padding to some vector images

【发布时间】：2015-11-11 14:37:04

【问题描述】：

我正在尝试从 Vector Asset Studio 中的 Material Vector 包中导入一些图标。

但它们带有填充。

为什么会发生这种情况以及如何删除它？

这很不方便，因为这意味着如果我希望我的图标在 XML 中为 17dp x 17dp，那么我需要将其设置为大于 17x17 以弥补填充。

【参考方案1】：

Android 矢量资源

您可以缩放矢量以移除额外空间。这可以使用group 标签来实现。只需修改您的矢量 xml 文件。

来自

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

    <path
        android:fillColor="#FF000000"
        android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z" />
</vector>

到

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

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

        <path
            android:fillColor="#FF000000"
            android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z" />
    </group>
</vector>

结果

【讨论】：

很好的解决方案，我喜欢它，因为它不需要您更改 ImageView，只需要更改源可绘制对象。此外，它似乎也适用于亚马逊设备，这些设备对矢量可绘制对象非常挑剔。

对我来说，这只是让图像变大，内部填充仍然存在。

【参考方案2】：

您可以通过将ImageViews android:scaleType 设置为适当的值来调整VectorDrawables 源图像（.SVG、.PSD）中可能包含的任何“隐式”填充，以便它可以处理VectorDrawables 源图像中秘密包含的填充。您还需要设置android:adjustViewBounds="true"。

例如，假设您的VectorDrawable 在显示图像的开头有一些非常烦人的padding。你不知道它为什么在那里，因为你没有在 ImageView 上设置任何 android:paddingStart... 你需要做的是将 ImageViews android:scaleType 设置为 fitStart 和 android:adjustViewBounds 设置为 @987654336 @。

tl;dr

调整您的ImageViewsandroid:scaleType 以处理包含在VectorDrawables 源文件（.SVG、.PSD）中的任何“隐式”填充。同时设置android:adjustViewBounds="true"。

快速示例：

<ImageView android:id="@+id/vectorDrawable_imageView"
           <!--Other ImageView settings-->
           android:adjustViewBounds="true"
           android:scaleType="fitStart"
           app:srcCompat="@drawable/vector_with_implicit_padding_at_start"
/>

这将删除 VectorDrawable 开头的烦人“隐式”填充。

注意：根据您的渲染需要调整android:scaleType。

【参考方案3】：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportWidth="28"
    android:viewportHeight="28">
    <group
        android:translateX="2"
        android:translateY="2">
        <path
            android:fillColor="#8A333333"
            android:pathData="M13.12,2.06L7.58,7.6c-0.37,0.37 -0.58,0.88 -0.58,1.41V19c0,1.1 0.9,2 2,2h9c0.8,0 1.52,-0.48 1.84,-1.21l3.26,-7.61C23.94,10.2 22.49,8 20.34,8h-5.65l0.95,-4.58c0.1,-0.5 -0.05,-1.01 -0.41,-1.37 -0.59,-0.58 -1.53,-0.58 -2.11,0.01zM3,21c1.1,0 2,-0.9 2,-2v-8c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2v8c0,1.1 0.9,2 2,2z" />
    </group>
</vector>

android:viewportWidth += android:translateX * 2（填充开始/结束）

android:viewportHeight += android:translateY * 2（填充顶部/底部）

【参考方案4】：

此填充位于某些图标上，以便所有图标都可以正确对齐。例如，如果在该对话框中选择ic_3d_rotation_24dp，您会看到图标一直延伸到边界。

PS 如果您的目标是拥有all your sizes be a multiple of 8dp，那么一切都会很好地排列并且看起来很棒。

【讨论】：

谢谢！我不知道。我认为这要么是一个错误，要么是一个可以禁用的功能。