在安卓上创建一个三态复选框

Question

在安卓上创建一个三态复选框

javaandroidcheckbox

29

我陷入了一个大问题：我想在Android上制作三态复选框。它是一个带有复选框的ListView上的复选框。它应该允许用户在以下三种状态之间切换：

全部选中
全部不选中
杂项选中

并且可以选择在更改后保留杂项状态。

如果我没错的话，我应该创建一个CompoundButton类的子类并实现一个int mstate而不是boolean mchecked。然后我应该重写事件监听器、保存状态的函数以及状态的获取器和设置器。

我的问题基本上是如何实现这个？如何在可绘制状态之间切换？（我已经在xml中实现了middle_state），以及如何正确地实现事件处理程序？

这是我开始实现的代码：

public class TriStateCheckBox extends CompoundButton{
    private int state;

    public TriStateCheckBox(Context context) {
        super(context);
    }
    public static interface onCheckChangedListener{
        void onCheckChanged(TriStateCheckBox view, int state);
    }

    public void onCheckChanged(TriStateCheckBox view, int state){
        this.state = state;
    }
}

这里是股票CompoundButton的代码：

/*
 * Copyright (C) 2007 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package android.widget;

import com.android.internal.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Parcel;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.ViewDebug;
import android.view.accessibility.AccessibilityEvent;
import android.view.accessibility.AccessibilityNodeInfo;

/**
 * <p>
 * A button with two states, checked and unchecked. When the button is pressed
 * or clicked, the state changes automatically.
 * </p>
 *
 * <p><strong>XML attributes</strong></p>
 * <p>
 * See {@link android.R.styleable#CompoundButton
 * CompoundButton Attributes}, {@link android.R.styleable#Button Button
 * Attributes}, {@link android.R.styleable#TextView TextView Attributes}, {@link
 * android.R.styleable#View View Attributes}
 * </p>
 */
public abstract class CompoundButton extends Button implements Checkable {
    private boolean mChecked;
    private int mButtonResource;
    private boolean mBroadcasting;
    private Drawable mButtonDrawable;
    private OnCheckedChangeListener mOnCheckedChangeListener;
    private OnCheckedChangeListener mOnCheckedChangeWidgetListener;

    private static final int[] CHECKED_STATE_SET = {
        R.attr.state_checked
    };

    public CompoundButton(Context context) {
        this(context, null);
    }

    public CompoundButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CompoundButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        TypedArray a =
                context.obtainStyledAttributes(
                        attrs, com.android.internal.R.styleable.CompoundButton, defStyle, 0);

        Drawable d = a.getDrawable(com.android.internal.R.styleable.CompoundButton_button);
        if (d != null) {
            setButtonDrawable(d);
        }

        boolean checked = a
                .getBoolean(com.android.internal.R.styleable.CompoundButton_checked, false);
        setChecked(checked);

        a.recycle();
    }

    public void toggle() {
        setChecked(!mChecked);
    }

    @Override
    public boolean performClick() {
        /*
         * XXX: These are tiny, need some surrounding 'expanded touch area',
         * which will need to be implemented in Button if we only override
         * performClick()
         */

        /* When clicked, toggle the state */
        toggle();
        return super.performClick();
    }

    @ViewDebug.ExportedProperty
    public boolean isChecked() {
        return mChecked;
    }

    /**
     * <p>Changes the checked state of this button.</p>
     *
     * @param checked true to check the button, false to uncheck it
     */
    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mChecked = checked;
            refreshDrawableState();

            // Avoid infinite recursions if setChecked() is called from a listener
            if (mBroadcasting) {
                return;
            }

            mBroadcasting = true;
            if (mOnCheckedChangeListener != null) {
                mOnCheckedChangeListener.onCheckedChanged(this, mChecked);
            }
            if (mOnCheckedChangeWidgetListener != null) {
                mOnCheckedChangeWidgetListener.onCheckedChanged(this, mChecked);
            }

            mBroadcasting = false;            
        }
    }

    /**
     * Register a callback to be invoked when the checked state of this button
     * changes.
     *
     * @param listener the callback to call on checked state change
     */
    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeListener = listener;
    }

    /**
     * Register a callback to be invoked when the checked state of this button
     * changes. This callback is used for internal purpose only.
     *
     * @param listener the callback to call on checked state change
     * @hide
     */
    void setOnCheckedChangeWidgetListener(OnCheckedChangeListener listener) {
        mOnCheckedChangeWidgetListener = listener;
    }

    /**
     * Interface definition for a callback to be invoked when the checked state
     * of a compound button changed.
     */
    public static interface OnCheckedChangeListener {
        /**
         * Called when the checked state of a compound button has changed.
         *
         * @param buttonView The compound button view whose state has changed.
         * @param isChecked  The new checked state of buttonView.
         */
        void onCheckedChanged(CompoundButton buttonView, boolean isChecked);
    }

    /**
     * Set the background to a given Drawable, identified by its resource id.
     *
     * @param resid the resource id of the drawable to use as the background 
     */
    public void setButtonDrawable(int resid) {
        if (resid != 0 && resid == mButtonResource) {
            return;
        }

        mButtonResource = resid;

        Drawable d = null;
        if (mButtonResource != 0) {
            d = getResources().getDrawable(mButtonResource);
        }
        setButtonDrawable(d);
    }

    /**
     * Set the background to a given Drawable
     *
     * @param d The Drawable to use as the background
     */
    public void setButtonDrawable(Drawable d) {
        if (d != null) {
            if (mButtonDrawable != null) {
                mButtonDrawable.setCallback(null);
                unscheduleDrawable(mButtonDrawable);
            }
            d.setCallback(this);
            d.setState(getDrawableState());
            d.setVisible(getVisibility() == VISIBLE, false);
            mButtonDrawable = d;
            mButtonDrawable.setState(null);
            setMinHeight(mButtonDrawable.getIntrinsicHeight());
        }

        refreshDrawableState();
    }

    @Override
    public void onInitializeAccessibilityEvent(AccessibilityEvent event) {
        super.onInitializeAccessibilityEvent(event);
        event.setChecked(mChecked);
    }

    @Override
    public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info) {
        super.onInitializeAccessibilityNodeInfo(info);
        info.setCheckable(true);
        info.setChecked(mChecked);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        final Drawable buttonDrawable = mButtonDrawable;
        if (buttonDrawable != null) {
            final int verticalGravity = getGravity() & Gravity.VERTICAL_GRAVITY_MASK;
            final int height = buttonDrawable.getIntrinsicHeight();

            int y = 0;

            switch (verticalGravity) {
                case Gravity.BOTTOM:
                    y = getHeight() - height;
                    break;
                case Gravity.CENTER_VERTICAL:
                    y = (getHeight() - height) / 2;
                    break;
            }

            buttonDrawable.setBounds(0, y, buttonDrawable.getIntrinsicWidth(), y + height);
            buttonDrawable.draw(canvas);
        }
    }

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked()) {
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        }
        return drawableState;
    }

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();

        if (mButtonDrawable != null) {
            int[] myDrawableState = getDrawableState();

            // Set the state of the Drawable
            mButtonDrawable.setState(myDrawableState);

            invalidate();
        }
    }

    @Override
    protected boolean verifyDrawable(Drawable who) {
        return super.verifyDrawable(who) || who == mButtonDrawable;
    }

    @Override
    public void jumpDrawablesToCurrentState() {
        super.jumpDrawablesToCurrentState();
        if (mButtonDrawable != null) mButtonDrawable.jumpToCurrentState();
    }

    static class SavedState extends BaseSavedState {
        boolean checked;

        /**
         * Constructor called from {@link CompoundButton#onSaveInstanceState()}
         */
        SavedState(Parcelable superState) {
            super(superState);
        }

        /**
         * Constructor called from {@link #CREATOR}
         */
        private SavedState(Parcel in) {
            super(in);
            checked = (Boolean)in.readValue(null);
        }

        @Override
        public void writeToParcel(Parcel out, int flags) {
            super.writeToParcel(out, flags);
            out.writeValue(checked);
        }

        @Override
        public String toString() {
            return "CompoundButton.SavedState{"
                    + Integer.toHexString(System.identityHashCode(this))
                    + " checked=" + checked + "}";
        }

        public static final Parcelable.Creator<SavedState> CREATOR
                = new Parcelable.Creator<SavedState>() {
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };
    }

    @Override
    public Parcelable onSaveInstanceState() {
        // Force our ancestor class to save its state
        setFreezesText(true);
        Parcelable superState = super.onSaveInstanceState();

        SavedState ss = new SavedState(superState);

        ss.checked = isChecked();
        return ss;
    }

    @Override
    public void onRestoreInstanceState(Parcelable state) {
        SavedState ss = (SavedState) state;

        super.onRestoreInstanceState(ss.getSuperState());
        setChecked(ss.checked);
        requestLayout();
    }
}

这是我的xml状态列表实现（可工作）：

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

    <item android:state_checked="false"
          android:state_pressed="true"
          android:drawable="@drawable/btn_check_off_pressed" /> <!-- unchecked pressed -->

    <item android:state_checked="false"
          android:state_selected="true"
          android:drawable="@drawable/btn_check_off_selected" /> <!-- unchecked selected -->

    <item android:state_checked="true"
          android:state_pressed="false"
          android:state_focused="false"
          android:drawable="@drawable/btn_check_on" /> <!-- checked -->

    <item android:state_checked="true"
          android:state_pressed="true"
          android:drawable="@drawable/btn_check_on_pressed" /> <!-- checked pressed-->

    <item android:state_checked="true"
          android:state_selected="true"
          android:drawable="@drawable/btn_check_on_selected" /> <!-- checked selected-->

    <item android:state_middle="true"
          android:state_pressed="false"
          android:state_focused="false"
          android:drawable="@drawable/btn_check_middle" /> <!-- middle -->        

    <item android:state_middle="true"
          android:state_pressed="true"
          android:drawable="@drawable/btn_check_middle_pressed" /> <!-- middle pressed-->

    <item android:state_middle="true"
          android:state_selected="true"
          android:drawable="@drawable/btn_check_middle_selected"  /> <!-- middle selected--> 

    <item android:drawable="@drawable/btn_check_off" /> <!-- unchecked -->
</selector>

以下是复选框的标准XML实现：

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Enabled states -->

    <item android:state_checked="true" android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />

    <item android:state_checked="true" android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_pressed" />
    <item android:state_checked="false" android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_pressed" />

    <item android:state_checked="true" android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_selected" />
    <item android:state_checked="false" android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_selected" />

    <item android:state_checked="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />
    <item android:state_checked="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />


    <!-- Disabled states -->

    <item android:state_checked="true" android:state_window_focused="false"
          android:drawable="@drawable/btn_check_on_disable" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:drawable="@drawable/btn_check_off_disable" />

    <item android:state_checked="true" android:state_focused="true"
          android:drawable="@drawable/btn_check_on_disable_focused" />
    <item android:state_checked="false" android:state_focused="true"
          android:drawable="@drawable/btn_check_off_disable_focused" />

    <item android:state_checked="false" android:drawable="@drawable/btn_check_off_disable" />
    <item android:state_checked="true" android:drawable="@drawable/btn_check_on_disable" />

</selector>

- Thomas

为了实现视觉效果，请使用level-list drawable。 - Barend

我已经创建了一个自定义的可绘制状态列表，并且它可以与默认复选框代码很好地配合使用。但是，为什么在原始复选框使用状态列表时要使用级别列表可绘制对象呢？ - Thomas

@Thomas 你找到合适的方法论了吗？ - ashishdhiman2007

@ashishdhiman2007 这是一个非常古老的话题，我不确定了... 你可以自己看一下：https://github.com/feeeermendoza/dev.android.HFUNotenalarm - Thomas

5个回答

4

最新版本的材料库支持三态复选框。请将以下内容添加到build.gradle文件中：

implementation 'com.google.android.material:material:1.8.0-rc01'

之后，您可以在xml中设置不确定状态：

  <com.google.android.material.checkbox.MaterialCheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:checkedState="indeterminate" />

或者通过代码：

    checkbox.checkedState = when (childrenSelected) {
        0 -> MaterialCheckBox.STATE_UNCHECKED
        childrenTotal -> MaterialCheckBox.STATE_CHECKED
        else -> MaterialCheckBox.STATE_INDETERMINATE
    }

其中，childrenSelected 是选中复选框的数量。您还可以根据自己的喜好自定义复选框外观，请参阅完整文档： https://developer.android.com/reference/com/google/android/material/checkbox/MaterialCheckBox

- anro

1

在 XML 布局中使用 com.google.android.material.checkbox.MaterialCheckBox。 - YCuicui

1

在 XML 布局中使用 com.google.android.material.checkbox.MaterialCheckBox。 - YCuicui

1

以前我也想做同样的事情。经过一番艰苦的研究，我采用了这种方法。

优点：

动画按钮
材料设计

TriStateMaterialCheckBox.kt:

import android.content.Context
import android.util.AttributeSet
import androidx.annotation.StyleableRes
import com.google.android.material.checkbox.MaterialCheckBox

class TriStateMaterialCheckBox : MaterialCheckBox {
    constructor(context: Context) : this(context, null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, com.google.android.material.R.attr.checkboxStyle)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        val sets = intArrayOf(R.attr.state)
        
        val typedArray = context.obtainStyledAttributes(attrs, sets)
        
        try {
            state = typedArray.getInt(ATTR_STATE, STATE_UNCHECKED)
        } finally {
            typedArray.recycle()
        }
        
        initComponent()
    }
    
    companion object {
        // @formatter:off
        @StyleableRes private const val ATTR_STATE = 0
        // @formatter:on
        
        const val STATE_UNCHECKED: Int = 0
        const val STATE_INDETERMINATE: Int = 1
        const val STATE_CHECKED: Int = 2
        
        private val UNCHECKED = intArrayOf(R.attr.state_unchecked)
        private val INDETERMINATE = intArrayOf(R.attr.state_indeterminate)
        private val CHECKED = intArrayOf(R.attr.state_checked)
    }
    
    private var isChangingState = false
    
    var state: Int
        @Throws(IllegalStateException::class)
        set(value) {
            if (isChangingState) return
            if (field == value) return
            isChangingState = true
            
            field = value
            isChecked = when (value) {
                STATE_UNCHECKED -> false
                STATE_INDETERMINATE -> true
                STATE_CHECKED -> true
                else -> throw IllegalStateException("$value is not a valid state for ${this.javaClass.name}")
            }
            refreshDrawableState()
            
            isChangingState = false
            
            onStateChanged?.let { it(this@TriStateMaterialCheckBox, value) }
        }
    
    var onStateChanged: ((TriStateMaterialCheckBox, Int) -> Unit)? = null
    
    private fun initComponent() {
        setButtonDrawable(R.drawable.tri_state_button)
        setOnCheckedChangeListener { _, _ ->
            state = when (state) {
                STATE_UNCHECKED -> STATE_CHECKED
                STATE_INDETERMINATE -> STATE_CHECKED
                STATE_CHECKED -> STATE_UNCHECKED
                else -> -1
            }
        }
    }
    
    override fun onCreateDrawableState(extraSpace: Int): IntArray {
        val drawableState = super.onCreateDrawableState(extraSpace + 1)
        
        mergeDrawableStates(
            drawableState, when (state) {
                STATE_UNCHECKED -> UNCHECKED
                STATE_INDETERMINATE -> INDETERMINATE
                STATE_CHECKED -> CHECKED
                else -> throw IllegalStateException("$state is not a valid state for ${this.javaClass.name}")
            }
        )
        
        return drawableState
    }
}

attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="state" format="enum">
        <enum name="unchecked" value="0" />
        <enum name="indeterminate" value="1" />
        <enum name="checked" value="2" />
    </attr>
    
    <declare-styleable name="TriStateMaterialCheckBox">
        <attr name="state" />
        <attr name="state_unchecked" format="boolean" />
        <attr name="state_indeterminate" format="boolean" />
        <attr name="state_checked" format="boolean" />
    </declare-styleable>
</resources>

tri_state_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">
    <item android:drawable="@drawable/ic_unchecked" app:state_unchecked="true" />
    <item android:drawable="@drawable/ic_indeterminate" app:state_indeterminate="true" />
    <item android:drawable="@drawable/ic_checked" app:state_checked="true" />
    <item android:drawable="@drawable/ic_unchecked" />
</selector>

- MMD

1

如果您想要一个没有矢量动画的复选框来改变状态，那么可以尝试使用这个简单的自定义复选框类来实现不定状态。

在此github查看示例。

- Android Dev

0

如果您坚持要使用每个元素都有3种状态的复选框，则以下方法可能有效，但我尚未尝试过： - 创建一个扩展CheckBox类的类。 - 添加一个类型为int或byte的“checkstate”变量。该类应具有一个布尔值“isChecked”变量。 - 重写onClick或onCheck方法，以便将checkstate变量在三种状态之间更改，而不是切换isChecked变量。 - 在显示时，检查“checkstate”并进行一些视觉效果以显示第三种状态。 - 最后，请告诉我它是否有效。

- Mr. M

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tazer · Accepted Answer

旧话题，但我提供我的解决方案给那些感兴趣的人：

public class CheckBoxTriStates extends CheckBox {
    static private final int UNKNOW = -1;
    static private final int UNCHECKED = 0;
    static private final int CHECKED = 1;
    private int state;

    public CheckBoxTriStates(Context context) {
        super(context);
        init();
    }

    public CheckBoxTriStates(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CheckBoxTriStates(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        state = UNKNOW;
        updateBtn();

        setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            // checkbox status is changed from uncheck to checked.
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                switch (state) {
                    default:
                    case UNKNOW:
                        state = UNCHECKED;
                        break;
                    case UNCHECKED:
                        state = CHECKED;
                        break;
                    case CHECKED:
                        state = UNKNOW;
                        break;
                }
                updateBtn();
            }
        });
    }

    private void updateBtn() {
        int btnDrawable = R.drawable.ic_checkbox_indeterminate_black;
        switch (state) {
            default:
            case UNKNOW:
                btnDrawable = R.drawable.ic_checkbox_indeterminate_black;
                break;
            case UNCHECKED:
                btnDrawable = R.drawable.ic_checkbox_unchecked_black;
                break;
            case CHECKED:
                btnDrawable = R.drawable.ic_checkbox_checked_black;
                break;
        }

        setButtonDrawable(btnDrawable);
    }

    public int getState() {
        return state;
    }

    public void setState(int state) {
        this.state = state;
        updateBtn();
    }
}

你可以在这里找到按钮资源，它运作得完美。