实现 Android MaterialButton 教程

简介

在 Android 开发中，MaterialButton 是一种常用的 UI 控件，它用于显示一个可点击的按钮，并且具有 Material Design 风格。本篇教程将向你展示如何实现一个 Android MaterialButton。

整体流程

以下是实现 Android MaterialButton 的整体流程：

gantt
    title 实现 Android MaterialButton 教程流程

    section 创建项目
    创建项目: 2021-10-01, 1d

    section 导入依赖
    导入 Material Components 依赖: 2021-10-02, 1d

    section 布局文件
    创建布局文件: 2021-10-03, 1d

    section 在代码中引用布局文件
    在代码中引用布局文件: 2021-10-04, 1d

    section 设置按钮样式
    设置按钮样式: 2021-10-05, 1d

    section 设置点击事件
    设置点击事件: 2021-10-06, 1d

    section 运行应用
    运行应用: 2021-10-07, 1d

创建项目

首先，你需要创建一个新的 Android 项目。

导入依赖

Android MaterialButton 是 Android Material Components 库的一部分，因此你需要在项目的 build.gradle 文件中添加依赖。

implementation 'com.google.android.material:material:1.4.0'

创建布局文件

接下来，你需要创建一个布局文件来定义 MaterialButton。打开项目中的 activity_main.xml 文件，并添加以下代码：

<com.google.android.material.button.MaterialButton
    android:id="@+id/materialButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MaterialButton"
    app:icon="@drawable/ic_baseline_android_24"
    app:iconGravity="start"
    app:iconTint="@color/white"
    app:iconSize="24dp"
    app:backgroundTint="@color/colorPrimary"
    app:cornerRadius="4dp"
    app:strokeColor="@color/colorPrimaryDark"
    app:strokeWidth="2dp"
    app:rippleColor="@color/colorAccent" />

代码解释：

  • com.google.android.material.button.MaterialButton 是 Android MaterialButton 的类名。
  • android:id="@+id/materialButton" 定义了 MaterialButton 的唯一标识符。
  • android:layout_width 和 android:layout_height 定义了 MaterialButton 的尺寸。
  • android:text 定义了 MaterialButton 上的文本。
  • app:icon 定义了 MaterialButton 上的图标。
  • app:iconGravity 定义了图标的位置。
  • app:iconTint 定义了图标的颜色。
  • app:iconSize 定义了图标的尺寸。
  • app:backgroundTint 定义了 MaterialButton 的背景颜色。
  • app:cornerRadius 定义了 MaterialButton 的圆角半径。
  • app:strokeColor 定义了 MaterialButton 的边框颜色。
  • app:strokeWidth 定义了 MaterialButton 的边框宽度。
  • app:rippleColor 定义了 MaterialButton 的点击效果颜色。

在代码中引用布局文件

接下来，你需要在代码中引用布局文件，并找到 MaterialButton 控件。

在 MainActivity.java 文件中，添加以下代码：

import com.google.android.material.button.MaterialButton;

public class MainActivity extends AppCompatActivity {
    private MaterialButton materialButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        materialButton = findViewById(R.id.materialButton);
    }
}

代码解释：

  • import com.google.android.material.button.MaterialButton 导入 MaterialButton 类。
  • private MaterialButton materialButton 声明一个 MaterialButton 对象。
  • materialButton = findViewById(R.id.materialButton) 通过 findViewById 方法找到布局文件中的 MaterialButton 控件。

设置按钮样式

接下来，你需要设置 MaterialButton 的样式。

在 MainActivity.java 文件的 onCreate 方法中，添加以下代码：

materialButton.setCornerRadius(getResources().getDimension(R.dimen.button_corner_radius));
materialButton.setStrokeColorResource(R.color.button_stroke_color);
materialButton.setStrokeWidth(getResources().getDimensionPixelSize(R.dimen.button_stroke_width));
materialButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.button_background_color)));
``