Android Vector Asset Studio為一些矢量圖像提供額外的填充

Question

我正在嘗試從Vector Asset Studio中的Material Vector包導入一些圖標。

但他們帶有填充物。

為什么會發生這種情況，如何將其刪除？

這是不方便的，因為這意味着如果我希望我的圖標是XML格式的17dp x 17dp，那么我需要設置它超過17x17以彌補填充。

Answer 1

您可以縮放一個將刪除額外空間的向量。 這可以使用group標記。 只需修改vector 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>

結果

Answer 2

您可以通過將ImageViews android:scaleType設置為適當的值來調整VectorDrawables源圖像（ .SVG ， .PSD ）中可能包含的任何“隱式”填充，以便它可以處理VectorDrawables源中秘密包含的填充圖片。 你還需要設置android:adjustViewBounds="true" 。

例如，假設您的VectorDrawable在顯示時在圖像的開頭有一些非常煩人的padding 。 你不知道它為什么會在那里因為你沒有在ImageView上設置任何android:paddingStart ...你需要做的是將ImageViews android:scaleType為fitStart並將android:adjustViewBounds為true 。

TL;博士

調整ImageViews android: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 。

Answer 3

此填充位於某些圖標上，因此所有圖標都可以正確對齊。 例如，如果在該對話框中，您選擇ic_3d_rotation_24dp ，您將看到圖標一直到邊界的邊緣。

PS如果你的目標是讓你的所有尺寸都是8dp的倍數，那么事情會順利排列並且看起來很棒。

Answer 4

<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（填充開始/結束）

android：viewportHeight + = android：translateY * 2（填充頂部/底部）