android - 单击时更改我的 ToggleButton 的颜色

Question

我有一些切换按钮代表一周中的几天。

当用户点击 ToggleButton 时，我希望它切换状态并改变颜色，向用户表明它已被点击。

这是我的一个 ToggleButton 的样子:

<ToggleButton
    android:id="@+id/toggleButton_monday"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="16dp"
    android:background="@drawable/button_border"
    android:textOff="MON"
    android:textOn="MON"
    app:layout_constraintEnd_toStartOf="@+id/toggleButton_tuesday"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView10" />

我希望按钮在单击后看起来像这样(我想要相同的边框和形状，但只是颜色和状态发生了变化):

---

答案here不起作用，因为我的切换按钮已经有一个 android:background 来显示按钮周围的自定义边框。

答案here不起作用，因为我使用的是 ToggleButton 而不是 SwitchCompat

---

编辑:

这是当前的 android:background 我正在设置我的 ToggleButton:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="10dp"
        />
    <solid
        android:color="#FFFFFF"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="75dp"
        android:height="40dp"
        />
    <stroke
        android:width="3dp"
        android:color="#878787"
        />
</shape>

---

编辑:解决方案

谢谢@Broken 和@Moustafa Shahin，我综合使用了他们的答案。

首先，我为 ToggleButtons toggle_button_default.xml 和 toggle_button_checked.xml 创建了两个资源文件(在第一次编辑中检查上面的代码)。基本上，两个 XML 中的背景颜色不同。

其次，我创建了一个名为 toggle_button_state.xml 的选择器，并加载了我在上面创建的相应资源文件:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- WHEN IS CHECKED -->
    <item android:drawable="@drawable/toggle_button_default" android:state_checked="false" />

    <!-- WHEN IS NOT CHECKED -->
    <item android:drawable="@drawable/toggle_button_checked" android:state_checked="true" />

</selector>

最后，对于我的 ToggleButton，我将 toggle_button_state 设置为它们的背景:

<ToggleButton
    android:id="@+id/toggleButton_monday"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/toggle_button_state"
    android:textOff="MON"
    android:textOn="MON"/>

在 Activity 中，我有一个 onClick 方法，我可以用它来监控点击:

class RentActivity : AppCompatActivity(), View.OnClickListener {
    override fun onClick(v: View?) {
        when(v?.id){
            R.id.toggleButton_monday ->{
                Toast.makeText(this, "Monday Clicked", Toast.LENGTH_LONG).show()
                return
            }
     ...

Answer 1

您必须在 drawable 目录中创建包含状态列表的新文件。

您可以将其命名为toggle_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- WHEN IS CHECKED -->
    <item android:drawable="@color/colorPrimary" android:state_checked="false" />

    <!-- WHEN IS NOT CHECKED -->
    <item android:drawable="@color/colorAccent" android:state_checked="true" />

</selector>

以上文件可以用作 ToggleButton 的 background:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ToggleButton
        android:id="@+id/toggleButton_monday"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_background"
        android:textOff="ON"
        android:textOn="OFF" />

</LinearLayout>

默认按钮有灰色边框。你什么时候想删除它只需添加:

style="?android:attr/borderlessButtonStyle"

到 xml 文件中的 ToggleButton。

您还可以添加 OnCheckedChangeListener。如果你有很多按钮，你可以将它们全部添加到列表中，并在循环中为所有按钮添加相同的监听器:

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<ToggleButton> listOfButtons = new ArrayList<>();

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

        // Add ToggleButtons to list
        listOfButtons.add(findViewById(R.id.toggleButton_monday));

        // Create listener for all of them
        CompoundButton.OnCheckedChangeListener listener = (buttonView, isChecked) -> {
            // Do something
        };


        // Add listener to all od buttons
        for (ToggleButton button : listOfButtons) {
            button.setOnCheckedChangeListener(listener);
        }
    }
}