如何在不进行缩放的情况下将图层列表中的矢量绘图居中

时间:2022-11-21 13:06:28

I am attempting to use a VectorDrawable in a LayerList without scaling the vector. For example:

我试图在LayerList中使用VectorDrawable而不缩放矢量。例如:

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
    <item android:gravity="center" android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

The drawable ic_check_white_48dp id defined as:

drawable ic_check_white_48dp id定义为:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>

The desired effect is for the check icon to be centered in the layer drawable, without scaling. The issue is, the layer-list above causes the check icon to be scaled to fit the layer size.

所需的效果是检查图标在图层可绘制的中心,无需缩放。问题是,上面的图层列表会导致检查图标缩放以适合图层大小。

I can produce the desired effect if I replace the vector drawable with PNGs for each density and modify the layer-list as such:

如果我用每个密度的PNG替换矢量drawable并修改图层列表,我可以产生所需的效果:

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/ic_check_white_48dp"/>
    </item>
</layer-list>

Is there any way I can do this using a VectorDrawable?

有什么方法可以使用VectorDrawable来做到这一点吗?

2 个解决方案

#1


9  

Been struggling with the same problem. The only way I found to fix this and avoid the drawable to scale up was to set the drawable size and using gravity to align it:

一直在努力解决同样的问题。我找到解决这个问题的唯一方法就是设置可绘制的大小并使用重力来对齐它:

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
     <item
        android:gravity="center"
        android:width="48dp"
        android:height="48dp"
        android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

Hope it helps!

希望能帮助到你!

#2


8  

I ran into the same problem trying to center vectors drawables on a layered list.

我遇到了同样的问题,试图在分层列表中居中矢量drawables。

I have a workaround, its not exactly the same but it works, you need to set a size for the entire drawable and add padding to the vector item:

我有一个解决方法,它不完全相同,但它的工作原理,你需要设置整个drawable的大小,并添加填充到矢量项:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:height="120dp" android:width="120dp"/>
            <solid android:color="@color/grid_item_activated"/>
        </shape>
    </item>
    <item android:top="24dp"
          android:bottom="24dp"
          android:left="24dp"
          android:right="24dp"
          android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

The size of the shape above sets the size of the entire drawable, 120dp in this example, the padding on the second item, 24dp in this example, centers the vector image.

上面形状的大小设置整个drawable的大小,在此示例中为120dp,第二个项目上的填充(在此示例中为24dp)使矢量图像居中。

Its not the same as using the gravity="center" but its working way of using vectors in API 21 and 22.

它与使用gravity =“center”不同,但它在API 21和22中使用向量的工作方式。

#1


9  

Been struggling with the same problem. The only way I found to fix this and avoid the drawable to scale up was to set the drawable size and using gravity to align it:

一直在努力解决同样的问题。我找到解决这个问题的唯一方法就是设置可绘制的大小并使用重力来对齐它:

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
     <item
        android:gravity="center"
        android:width="48dp"
        android:height="48dp"
        android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

Hope it helps!

希望能帮助到你!

#2


8  

I ran into the same problem trying to center vectors drawables on a layered list.

我遇到了同样的问题,试图在分层列表中居中矢量drawables。

I have a workaround, its not exactly the same but it works, you need to set a size for the entire drawable and add padding to the vector item:

我有一个解决方法,它不完全相同,但它的工作原理,你需要设置整个drawable的大小,并添加填充到矢量项:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:height="120dp" android:width="120dp"/>
            <solid android:color="@color/grid_item_activated"/>
        </shape>
    </item>
    <item android:top="24dp"
          android:bottom="24dp"
          android:left="24dp"
          android:right="24dp"
          android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

The size of the shape above sets the size of the entire drawable, 120dp in this example, the padding on the second item, 24dp in this example, centers the vector image.

上面形状的大小设置整个drawable的大小,在此示例中为120dp,第二个项目上的填充(在此示例中为24dp)使矢量图像居中。

Its not the same as using the gravity="center" but its working way of using vectors in API 21 and 22.

它与使用gravity =“center”不同,但它在API 21和22中使用向量的工作方式。