Gambar kotak centang kustom android

182

Apakah ada cara mudah untuk menggunakan gambar khusus untuk kotak centang? Saya ingin menduplikasi perilaku "berbintang" dari gmail. Jadi saya ingin memiliki kotak centang yang, ketika dicentang, adalah tanda bintang. Dan ketika tidak dicentang adalah bintang kosong. Apakah saya harus menggunakan imageview dan melakukan logika sendiri?

Falmarri
sumber

Jawaban:

128

Kotak centang adalah anak-anak Button Anda bisa memberikan kotak centang gambar latar belakang dengan beberapa negara seperti yang dijelaskan di sini , di bawah "Gaya tombol":

... dan dicontohkan di sini :

Jean
sumber
26
Terima kasih, saya benar-benar menemukan apa yang saya butuhkan di sini it-ride.blogspot.com/2010/04/... tapi saya harus melakukannya dengan cara Anda jika saya ingin gambar khusus nyata = P
Falmarri
2
Terima kasih. Persis apa yang saya cari - saya sudah menemukan seluruh keadaan tapi saya telah menetapkan android: background bukannya android: tombol dan berakhir dengan 2 tombol sebagai gantinya. Sekarang semuanya bekerja dengan baik.
Artem Russakovskii
1
-1. The android:buttonsolusi di bawah ini jauh lebih baik daripada menggunakan atribut background!
Orabîg
8
@ Orabîg: Downvote ini salah. Pertanyaannya dijawab dengan sempurna ("Gambar kotak centang khusus"). Fakta bahwa ada jalan pintas untuk tombol berbintang khusus ini tidak membatalkan jawaban ini.
sebelum
Meskipun ini mungkin posting lama, ingin menambahkan bahwa Android studio juga menggunakan metode android: button = "@ android: drawable / btn_star"
Angry 84
289

Buat pemilih kotak centang yang dapat digambar:

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

Pastikan kotak centang Anda seperti ini 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" />
Mohamed Hisham Ibn Hanifa
sumber
Catatan apa yang Anda tentukan pada pemilih ini? Dalam file XML itu sendiri di mana Anda menentukan kotak centang juga?
Tom Hammond
Tom: buat pemilih Anda di folder yang dapat digambar dan centang di folder layout
Mohamed Hisham Ibn Hanifa
Saya harus mengganti 'tombol' untuk 'latar belakang' di Kotak Centang
Francisco Corrales Morales
Untuk pengisian, lihat stackoverflow.com/questions/4037795/…
PiTheNumber
2
Saya telah memutakhirkan proyek saya ke android x setelah itu saya tidak dapat menyesuaikan kotak centang saya seperti yang Anda katakan sebelumnya api level 21 dan android: tombol tidak berfungsi.
Misagh Aghakhani
44

Salin btn_check.xml dari android-sdk / platform / android - # / data / res / drawable ke folder drawable proyek Anda dan ubah status gambar 'on' dan 'off' ke gambar khusus Anda.

Maka xml Anda hanya perlu android:button="@drawable/btn_check"

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

Jika Anda ingin menggunakan ikon Android default yang berbeda, Anda dapat menggunakan android:button="@android:drawable/..."

DITEMPATKANJepang
sumber
2
Saran yang buruk. Ikon dapat diubah dari versi ke versi dan dapat hilang sama sekali. Jika Anda sangat menyukai ikon default, Anda dapat mengambilnya dari sumber.
Korniltsev Anatoly
Apakah Anda mengatakan merujuk ikon default langsung melalui "@android: drawable / ..." adalah ide yang buruk, atau proses ini seluruhnya?
DITEMPATKANJepang
2
Contoh: referensi ke ikon holo akan merusak aplikasi Anda di perangkat pra-honeycomb. Sangat sulit untuk memelihara dan men-debug masalah seperti itu. Jadi saya biasanya menyalin tidak hanya xml tetapi gambar juga harus hundreed persen yakin sumber dayanya akan ditemukan. Ini juga sangat penting untuk memastikan UI terlihat sama di setiap perangkat.
Korniltsev Anatoly
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" />
Rahul
sumber
1
Beberapa penjelasan akan membantu pengguna baru memahami bagaimana kode Anda memecahkan masalah.
Brian Tompsett - 汤 莱恩
7

Jika Anda memiliki kode sumber terbuka Android, Anda dapat menemukan definisi gaya di bawah:
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>
achellies
sumber
4

Cobalah -

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

Tambahkan attrib ini -

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

Gunakan seperti -

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

Ini akan memperbaiki semua masalah Anda.

Neo
sumber
Tidak ada onSaveInstanceState()dan onRestoreInstanceState()metode, saya pikir negara yang diperiksa akan hilang secara rotasi
EpicPandaForce
2

Pilihan lain adalah menggunakan ToggleButton dengan latar belakang nol dan tombol kustom.

Di bawah contoh yang menyertakan pemilih ke warna teks juga.

<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>
androidevil
sumber
2

Jika Anda menggunakan adaptor khusus daripada android:focusable="false"dan android:focusableInTouchMode="false"diperlukan untuk membuat item daftar dapat diklik saat menggunakan kotak centang.

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

Dalam 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>
Chitransh Goud
sumber
1

Jika Anda menggunakan androidx.appcompat: appcompat dan ingin drawable kustom (bertipe selectorwith android:state_checked) untuk bekerja pada versi platform lama selain versi platform baru, Anda perlu menggunakan

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

dari pada

    <CheckBox
        android:button="@drawable/..."
Enselik
sumber
1

Berdasarkan jawaban Enselik dan Rahul.

Ini berfungsi untuk saya (sebelum dan sesudah 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" />
alexrnov
sumber