android material design 实现圆角矩形按钮效果

Android Material Design 是谷歌在 2014 年推出的一个设计语言，逐渐成为 Android 应用程序中最流行的设计语言之一。它有着清晰、简洁、有层次的界面，以及鲜艳的色彩、动画和大量的图标，可以为 Android 应用程序带来更美观的外观，并提升用户的体验。

在 Android Material Design 中，圆角矩形按钮是一个常见的元素。本文将介绍如何使用 Android Material Design 实现圆角矩形按钮效果。

前置知识

在学习本文前，需要具备以下知识：

• Android 基础知识
• Android Studio 的使用
• Android Material Design 的基础知识

实现步骤

在 Android Studio 中打开一个新项目，并按照以下步骤实现圆角矩形按钮效果。

1. 导入 Material Design 库

在项目的 build.gradle 文件中，添加 Material Design 库：

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.0.0'
}

2. 创建圆角矩形按钮的样式

在 res/values/styles.xml 文件中，添加一个新样式：

-- -------------------- ---- -------
------ --------------- ----------------------------------------
    ---- --- ---
    ----- ----------------------------------------------
--------

------ -------------------- ------------------------------------------
    ----- --------------------------------------------------------------------
    ----- ---------------------------------------
    ----- -------------------------------
--------

其中：

• RoundedButton 是我们定义的新样式名称。
• parent="Widget.MaterialComponents.Button" 表示这个样式是基于 Material Design Button 的。
• android:background 属性使用 @drawable/rounded_button_background，表示我们定义的圆角矩形按钮的背景。
• android:textColor 属性设置按钮文字颜色为白色。
• cornerRadius 属性设置按钮圆角半径为 20dp。

3. 创建圆角矩形按钮的背景

在 res/drawable 目录下，创建一个新的 XML 文件 rounded_button_background.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="@color/colorPrimary" />
</shape>

其中：

• android:shape="rectangle" 表示这个形状是矩形。
• android:radius="20dp" 表示这个矩形的圆角半径是 20dp。
• android:color="@color/colorPrimary" 表示这个矩形的填充颜色是主题颜色，可以根据需要进行调整。

4. 使用圆角矩形按钮样式

在布局文件中，使用 style="@style/RoundedButton" 引用我们定义的圆角矩形按钮样式：

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn_rounded"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="圆角矩形按钮"
    style="@style/RoundedButton" />

示例代码

完整的示例代码可在 GitHub 上获取：https://github.com/zhaoolee/android-material-design-button-example

总结

通过本文的介绍，我们学习了如何使用 Android Material Design 实现圆角矩形按钮效果。我们可以通过自定义样式和背景来实现不同的按钮效果，为 Android 应用程序带来更美观的外观和更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654db68b7d4982a6eb71fab6