Androidxml布局之阴影处理

最新推荐文章于 2025-05-26 07:00:00 发布

原创最新推荐文章于 2025-05-26 07:00:00 发布 · 1.8w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#xml卡片阴影

日记专栏收录该内容

181 篇文章

订阅专栏

本文介绍了一种通过XML定义的卡片阴影效果实现方法。利用shape和layer-list元素组合，实现了具有立体感的卡片阴影效果，适用于Android应用开发。

使用环境：卡片效果（在边框的右边和下边用阴影处理）

使用方法：（效果可以运行下看看）

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

    <item android:state_pressed="true">

        <!-- shape如果不声明形状则默认为正方形 -->
        <shape>

            <!-- 圆角，你也可以对不同的角设置不同的数值 -->
            <corners android:radius="8.0dp"  />
            <!-- 形状的填充色 -->
            <solid android:color="@color/normalPress" />
            <!-- 边框宽度和颜色 -->
            <stroke android:width="0.0dp" android:color="@color/normalPress" />
        </shape></item>
    <item>
        <layer-list>
            <item>

                <shape>

                    <!-- 圆角，你也可以对不同的角设置不同的数值 -->
                    <corners android:radius="10.0dp" />
                    <!--阴影处理，一般有边框和下边框做阴影处理-->
                    <gradient
                        android:startColor="#e6e6e6"
                        android:endColor="#dfdfdf"
                        android:centerColor="#dadada"
                        android:angle="0"/>
                    <!-- 形状的填充色 -->
                    <!--<solid android:color="@color/transparent2" />-->
                    <!-- 边框宽度和颜色 -->
                    <stroke android:width="0.0dp" android:color="@android:color/white" />
                </shape>
            </item>
            <item android:bottom="3dp" android:right="3dp">

                <shape>

                    <!-- 圆角，你也可以对不同的角设置不同的数值 -->
                    <corners android:radius="8.0dp" />
                    <!-- 形状的填充色 -->
                    <solid android:color="@android:color/white" />
                    <!-- 边框宽度和颜色 -->
                    <stroke android:width="0.0dp" android:color="@android:color/white" />
                </shape>
            </item>


        </layer-list>
        <!-- shape如果不声明形状则默认为正方形 -->
    </item>

</selector>