如何在不缩放的情况下将矢量可绘制在图层列表中居中 [英] How to center vector drawable in layer-list without scaling

问题描述

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

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

可绘制的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>

所需的效果是使选中图标位于可绘制图层的中心，而无需缩放.问题是，上面的图层列表会导致对勾图标进行缩放以适合图层大小.

如果我将每种密度的PNG替换为可绘制矢量，并按如下方式修改图层列表，则 可以产生所需的效果:

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

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

解决方案

我遇到了同样的问题，试图将矢量可绘制对象集中在分层列表上.

我有一个解决方法，它并不完全相同，但它可以工作，您需要为整个可绘制对象设置一个大小，并向矢量项目添加填充:

<?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>

上面形状的大小设置整个可绘制对象的大小，在此示例中为120dp，在第二个项目上的填充(在此示例中为24dp)将矢量图像居中.

它与使用gravity="center"并不相同，但是它是在API 21和22中使用向量的工作方式.

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

<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:

<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:

<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?

解决方案

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

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:

<?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.

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

这篇关于如何在不缩放的情况下将矢量可绘制在图层列表中居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！