布局、按鈕背景陰影：layer-list

原理：將多個drawable按照順序?qū)盈B在一起顯示
效果圖

image.png

在drawable文件下新建layer-list的xml文件

陰影邊框效果

<?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="#0F000000" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!--第二層前景-->
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

image.png

層疊效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一層陰影 層疊-->
    <item>
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <!--圓角-->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 第二層前景 層疊-->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

image.png

底部偏移效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一層陰影 -->
    <item>
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!--第二層前景 底偏移1dp -->
    <item android:bottom="1dp">
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

image.png

右下偏移效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一層陰影：左偏移2dp，上偏移4dp -->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <!--圓角-->
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 第二層前景：：底偏移4dp，右偏移2dp -->
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="@android:color/white" />
            <!--圓角-->
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

image.png

使用：直接設(shè)android:background屬性為xml文件

android:background="@drawable/bg_shadow_white"