类似阴影的drawable，使用“layer-list”

Posted 2023-04-18

【中文标题】类似阴影的drawable，使用“layer-list”

【英文标题】：Shadow-like drawable, using "layer-list"

【发布时间】：2015-01-11 22:08:45

【问题描述】：

背景

我正在尝试在视图下方制作（假）阴影，以便图层以这种方式垂直：

一行颜色“#43000000”，高度为“1dp” 在线条下方，从顶部开始，颜色为“#1A000000”，结束颜色为“#00000000”，高度为“8dp”。

问题

由于某种原因，我无法正确画线。

无论我做什么，由于某种原因，线条占据了整个空间，而渐变看起来很好。

我尝试了什么

我尝试使用“线”作为形状以及“矩形”。我还尝试使用“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: />

            <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: />
        </shape>
    </item>

</layer-list>

同样，这不是我尝试过的唯一方法。这只是我的第一次尝试。

问题

如何修复这个 XML？是什么导致它发生？

【问题讨论】：

我知道这不是您要寻找的答案，而是consider using a 9 patch, instead。 缺点？不如 xml drawable 轻，您必须为每个分辨率复制它以获得最佳结果（对于非 90° 角）。 优点？容易和质量。

我知道 9-patch。对不起。

【参考方案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: />

            <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: />
        </shape>
    </item>

</layer-list>

【参考方案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>

【讨论】：

这行不通（还有为什么你有圆角？），因为它使它的整个空间都是相同的颜色（e040fb）。但现在我认为我有一些工作，所以我会发布它。

这是我的示例应用程序之一的代码，您可以删除那个角落。 :)

【参考方案3】：

你可以改变这里的高度，得到你想要的

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