安卓用XML塑造你心中的按钮形态，玩转圆角、阴影与按下效果！

Android

2023-10-24 17:26:06

前言

作为安卓界面设计的灵魂组件之一，按钮的塑造总是备受重视。本教程将引导你利用XML文件，为按钮赋予圆角、阴影效果以及按下变化效果，让你的按钮在茫茫应用中脱颖而出。

工具准备

在你开始打造独一无二的按钮之前，确保你的电脑已安装以下工具：

安卓开发工具包 (Android Studio)
文本编辑器 (如记事本或Notepad++)

着手实现

1. 绘制圆角按钮

创建一个名为 drawable/shape.xml 的文件。
在文件中添加以下代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <corners android:radius="10dp" />
</shape>

2. 添加阴影效果

创建一个名为 drawable/shadow.xml 的文件。
在文件中添加以下代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

3. 实现按下变化效果

创建一个名为 drawable/shapepress.xml 的文件。
在文件中添加以下代码：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#cccccc" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</selector>

4. 在布局文件中应用样式

现在，你可以在布局文件中应用这些样式了。假设你的按钮名为 btn_submit ，你可以这样写：

<Button
    android:id="@+id/btn_submit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="提交"
    android:background="@drawable/shape"
    android:shadowColor="@drawable/shadow"
    android:shadowDx="2dp"
    android:shadowDy="2dp"
    android:shadowRadius="2dp"
    android:stateListAnimator="@drawable/shapepress" />