android - 我的图层列表可绘制对象有什么问题？

Question

我想在此布局中将自定义可绘制对象设置为 FloatingActionButton 的 android:src:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sscce="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        sscce:fabSize="normal"
        android:src="@drawable/fab_drawable" />

</LinearLayout>

我期待的是这样的:

但是我得到了:

这是自定义图层列表可绘制对象，其中包含一些形状可绘制对象:

res/drawable/fab_drawable.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="oval">
            <solid android:color="#1AFF00" /> <!-- green -->
            <size android:width="150dp"
                android:height="150dp"/>
        </shape>
    </item>



    <item>
        <shape android:shape="oval">
            <solid android:color="#FC00FF" /> <!-- pink -->
            <size android:width="100dp"
                android:height="100dp"/>
        </shape>
    </item>



    <item>
        <shape android:shape="oval">
            <solid android:color="#0040FF" /> <!-- blue -->
            <size android:width="40dp"
                android:height="40dp" />
        </shape>
    </item>



    <item>
        <shape android:shape="oval" >
            <stroke android:width="3dp"
                android:color="#FF0000"/> <!-- red -->

            <solid android:color="#FFBF00" /> <!-- yellow -->
            <size android:width="24dp"
                android:height="24dp" />
        </shape>
    </item>

</layer-list>

Answer 1

虽然在句法上可以使用 dp 值，但这似乎会导致某些密度类别出现问题，因此最好改用 px。无论如何，Shape drawable 将被缩放以适合它们包含的 View，您提供的值只会影响形状的比例。

对于您的图层列表可绘制对象，您必须为所有形状可绘制对象的大小提供一个通用的“框架”，因为每个图层都将独立于其他图层进行缩放以适应View。

这意味着较小的圆圈需要一些额外的信息来说明它们应该离边缘有多远。对于以其容器为中心的圆:

距离 = (container_size - circle_size)/2

如果我们将 150px 作为所有 drawable 的基本尺寸，那么例如粉色圆圈(尺寸 100px)需要 25px 距离到其容器的边缘。

您可以通过为每个 item 设置属性来提供此信息:

<item android:top="25px" android:left="25px" android:bottom="25px"  android:right="25px">
<shape android:shape="oval">
    <solid android:color="#FC00FF" /> <!-- pink -->
    <size android:width="100px"
          android:height="100px"/>
</shape>
</item>

请注意，不仅要为顶部/左侧设置属性，还要为底部/右侧设置属性，这一点很重要。如果您省略任何属性，则可绘制对象将被缩放以接触相应的边缘，因此圆形可以呈现为椭圆形或偏心圆。