Android shape定义背景带阴影

最新推荐文章于 2024-08-18 03:30:46 发布

原创最新推荐文章于 2024-08-18 03:30:46 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

这段XML代码定义了一个layer-list，包含多个矩形shape，通过叠加不同透明度的颜色和设置圆角来创建阴影效果。最上方的shape使用了线性渐变，从#EBF5FF平滑过渡到#FFFFFF，模拟顶部光线。padding用于调整各层之间的相对位置，颜色从#0aF3F4F4渐变到#2dF3F4F4，创造出深度感。

<?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="#0aF3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#0fF3F4F4" />
            <corners android:radius="@dimen/dp_10" />
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#14F3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#19F3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1eF3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#23F3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#28F3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#2dF3F4F4" />
            <corners android:radius="@dimen/dp_10"/>
            <padding
                android:top="2px"
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="@dimen/dp_10"/>
            <gradient
                android:startColor="#EBF5FF"
                android:endColor="#FFFFFF"
                android:angle="270"
                android:type="linear" />

        </shape>
    </item>
</layer-list>

原理其实就是一层一层往上盖，padding就是里面的小抽屉比外面的大抽屉从left，right，top，bottom上分别小多少像素

多盖几层，也就出来阴影了，越往上面这层颜色也就越深，也就是颜色从0a变到2d，最后一个shape也就是最上面这层的颜色，这里用gradient做的从上到下的渐变色