Android组件之MaterialButton

于 2025-05-08 12:23:32 发布
阅读量50 收藏
点赞数
分类专栏： Android组件 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnds123321/article/details/147782910
版权

文章目录

概述

MaterialButton 是 Android Material Design 组件库中的一个按钮控件，它提供了比传统 Button 更丰富的样式和功能。

基本使用

添加依赖

由于不是内置的组件，需要外部导入依赖才能使用。在app目录下的build.gradle文件中的dependencies中添加如下内容，添加后点击Syn Now进行同步。

implementation 'com.google.android.material:material:1.6.0' // 使用最新版本

在这里插入图片描述

在xml布局中定义MaterialButton

    <com.google.android.material.button.MaterialButton
        android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击我" />

在Activity中获取MaterialButton

// 获取MaterialButton组件
MaterialButton myButton = findViewById(R.id.my_button);

效果如图：

在这里插入图片描述

样式设置

MaterialButton 默认就是圆角按钮，不需要我们再去引用外部样式文件来设置样式，样式比Button要丰富很多。

在xml中进行设置

注意，由于该组件设置样式使用的是app:，所以要布局组件上增加命名空间：xmlns:app="http://schemas.android.com/apk/res-auto"。

该组件可以设置的一些样式如下：

    <com.google.android.material.button.MaterialButton
        <!-- 设置组件唯一标识 -->
        android:id="@+id/my_button"
        <!-- 设置组件宽度 -->
        android:layout_width="wrap_content"
        <!-- 设置组件高度 -->
        android:layout_height="wrap_content"
        <!-- 文本颜色 -->
        android:textColor="#FFFFFF"
        <!-- 文本大小 -->
        android:textSize="20sp"
        <!-- 文本样式：bold(粗体)/italic(斜体)/normal(常规) -->
        android:textStyle="bold"
        <!-- 字体 -->
        android:fontFamily="sans-serif"
        <!-- 内边距 -->
        android:padding="12dp"
        <!-- 外边距 -->
        android:layout_margin="8dp"
        <!-- 设置文本 -->
        android:text="点击我"
        <!-- 设置图标 -->
        app:icon="@drawable/img"
        <!-- 设置图标位置，textStart表示图标在文本的开头，还有值textEnd|start|end -->
        app:iconGravity="textStart"
        <!-- 图标与文本间距 -->
        app:iconPadding="8dp"
        <!-- 圆角半径 -->
        app:cornerRadius="8dp"
        <!-- 边框颜色 -->
        app:strokeColor="#FF0000"
        <!-- 边框宽度 -->
        app:strokeWidth="5dp"
        <!-- 背景色调，不要使用android:background，否则会覆盖 MaterialButton 的样式 -->
        app:backgroundTint="#FF1234"
        <!-- 波纹效果颜色 -->
        app:rippleColor="#123456"
        />

效果如图：

在这里插入图片描述

在Java中实现

public class MainActivity extends AppCompatActivity {

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

        // 获取MaterialButton组件
        MaterialButton myButton = findViewById(R.id.my_button);
        // 设置文本
        myButton.setText("点击我");
        // 设置文本颜色
        myButton.setTextColor(Color.parseColor("#FF0000"));
        // 设置文本大小
        myButton.setTextSize(20);
        // 设置文本样式：bold(粗体)/italic(斜体)/normal(常规)
        myButton.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        // 设置按钮文本内容
        myButton.setText("点击我");
        // 设置字体
        myButton.setTypeface(ResourcesCompat.getFont(this, R.font.my_custom_font));
        // 设置内边距
        myButton.setPadding(dpToPx(50), dpToPx(20), dpToPx(50), dpToPx(20));
        // 设置外边距
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) myButton.getLayoutParams();
        params.setMargins(dpToPx(50), dpToPx(20), dpToPx(20), dpToPx(20)); // 左、上、右、下
        myButton.setLayoutParams(params);
        // 设置图标
        myButton.setIconResource(R.drawable.img);
        // 设置图标位置
        myButton.setIconGravity(MaterialButton.ICON_GRAVITY_TEXT_END);
        // 设置圆角
        myButton.setCornerRadius(20);
        // 设置边框
        myButton.setStrokeColor(ColorStateList.valueOf(Color.parseColor("#123456")));
        myButton.setStrokeWidth(2);
        // 设置波纹效果颜色
        myButton.setRippleColor(ColorStateList.valueOf(Color.RED));
    }

    // 将 dp 转换为像素
    public int dpToPx(int dp) {
        float density = getResources().getDisplayMetrics().density;
        return (int) (dp * density + 0.5f); // 四舍五入
    }
}

效果如图：

在这里插入图片描述

设置已有样式

MaterialButton 提供了几种预设样式：

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="填充按钮" />

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="轮廓按钮" />

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本按钮" />

效果如图：

在这里插入图片描述

自定义通用按钮样式

通过如下方法设置后，就不需要在按钮中引用某种样式，而是所有按钮都会默认使用同一种样式。步骤如下：

  • 第一步，先在res/values目录下创建styles.xml文件，内容如下，其中具体样式可以自定义，以下仅供参考：
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- 在主题中全局设置 MaterialButton 样式 -->
        <item name="materialButtonStyle">@style/MyButtonStyle</item>
    </style>
    <!-- 自定义一个全局按钮样式 -->
    <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
        <!-- 设置背景色，不要用background属性 -->
        <item name="backgroundTint">#87939A</item>
        <item name="cornerRadius">8dp</item>
        <!-- 设置文本颜色 -->
        <item name="android:textColor">@color/white</item>
    </style>
</resources>
  • 第二步，修改AndroidManifest.xml中的android:theme的值。如下：
<!-- AppTheme是刚才自定义的主题名 -->
android:theme="@style/AppTheme"

在这里插入图片描述

  • 第三步，准备按钮，不需要设置样式。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="填充按钮" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="轮廓按钮" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本按钮" />
</LinearLayout>
  • 第四步，效果如图：

在这里插入图片描述

但注意，我们实际上是用自己的主题替代了原来的默认主题，所以我们可以只在 styles.xml 文件中定义按钮样式，然后在 themes.xml 文件中将按钮样式放在原来的主题下。如下图所示：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

其他设置

也支持Button的一些设置：

        MaterialButton myButton = findViewById(R.id.my_button);
        // 禁用按钮（变灰不可点击）
        myButton.setEnabled(false);
        // 设置可见
        myButton.setVisibility(View.VISIBLE);

效果如图：

在这里插入图片描述

事件

单击事件

有多种手段来进行MaterialButton事件的注册，如下。

第一种，直接注册。

        // 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);
        // 为按钮注册事件
        myButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 实现单击事件的逻辑，例如，给出一个提示
                Toast.makeText(getApplicationContext(), "你点击了我！", Toast.LENGTH_SHORT).show();
            }
        });

可简化成Lambda表达式行式：

        // 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);
        // 为按钮注册事件
        myButton.setOnClickListener(view -> {
            // 实现单击事件的逻辑，例如，给出一个提示
            Toast.makeText(getApplicationContext(), "你点击了我！", Toast.LENGTH_SHORT).show();
        });

第二种，通过实现View.OnClickListener。

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

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

        // 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);
        // 为按钮注册事件
        myButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.my_button) {
            // 实现单击事件的逻辑，例如，给出一个提示
            Toast.makeText(getApplicationContext(), "你点击了我！", Toast.LENGTH_SHORT).show();
        }
    }
}

第三种，是MaterialButton所有但Button所没有的方式。

先在xml文件中通过android:onClick设置点击事件方法名。

    <com.google.android.material.button.MaterialButton
        android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        <!-- 按钮事件方法名 -->
        android:onClick="onButtonClick"
        android:text="点击我" />

再在对应的Activity中实现该方法，代码如下：

public class MainActivity extends AppCompatActivity {

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

        // 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);
    }

    // XML中指定的方法（需在Activity中实现）
    public void onButtonClick(View view) {
        // 实现单击事件的逻辑，例如，给出一个提示
        Toast.makeText(getApplicationContext(), "你点击了我！", Toast.LENGTH_SHORT).show();
    }
}

长按事件

实现代码如下：

        // 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);
        // 为按钮注册长按事件，即鼠标按住按钮不动
        myButton.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                // 写事件逻辑
                Toast.makeText(getApplicationContext(), "你长按了我哟", Toast.LENGTH_SHORT).show();
                return false;
            }
        });

在这里插入图片描述

按钮状态变化监听

监听选中状态（Checkable 特性），MaterialButton 支持类似复选框的选中状态，可以通过这个特性来设置当选中按钮后按钮自动变色来表示选中。

// 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);
        myButton.setCheckable(true); // 启用选中状态
        // 状态变化监听
        myButton.addOnCheckedChangeListener(new MaterialButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(MaterialButton button, boolean isChecked) {
                String state = isChecked ? "选中" : "未选中";
                Toast.makeText(getApplicationContext(), "状态: " + state, Toast.LENGTH_SHORT).show();
                if (isChecked) {
                    // 选中后则按钮背景色变为红色
                    button.setBackgroundColor(Color.parseColor("#FF0000"));
                } else {
                    button.setBackgroundColor(Color.parseColor("#87939A"));
                }
            }
        });

效果如图：

在这里插入图片描述

在这里插入图片描述

完整实例

xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:fontFamily="sans-serif"
        android:padding="12dp"
        android:text="点击我"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:textStyle="bold"
        app:backgroundTint="#FF1234"
        app:cornerRadius="8dp"
        app:icon="@drawable/img"
        app:iconGravity="textStart"
        app:iconPadding="8dp"
        app:rippleColor="#123456"
        app:strokeColor="#FF0000"
        app:strokeWidth="5dp" />
</LinearLayout>

java 代码如下：

public class MainActivity extends AppCompatActivity {

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

        // 获取按钮组件
        MaterialButton myButton = findViewById(R.id.my_button);

        // 为按钮注册事件
        myButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // 实现单击事件的逻辑，例如，给出一个提示
                Toast.makeText(getApplicationContext(), "你点击了我！", Toast.LENGTH_SHORT).show();
            }
        });

        // 为按钮注册长按事件，即鼠标按住按钮不动
        myButton.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                // 写事件逻辑
                Toast.makeText(getApplicationContext(), "你长按了我哟", Toast.LENGTH_SHORT).show();
                return false;
            }
        });

        myButton.setCheckable(true); // 启用选中状态
        // 状态变化监听
        myButton.addOnCheckedChangeListener(new MaterialButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(MaterialButton button, boolean isChecked) {
                String state = isChecked ? "选中" : "未选中";
                Toast.makeText(getApplicationContext(), "状态: " + state, Toast.LENGTH_SHORT).show();
                if (isChecked) {
                    // 选中后则按钮背景色变为红色
                    button.setBackgroundColor(Color.parseColor("#FF0000"));
                } else {
                    button.setBackgroundColor(Color.parseColor("#87939A"));
                }
            }
        });
    }
}

效果如图：

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值