您的位置: 首页  >  文章  >  Android中图型的阴影效果（shadow-effect-with-custom-shapes）

Android中图型的阴影效果（shadow-effect-with-custom-shapes）

分类: 文章 • 2024-06-18 23:43:52

  • 思路：

    在自定义shape中增加一层或多层，并错开，即可显示阴影效果。为增加立体感，按钮按下的时候，只设置一层。我们可以通过top, bottom, right 和 left 四个参数来控制阴影的方向和大小。

    Android中图型的阴影效果（shadow-effect-with-custom-shapes）

    关系图

    以下自定义两种阴影效果：

    res/drawable-hdpi/shadow1.xml

    view sourceprint?
    01.<?xml version="1.0" encoding="utf-8"?>
    02.<selector xmlns:android="http://schemas.android.com/apk/res/android">
    03.<item 
    04.android:state_pressed="true">
    05.<layer-list>
    06.<item android:left="4dp" android:top="4dp"><shape>
    07.<solid android:color="#ff58bb52" />
    08.<corners android:radius="30dip" />
    09.</shape></item>
    10.</layer-list>
    11.</item>
    12.<item>
    13.<layer-list>
    14.<!-- 第一层 -->
    15.<item android:left="4dp" android:top="4dp"><shape>
    16.<solid android:color="#66000000" />
    17.<corners android:radius="30dip" />
    18.<!-- 描边 -->
    19.<stroke android:width="1dp" android:color="#ffffffff" />
    20.</shape></item>
    21.<!-- 第二层 -->
    22.<item android:bottom="4dp" android:right="4dp"><shape>
    23.<solid android:color="#ff58bb52" />
    24.<corners android:radius="30dip" />
    25.<!-- 描边 -->
    26.<stroke android:width="1dp" android:color="#ffffffff" />
    27.</shape></item>
    28.</layer-list></item>
    29.</selector>

    /TestAA/res/drawable-hdpi/shadow2.xml

    view sourceprint?
    01.<?xml version="1.0" encoding="utf-8"?>
    02.<selector xmlns:android="http://schemas.android.com/apk/res/android">
    03.<!-- 点击之后 -->
    04.<item android:state_pressed="true">
    05.<layer-list>
    06.<item 
    07.android:left="4dp"
    08.android:top="4dp">
    09.<shape>
    10.<solid 
    11.android:color="#ff58bb52" />
    12.<corners 
    13.android:radius="3dp" />
    14.</shape>
    15.</item>
    16.</layer-list></item>
    17.<!-- 正常状态 -->
    18.<item>
    19.<layer-list>
    20.<!-- 第一层 -->
    21.<item 
    22.android:left="2dp"
    23.android:top="2dp">
    24.<shape>
    25.<solid 
    26.android:color="#66000000" />
    27.<corners
    28.android:radius="3dp" />
    29.</shape>
    30.</item>
    31.<!-- 第二层 -->
    32.<item 
    33.android:bottom="4dp"
    34.android:right="4dp">
    35.<shape>
    36.<solid 
    37.android:color="#ff58bb52" />
    38.<corners 
    39.android:radius="3dp" />
    40.</shape>
    41.</item>
    42.<!-- 第三层 -->
    43.<item 
    44.android:bottom="6dp"
    45.android:right="6dp">
    46.<shape>
    47.<solid 
    48.android:color="#ffcccccc" />
    49.<corners 
    50.android:radius="3dp" />
    51.</shape>
    52.</item>
    53.</layer-list>
    54.</item>
    55.</selector>

    效果图：

    Android中图型的阴影效果（shadow-effect-with-custom-shapes）

相关推荐