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的{{1}}设置：

ToggleButton

编辑：解决方案

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

首先，我为ToggleButtons <?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>和toggle_button_default.xml创建了两个资源文件（请在上面的第一个EDIT中检查代码）。基本上，两种XML的背景色是不同的。

第二，我创建了一个名为toggle_button_checked.xml的选择器，并加载了我在上面创建的相应资源文件：

toggle_button_state.xml

最后，对于我的ToggleButton，我将<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:drawable="@drawable/toggle_button_default" android:state_checked="false" />  <item android:drawable="@drawable/toggle_button_checked" android:state_checked="true" /> </selector>设置为它们的背景：

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"/>方法，可用于监视点击次数：

onClick

Answer 1

您可以创建2个后台资源文件，并根据状态进行更改：

ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    if (isChecked) {
        // The toggle is enabled
        //the background resource which mean status is enable
    } else {
        // The toggle is disabled
        //the background resource which mean status is disabled
    }
}

}）;

Answer 2

You have to create new file in drawable directory with list of states.

You can name it 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>

Above file you can use as background of ToggleButton:

<?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>

By default button has grey border. When would you like to remove it just add:

style="?android:attr/borderlessButtonStyle"

to your ToggleButton in xml file.

You can also add OnCheckedChangeListener. If you have many buttons you can add all of them to the list, and in loop add that same listener for all of them:

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);
        }
    }
}

Answer 3

如果您正在寻找一种优雅的方法来执行此操作，则可能要尝试使用GridView。...

<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:columnWidth="100dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="24dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="spacingWidthUniform"
    />

...，这将使您可以以使项目更轻松地遍历项目的方式填充项目的布局。您可以创建一个自定义适配器并将其分配给gridview：

GridView gridview = findViewById(R.id.gridview);
MyCustomAdapter _Adapter = new MyCustomAdapter(getApplicationContext());
gridview.setAdapter(_Adapter);

这将允许您在一个位置为所有按钮设置一个onClickListener：

gridview.setOnItemClickListener((parent, view, position, id) -> {
        _Adapter.toggleItem(position);
    });

您可以找到有关创建自定义gridview适配器here

的深入教程。

点击时更改我的ToggleButton的颜色

3 个答案: