类似阴影的可绘制，使用“layer-list”

Question

背景

我想在一个视图下面制作一个（虚假的）阴影，使层次结构垂直排列，如下所示：

• 高度为“1dp”的颜色为“#43000000”的线条
• 在线条下方，从顶部开始颜色为“#1A000000”，结束颜色为“#00000000”的渐变色，并且高度为“8dp”。

问题

出现了一些问题，我无法正确地绘制出线条。

无论我怎么做，线条似乎都占据了整个空间，而渐变色看起来正常。

尝试过的方法

我尝试使用“line”和“rectangle”作为形状。我还尝试使用“stroke”代替“solid”，尝试添加填充和边距...

以下是可绘制文件的XML：

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

    <item>
        <shape android:shape="rectangle" >
            <size android:height="1dp" />

            <solid android:color="#43000000" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#1A000000" />

            <size android:height="8dp" />
        </shape>
    </item>

</layer-list>

再次强调，这不是我尝试的唯一方法，只是我的第一次尝试。

问题

如何修复这个XML？是什么导致了这种情况？

- android developer

---

我知道这不是你想要的答案，但是考虑使用9 patch代替。缺点？它不像xml drawable那样轻，并且您必须为每个分辨率复制它以获得最佳结果（对于非90°角）。优点？易用性和质量。 - Phantômaxx

我知道9-patch。抱歉。 - android developer

Answer 1

这是我发现有效的方法：

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

    <item android:bottom="8dp">
        <shape android:shape="rectangle" >
            <size android:height="1dp" />

            <solid android:color="#43000000" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape
            android:dither="true"
            android:shape="rectangle" >
            <gradient
                android:angle="270"
                android:endColor="#00000000"
                android:startColor="#10000000" />

            <size android:height="8dp" />
        </shape>
    </item>

</layer-list>

- android developer

Answer 2

尝试使用这个，希望它能满足你的需求，具有渐变效果。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
      <shape android:shape="rectangle">
         <solid android:color="#e040fb"/>
         <corners android:radius="2dp" />
      </shape>
   </item>

   <item
      android:left="0dp"
      android:right="0dp"
      android:top="0dp"
      android:bottom="2dp">
      <shape android:shape="rectangle">  
         <solid android:color="#E1BEE7"/>
         <corners android:radius="2dp" />
         <gradient
                android:angle="270"
                android:endColor="#e1bee7"
                android:startColor="#e040fb" />
      </shape>
   </item>
</layer-list>

- Divya Jain

---

这个不起作用（还有为什么你要圆角？）因为它让整个空间都变成了同一个颜色（e040fb）。但我现在想我已经得到了一些可以工作的东西，所以我会发布它。 - android developer

这是我为我的一个示例应用程序编写的代码，你可以删除那些角落。 :) - Divya Jain

Answer 3

您可以更改此处的高度，以获得您想要的效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:height="10dp"
        android:gravity="bottom">
        <shape
            android:shape="oval">
            <solid android:color="@color/shadow_color" />
        </shape>
    </item>
    <item android:right="20dp" android:left="20dp" android:bottom="12dp" 
android:top="10dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/border_color"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
    <item android:right="30dp" android:left="30dp" android:bottom="23dp" 
android:top="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/base_color"/>
            <corners android:radius="15dp"/>
        </shape>
    </item>
</layer-list>

- Bosco