自定义复选框图片Android


182

有没有一种简单的方法可以将自定义图像用于复选框?我想复制gmail的“加星标”行为。因此,我想有一个复选框,当选中该复选框时,它是一个实心星星。如果未选中,则为空星。我是否必须使用imageview并自己做自己的逻辑?

Answers:


128

复选框是巴顿的孩子描述你可以只与几个国家给你的复选框的背景图像这里,下“按钮式”:

...并在这里举例说明:


26
谢谢,我实际上在这里找到了我真正需要的东西-ride.blogspot.com/2010/04/…但是,如果我想要一个真实的自定义图片= P
Falmarri,2010年

2
谢谢。正是我一直在寻找的东西-我已经弄清楚了整个状态,但是我一直在设置android:background而不是android:button,但最终设置了2个按钮。现在一切正常。
Artem Russakovskii

1
-1。android:button下面的解决方案比使用background属性好得多!
Orabîg

8
@Orabîg:这个数字投票是错误的。该问题已得到完美解答(“自定义复选框图像”)。此特定加星标按钮存在快捷方式的事实并不会使该答案无效。
ereOn 2012年

尽管这可能是一篇过时的文章,但想补充一点,Android Studio还使用了android:button =“ @ android:drawable / btn_star”方法
生气

288

创建一个可绘制的复选框选择器:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/checkbox" 
          android:state_checked="false"/>
    <item android:drawable="@drawable/checkboxselected" 
          android:state_checked="true"/>
    <item android:drawable="@drawable/checkbox"/>    
</selector>

确保您的复选框是这样的 android:button="@drawable/checkbox_selector"

<CheckBox
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:button="@drawable/checkbox_selector"
    android:text="CheckBox"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="@color/Black" />

您在哪个记录中指定此选择器?在XML文件本身中,您还要在其中指定CheckBox?
Tom Hammond 2014年

汤姆:在可绘制文件夹中创建选择器,在布局文件夹中选中复选框
Mohamed Hisham Ibn Hanifa 2014年

我必须在复选框中将“背景”更改为“按钮”
Francisco Corrales Morales


2
之后,我将我的项目升级到android x,但是我无法按照您在api级别21和android:button无效之前所说的那样自定义复选框。
Misagh Aghakhani

44

将btn_check.xml从android-sdk / platforms / android-#/ data / res / drawable复制到项目的drawable文件夹,然后将“ on”和“ off”图像状态更改为自定义图像。

然后您的xml将只需要 android:button="@drawable/btn_check"

<CheckBox
    android:button="@drawable/btn_check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true" />

如果要使用其他默认android图标,则可以使用 android:button="@android:drawable/..."


2
不好的建议。图标可能会在版本之间更改,并且可能完全消失。如果您真的喜欢默认图标,则可以从源代码中获取它。
Korniltsev Anatoly 2012年

您是说直接通过“ @android:drawable / ...”引用默认图标是一个坏主意,还是整个过程?
受伤的史蒂文·琼斯2012年

2
示例:对全息图标的引用将使您的应用在蜂窝前设备上崩溃。维护和调试此类故障确实非常困难。因此,我通常不仅复制xml,而且复制图像,以确保找到资源。这对于确保每个设备上的UI外观同样重要。
Korniltsev Anatoly 2012年

15

res / drawable / day_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:drawable="@drawable/dayselectionunselected"
              android:state_checked="false"/>
        <item android:drawable="@drawable/daysselectionselected"
              android:state_checked="true"/>
        <item android:drawable="@drawable/dayselectionunselected"/>
    </selector>

RES /布局/my_layout.xml

<CheckBox
    android:id="@+id/check"
    android:layout_width="39dp"
    android:layout_height="39dp"
    android:background="@drawable/day_selector"
    android:button="@null"
    android:gravity="center"
    android:text="S"
    android:textColor="@color/black"
    android:textSize="12sp" />

1
一些解释将帮助新用户了解您的代码如何解决该问题。
Brian Tompsett-汤莱恩

7

如果您拥有Android开源代码,则可以在以下位置找到样式定义:
src / frameworks / base / core / res / res / values

<style name="Widget.CompoundButton.CheckBox">
    <item name="android:background">
        @android:drawable/btn_check_label_background
    </item>
    <item name="android:button">
        ?android:attr/listChoiceIndicatorMultiple
    </item>
</style>

4

试试吧 -

package com;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;



public class CheckBoxImageView extends ImageView implements View.OnClickListener {
    boolean checked;
    int defImageRes;
    int checkedImageRes;
    OnCheckedChangeListener onCheckedChangeListener;

    public CheckBoxImageView(Context context, AttributeSet attr, int defStyle) {
        super(context, attr, defStyle);
        init(attr, defStyle);
    }

    public CheckBoxImageView(Context context, AttributeSet attr) {
        super(context, attr);
        init(attr, -1);
    }

    public CheckBoxImageView(Context context) {
        super(context);
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
        setImageResource(checked ? checkedImageRes : defImageRes);
    }

    private void init(AttributeSet attributeSet, int defStyle) {
        TypedArray a = null;
        if (defStyle != -1)
            a = getContext().obtainStyledAttributes(attributeSet, R.styleable.CheckBoxImageView, defStyle, 0);
        else
            a = getContext().obtainStyledAttributes(attributeSet, R.styleable.CheckBoxImageView);
        defImageRes = a.getResourceId(0, 0);
        checkedImageRes = a.getResourceId(1, 0);
        checked = a.getBoolean(2, false);
        a.recycle();
        setImageResource(checked ? checkedImageRes : defImageRes);
        setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        checked = !checked;
        setImageResource(checked ? checkedImageRes : defImageRes);
        onCheckedChangeListener.onCheckedChanged(this, checked);
    }

    public void setOnCheckedChangeListener(OnCheckedChangeListener onCheckedChangeListener) {
        this.onCheckedChangeListener = onCheckedChangeListener;
    }

    public static interface OnCheckedChangeListener {
        void onCheckedChanged(View buttonView, boolean isChecked);
    }
}

添加此属性-

<declare-styleable name="CheckBoxImageView">
        <attr name="default_img" format="integer"/>
        <attr name="checked_img" format="integer"/>
        <attr name="checked" format="boolean"/>
</declare-styleable>

使用像-

 <com.adonta.ziva.consumer.wrapper.CheckBoxImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/checkBox"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:clickable="true"
        android:padding="5dp"
        app:checked_img="@drawable/check_box_checked"
        app:default_img="@drawable/check_box" />

它将解决您所有的问题。


它缺少onSaveInstanceState()onRestoreInstanceState()方法,我认为检查状态将在旋转时丢失
EpicPandaForce 2015年

2

另一种选择是使用背景为空的ToggleButton和自定义按钮。

在下面的示例中,还包括文本颜色的选择器。

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/toggle_selector"
    android:background="@null"
    android:paddingLeft="10dp"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:textColor="@drawable/toggle_text"
    android:textOn="My on state"
    android:textOff="My off state" />

toggle_selector.xml

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

    <item
        android:state_checked="true"
        android:drawable="@drawable/state_on" />

    <item
        android:drawable="@drawable/state_off" />

</selector>

toggle_text.xml

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

    <item
        android:state_checked="true"
        android:color="@color/app_color" />

    <item
        android:color="@android:color/darker_gray" />

</selector>

2

如果您使用的是自定义适配器android:focusable="false"android:focusableInTouchMode="false"那么在使用复选框时,且必须使列表项可单击。

<CheckBox
        android:id="@+id/checkbox_fav"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/checkbox_layout"/>

drawable> checkbox_layout.xml中

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/uncked_checkbox"
        android:state_checked="false"/>
    <item android:drawable="@drawable/selected_checkbox"
        android:state_checked="true"/>
    <item android:drawable="@drawable/uncked_checkbox"/>
</selector>

1

如果您使用androidx.appcompat:程序兼容性,并希望自定义绘制(类型selectorandroid:state_checked上除了新版本的平台老平台版本的工作),你需要使用

    <CheckBox
        app:buttonCompat="@drawable/..."

代替

    <CheckBox
        android:button="@drawable/..."

1

根据Enselic和Rahul的答案。

它对我有用(在API 21之前和之后):

<CheckBox
    android:id="@+id/checkbox"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:text=""
    android:gravity="center"

    android:background="@drawable/checkbox_selector"
    android:button="@null"
    app:buttonCompat="@null" />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.