Android矢量资产工具为一些矢量图像提供了额外的填充。

26

我正在尝试从矢量资产工作室中导入一些 Material Vector 包中的图标。

但它们带有填充。

输入图片描述

为什么会出现这种情况,如何去除这些填充呢?

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

4个回答

64

Android矢量图素材

您可以使用group标签对矢量图进行缩放以去除额外空间。只需修改您的矢量图xml文件即可实现。

来自

<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="#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:width="24dp"
    android:height="24dp"
    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>
作为结果,enter image description here

2
很棒的解决方案,我喜欢它因为它不需要你改变ImageView,只需要改变源drawable。此外,它似乎也适用于亚马逊设备,这些设备对它们的矢量可绘制对象非常挑剔。 - Mavamaarten
2
对我来说,这只是让图像变得更大了,内部填充仍然存在。 - Sam Chen

14

通过将您的ImageViewsandroid:scaleType设置为适当的值,可以调整任何包含在VectorDrawables源图像(.SVG.PSD)中的“隐式”填充。这样它就可以处理暗藏在VectorDrawables源图像中的填充。您还需要设置android:adjustViewBounds="true"

例如,假设您的VectorDrawable在显示时有一些非常烦人的padding,位于图像的开头。您不知道为什么会有这个问题,因为您没有在ImageView上设置任何android:paddingStart...您需要做的是将ImageViewsandroid:scaleType设置为fitStart,并将android:adjustViewBounds设置为true

精简版:

ImageViewsandroid:scaleType调整为处理VectorDrawable源文件(.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


5
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    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 (padding起始/结束位置)

android:viewportHeight += android:translateY * 2 (padding顶部/底部位置)


3

一些图标上有填充,这是为了使所有图标对齐。例如,在对话框中选择ic_3d_rotation_24dp,您将看到图标延伸到边界的一侧。

如果你的尺寸均为8dp倍数,那么它们将很好地排列并且看起来很棒。


谢谢!我不知道这一点。我以为它要么是一个错误,要么是可以禁用的功能。 - Guy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接