我的图层列表可绘制对象有什么问题?
What is wrong with my layer-list drawable?
我想将自定义可绘制对象设置为此布局中 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>
虽然在语法上可以使用 dp
值,但这似乎会导致某些密度类别出现问题,因此最好改用 px
。
形状可绘制对象将按比例缩放以适合其包含 View
无论如何,您提供的值只会影响形状的比例。
对于您的图层列表可绘制对象,您必须为所有形状可绘制对象的大小提供一个通用的 "frame",因为每个图层都将独立于其他图层进行缩放以适合 View
。
这意味着较小的圆圈需要一些额外的信息来说明它们应该离边缘有多远。对于以其容器为中心的圆:
距离 = (container_size - circle_size) / 2
如果我们将 150px
作为所有可绘制对象的基本尺寸,那么例如粉色圆圈(尺寸 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>
请注意,不仅要为顶部/左侧设置属性,还要为底部/右侧设置属性,这一点很重要。如果您遗漏任何属性,则可绘制对象将被缩放以接触相应的边缘,因此圆形可以呈现为椭圆形或偏心圆。
我想将自定义可绘制对象设置为此布局中 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>
虽然在语法上可以使用 dp
值,但这似乎会导致某些密度类别出现问题,因此最好改用 px
。
形状可绘制对象将按比例缩放以适合其包含 View
无论如何,您提供的值只会影响形状的比例。
对于您的图层列表可绘制对象,您必须为所有形状可绘制对象的大小提供一个通用的 "frame",因为每个图层都将独立于其他图层进行缩放以适合 View
。
这意味着较小的圆圈需要一些额外的信息来说明它们应该离边缘有多远。对于以其容器为中心的圆:
距离 = (container_size - circle_size) / 2
如果我们将 150px
作为所有可绘制对象的基本尺寸,那么例如粉色圆圈(尺寸 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>
请注意,不仅要为顶部/左侧设置属性,还要为底部/右侧设置属性,这一点很重要。如果您遗漏任何属性,则可绘制对象将被缩放以接触相应的边缘,因此圆形可以呈现为椭圆形或偏心圆。