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?

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 :


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

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


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


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

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>

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.


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>

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>

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

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" />
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.