Android中高亮BottomSheetDialog内的选中按钮

我已经构建了一个包含多个Outline样式按钮的BottomSheetDialog，希望实现：用户点击某一按钮后，下次打开该对话框时，该按钮能保持高亮（类似被按下的状态）。现有基础代码如下：

val dialog = BottomSheetDialog(this)
dialog.setContentView(R.layout.layout_dialog)

dialog.findViewById<Button>(R.id.button_1)?.setOnClickListener {
    ...
}
dialog.findViewById<Button>(R.id.button_2)?.setOnClickListener {
    ...
}

1. 配置按钮选中状态样式 #

Outline按钮默认没有选中状态的视觉反馈，需要先在drawable目录下创建按钮样式选择器文件（比如btn_outline_selector.xml），定义正常和选中状态的外观：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中/高亮状态 -->
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="@color/your_primary_color" />
            <solid android:color="@color/your_primary_color_alpha_10" /> <!-- 轻微填充色强化高亮 -->
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 正常状态 -->
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="@color/your_grey_color" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

然后在对话框布局layout_dialog.xml中给按钮绑定这个样式：

<Button
    android:id="@+id/button_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_outline_selector"
    android:text="按钮1"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton" />

<Button
    android:id="@+id/button_2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_outline_selector"
    android:text="按钮2"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton" />

2. 持久化保存选中状态 #

用SharedPreferences存储用户最后点击的按钮ID，确保APP重启后状态不丢失，同时在对话框初始化时恢复选中状态：

// 定义存储键常量
private const val SELECTED_BTN_ID_KEY = "selected_bottom_sheet_btn_id"

// 获取SharedPreferences实例
val sharedPref = getSharedPreferences("BottomSheetPrefs", Context.MODE_PRIVATE)

// 初始化BottomSheetDialog
val dialog = BottomSheetDialog(this)
dialog.setContentView(R.layout.layout_dialog)

// 获取按钮实例
val btn1 = dialog.findViewById<Button>(R.id.button_1)
val btn2 = dialog.findViewById<Button>(R.id.button_2)

// 恢复上次选中的按钮状态
val selectedBtnId = sharedPref.getInt(SELECTED_BTN_ID_KEY, -1)
when(selectedBtnId) {
    R.id.button_1 -> btn1?.isSelected = true
    R.id.button_2 -> btn2?.isSelected = true
}

// 按钮点击事件处理
btn1?.setOnClickListener {
    // 切换选中状态，取消其他按钮的选中状态
    it.isSelected = true
    btn2?.isSelected = false
    // 保存当前选中按钮ID到SharedPreferences
    sharedPref.edit().putInt(SELECTED_BTN_ID_KEY, R.id.button_1).apply()
    // 你的业务逻辑代码
    ...
}

btn2?.setOnClickListener {
    it.isSelected = true
    btn1?.isSelected = false
    sharedPref.edit().putInt(SELECTED_BTN_ID_KEY, R.id.button_2).apply()
    // 你的业务逻辑代码
    ...
}

3. 优化提示 #

• 如果按钮数量较多，建议通过循环遍历按钮列表来处理选中状态，减少重复代码。
• 样式中的颜色值可以根据APP主题自定义，保证选中状态和正常状态有清晰的视觉区分。
• 若使用Material Components的OutlinedButton，也可以通过修改主题中state_selected对应的属性来实现样式变化，无需自定义drawable。

内容的提问来源于stack exchange，提问作者DeKekem