android xml实现按钮的圆角、阴影效果以及按下变化效果

前言

5个xml文件实现 按钮的圆角、阴影效果以及按下变化效果

实现

• drawable/shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圆角 -->
    <corners
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/><!-- 设置圆角半径 -->
    
    <!-- 间隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><!-- 各方向的间隔 -->
    
    <!-- 大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 宽度和高度 -->
    
    <!-- 填充 -->
    <solid
        android:color=" #FF03A9F4"/><!-- 填充的颜色 -->
</shape>

• drawable/shapepress.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圆角 -->
    <corners
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"/><!-- 设置圆角半径 -->

    <!-- 间隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><!-- 各方向的间隔 -->

    <!-- 大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 宽度和高度 -->

    <!-- 填充 -->
    <solid
        android:color="#FF7AD1F8"/><!-- 填充的颜色 -->
</shape>

• drawable/shadow.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="#21000000" />
            <corners android:radius="8dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp" />
            <!-- 大小 -->
            <size
                android:width="50dp"
                android:height="50dp"/><!-- 宽度和高度 -->
        </shape>
    </item>
    <!--第二层前景-->
    <item
        android:bottom="2dp"
        android:right="3dp"
        android:drawable="@drawable/shape"
        >
    </item>
</layer-list>

1

• drawable/shadowpress.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="#0E000000" />
            <corners android:radius="8dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp" />
            <!-- 大小 -->
            <size
                android:width="50dp"
                android:height="50dp"/><!-- 宽度和高度 -->
        </shape>
    </item>
    <!--第二层前景-->
    <!--第二层前景-->
    <item
        android:bottom="2dp"
        android:right="3dp"
        android:drawable="@drawable/shapepress"
        >
    </item>
</layer-list>

在这里插入图片描述

• drawable/button_style.xml

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--注意先后顺序-->
    <!-- 触摸模式下单击时的阴影-->
    <item android:state_pressed="true"  android:drawable="@drawable/shadowpress"  />
    <!-- 默认时的背景图片-->
    <item android:drawable="@drawable/shadow" />
</selector>

• activity_main.xml中引入

<Button
  android:id="@+id/button9"
  android:onClick="pushNumber"
  android:text="9"
  android:background="@drawable/button_style"
  android:textColor="@color/colorWhite"
  android:layout_margin="5dp"
  />

1

效果动态图

20210522201751973.gif