カスタムチェックボックス画像Android


182

チェックボックスにカスタム画像を使用する簡単な方法はありますか?Gmailの「スター付き」の動作を複製しようとしています。だから私はチェックされたときに星で塗りつぶされたチェックボックスを持ちたいのです。オフにすると空の星になります。imageviewを使用して自分自身のロジックを自分で実行する必要がありますか?

回答:


128

チェックボックスはボタンの子であり、「ボタンのスタイル」ここで説明するように、チェックボックスにいくつかの状態の背景画像を指定できます。

...そしてここに例示:


26
ありがとう、私は実際に必要なものを正確に見つけましたit-ride.blogspot.com/2010/04/…しかし、実際のカスタムイメージが必要な場合は、自分の方法でそれを行わなければなりません
でした

2
ありがとうございました。まさに私が探していたもの-状態全体を把握しましたが、android:buttonの代わりにandroid:backgroundを設定し、代わりに2つのボタンを設定しました。今ではすべてうまくいきます。
Artem Russakovskii 2010年

1
-1。android:button以下の解決策は、背景属性を使用するよりもはるかに優れています!
Orabîg

8
@Orabîg:この反対票は間違っています。質問は完全に回答されています(「カスタムチェックボックス画像」)。この特定のスター付きボタンにショートカットが存在するという事実は、この回答を無効にするものではありません。
ereOn 2012年

これはおそらく古い投稿ですが、Androidスタジオでもandroid:button = "@ android:drawable / btn_star"メソッドを使用していることを追加したいと思います
Angry 84

289

描画可能なチェックボックスセレクタを作成します。

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

このセレクターをどのレコードに指定しますか?CheckBoxも指定しているXMLファイル自体の中で?
トムハモンド

トム:セレクターをドローアブルフォルダーに作成し、チェックボックスをレイアウトフォルダーに作成します
Mohamed Hisham Ibn Hanifa

CheckBoxの「背景」の「ボタン」を変更する必要がありました
Francisco Corrales Morales

パディングについては、stackoverflow.com
questions / 4037795 /…を

2
プロジェクトをandroid xにアップグレードした後、APIレベル21の前に言ったようにチェックボックスをカスタマイズできず、android:buttonが機能しません。
Misagh Aghakhani

44

btn_check.xmlをandroid-sdk / platforms / android-#/ data / res / drawableからプロジェクトの描画可能なフォルダーにコピーし、「オン」および「オフ」の画像の状態をカスタム画像に変更します。

次に、あなたの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 / ...」を介してデフォルトのアイコンを直接参照することは悪い考えですか、それともこのプロセス全体ですか?
WOUNDEDStevenJones 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 / layout / 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
いくつかの説明は、新しいユーザーがコードが問題をどのように解決するかを理解するのに役立ちます。
ブライアントンプセット-汤莱恩

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

2

別のオプションは、背景がnullの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"、チェックボックスを使用しながら、リスト項目をクリック可能にするためにnessesuryです。

<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"/>

描画可能> 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:appcompatを使用し、新しいドローアブル(およびselectorwith タイプandroid: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" />
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.