You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

M3 Android中MaterialButtonGroup单选模式配置及按钮选中样式设置问题

M3 Android中MaterialButtonGroup单选模式配置及按钮选中样式设置问题

嗨,我来帮你搞定这个M3 MaterialButtonGroup的单选和选中样式问题~其实M3的组件已经帮我们封装好了大部分逻辑,只需要做几个简单的调整就能实现需求,下面一步步来:

一、先搞定单选模式:一行属性实现自动单选

你原来的布局里用的是普通Button,这会导致无法支持选中状态,首先要把所有<Button>换成<com.google.android.material.button.MaterialButton>,然后给MaterialButtonGroup加个属性就能自动实现单选:

修改后的布局代码

<com.google.android.material.button.MaterialButtonGroup
    android:id="@+id/buttonGroup"
    style="@style/Widget.Material3.MaterialButtonGroup.Connected"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    <!-- 核心属性:开启单选模式,点击一个按钮会自动取消其他的选中状态 -->
    app:singleSelection="true"
    <!-- 可选:设置为true时,必须保持至少一个按钮被选中(无法取消所有选中),默认false -->
    app:selectionRequired="false">

    <com.google.android.material.button.MaterialButton
        style="@style/MyOutlinedSelectableButton"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        <!-- 默认未选中,可设置为true默认选中 -->
        app:checked="false"/>

    <com.google.android.material.button.MaterialButton
        style="@style/MyOutlinedSelectableButton"
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:checked="false"/>

    <com.google.android.material.button.MaterialButton
        style="@style/MyOutlinedSelectableButton"
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:checked="false"/>

</com.google.android.material.button.MaterialButtonGroup>

二、配置按钮选中时的样式:保持M3主题一致性

接下来我们要给按钮设置「选中/未选中」的状态样式,推荐用M3的系统颜色属性来保持主题统一,我们可以通过状态列表颜色文件+自定义样式来实现:

1. 先创建状态列表颜色文件

res/color目录下创建三个状态列表文件(如果没有color目录就新建一个):

① 按钮背景色状态列表 button_background_tint.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中时用主题主色作为背景 -->
    <item android:color="?attr/colorPrimary" android:state_checked="true"/>
    <!-- 未选中时用主题表面色 -->
    <item android:color="?attr/colorSurface" android:state_checked="false"/>
</selector>

② 按钮边框色状态列表 button_stroke_tint.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中时边框用主色 -->
    <item android:color="?attr/colorPrimary" android:state_checked="true"/>
    <!-- 未选中时用主题默认边框色 -->
    <item android:color="?attr/colorOutline" android:state_checked="false"/>
</selector>

③ 按钮文字颜色状态列表 button_text_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中时文字用主色对应的文字色 -->
    <item android:color="?attr/colorOnPrimary" android:state_checked="true"/>
    <!-- 未选中时用表面色对应的文字色 -->
    <item android:color="?attr/colorOnSurface" android:state_checked="false"/>
</selector>

2. 自定义按钮样式

res/values/styles.xml里定义一个继承自M3 OutlineButton的样式,把上面的状态列表关联进去:

<style name="MyOutlinedSelectableButton" parent="Widget.Material3.Button.OutlinedButton">
    <!-- 关联背景色状态列表 -->
    <item name="backgroundTint">@color/button_background_tint</item>
    <!-- 关联边框色状态列表 -->
    <item name="strokeColor">@color/button_stroke_tint</item>
    <!-- 关联文字颜色状态列表 -->
    <item name="android:textColor">@color/button_text_color</item>
    <!-- 允许按钮切换选中状态 -->
    <item name="android:checkable">true</item>
    <!-- 保持和Connected Group的圆角适配,用M3系统圆角值 -->
    <item name="cornerRadius">@dimen/m3_sys_corner_radius_medium</item>
</style>

三、代码里的小优化:默认选中与事件监听

如果需要默认选中某个按钮,或者监听选中变化,只需要在Activity/Fragment里加几行代码:

// 找到按钮组
MaterialButtonGroup buttonGroup = findViewById(R.id.buttonGroup);
// 默认选中第一个按钮
buttonGroup.check(R.id.button1);

// 可选:监听选中事件,处理业务逻辑
buttonGroup.addOnButtonCheckedListener((group, checkedId, isChecked) -> {
    if (isChecked) { // 只处理选中事件(取消选中时isChecked为false)
        switch (checkedId) {
            case R.id.button1:
                // 点击选中按钮1时的逻辑
                break;
            case R.id.button2:
                // 点击选中按钮2时的逻辑
                break;
            case R.id.button3:
                // 点击选中按钮3时的逻辑
                break;
        }
    }
});

几个关键注意点要记牢!

  1. 必须用MaterialButton:普通Button不支持checked状态和M3的样式属性,这是很多人踩坑的点
  2. 单选逻辑不用自己写app:singleSelection="true"会自动帮你取消其他按钮的选中状态,完全不用手动处理
  3. 样式尽量用M3系统属性:比如?attr/colorPrimary这种,换主题时样式会自动适配,不用改代码
  4. Connected样式的圆角自动处理:MaterialButtonGroup的Connected样式会自动调整相邻按钮的圆角(比如中间按钮的左右圆角会被去掉),不需要手动设置每个按钮的圆角

这样调整后,你的按钮组就会完美实现「点击一个按钮自动选中,其他自动取消,选中状态有明显的样式区分」的效果啦😉

火山引擎 最新活动