Android - 带有图像的自定义多击复选框

Question

我想创建一个具有四种不同状态的自定义复选框：

• 未选中（一个空复选框）
• 勾选（绿色勾选）
• 不可用（红十字）
• 部分不可用（橙色勾号）

我确实找到了here 如何使用自定义图像创建一个复选框（状态为按下、聚焦、悬停和默认）。但我想要的是一种在四种状态之间循环的方法，如下所示：

1. 按一次：选中绿色；
2. 按两次：这是一个红十字；
3. 三次价格：橙色格子；
4. 按四次：再次取消选中。

PS：我知道在 android 应用程序中，仅使用 4 种状态进行下拉菜单或选择其中一种状态的弹出窗口可能更容易。但我想要在这两个中，上面的第三个选项，所以用户可以自己决定他们更喜欢这三个设置中的哪一个。

PSS：当我输入这个时，我想出了一个带有未选中图像的按钮的想法，当你点击它时，它会将 image-src 替换为下一个，同时保持其他所有内容相同（如宽度/高度和边距/填充）。这是解决这种情况的最佳方法，还是有人有更优雅的解决方案？

提前感谢您的回复。

Answer 1

正如 PSS 中所述，我只是在输入上述问题时才想到解决方案。我使用了一个 ImageButton，当它被点击时会改变它的来源。代码如下：

xml 中的图像按钮：

<ImageButton
    android:id="@+id/ibtnCheckbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/checkbox_content_description"
    android:src="@drawable/checkbox_unchecked"
    android:background="@drawable/transparent_button_background" />

transparent_button_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@android:color/transparent" />
    <item android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:drawable="@android:color/transparent" />
</selector>

活动：

public class MainActivity extends ActionBarActivity {
    private ImageButton cbButton;
    private int status;
    private int checkbox_images[] = {
        R.drawable.checkbox_unchecked,
        R.drawable.checkbox_checked,
        R.drawable.checkbox_error,
        R.drawable.checkbox_partly
    };

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

        status = 0;
        addListenerToButton();
    }

    private void addListenerToButton(){
        cbButton = (ImageButton) findViewById(R.id.ibtnCheckbox);
        cbButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                switch(status){
                    // Unchecked -> Green checked
                    case 0:
                    // Green checked -> Red cross
                    case 1:
                    // Red cross -> Orange-yellow checked
                    case 2:
                        cbButton.setImageResource(checkbox_images[++status]);
                        break;
                    // Orange-yellow checked -> Unchecked
                    case 3:
                        cbButton.setImageResource(checkbox_images[status = 0]);
                        break;
                    // Default (just in case)
                    default:
                        status = 0;
                        cbButton.setImageResource(checkbox_images[status++]);
                        break;
                }
            }
        });
    }

    ...
}