หุ่นยนต์ภาพเช็คบ็อกซ์ที่กำหนดเอง


182

มีวิธีง่ายๆในการใช้รูปภาพที่กำหนดเองสำหรับช่องทำเครื่องหมายหรือไม่? ฉันต้องการทำซ้ำพฤติกรรม "ติดดาว" ของ gmail ดังนั้นฉันต้องการมีช่องทำเครื่องหมายที่เมื่อทำเครื่องหมายเป็นดาว และเมื่อไม่ได้ตรวจสอบก็เป็นดาวที่ว่างเปล่า ฉันต้องใช้มุมมองภาพและทำตรรกะของตัวเองด้วยตัวเองหรือไม่?

คำตอบ:


128

ช่องทำเครื่องหมายเป็นลูกของปุ่มคุณสามารถให้ภาพพื้นหลังของกล่องกาเครื่องหมายกับสถานะต่าง ๆ ตามที่อธิบายไว้ที่นี่ภายใต้ "ลักษณะปุ่ม":

... และสุดขั้วที่นี่ :


26
ขอบคุณฉันพบสิ่งที่ฉันต้องการจริงๆที่นี่it-ride.blogspot.com/2010/04/…แต่ฉันต้องทำตามที่คุณต้องการหากต้องการภาพที่กำหนดเองจริง = P
Falmarri

2
ขอบคุณ. สิ่งที่ฉันกำลังมองหา - ฉันพบสิ่งที่รัฐทั้งหมด แต่ฉันได้รับการตั้งค่า android: พื้นหลังแทน android: ปุ่มและจบลงด้วย 2 ปุ่มแทน ตอนนี้มันทำงานได้ดี
Artem Russakovskii

1
-1 การandroid:buttonแก้ปัญหาด้านล่างดีกว่าการใช้คุณสมบัติพื้นหลัง!
Orabîg

8
@ Orabîg: downvote นี้ผิด คำถามนี้ได้รับคำตอบอย่างสมบูรณ์แบบ ("รูปภาพของช่องทำเครื่องหมายกำหนดเอง") ความจริงที่ว่ามีทางลัดสำหรับปุ่มติดดาวนี้โดยเฉพาะไม่ทำให้คำตอบนี้ไม่ถูกต้อง
ereOn

ขณะนี้อาจเป็นโพสต์เก่าต้องการเพิ่มสตูดิโอ Android ที่ยังใช้ android: button = "@ android: drawable / btn_star" วิธีการ
Angry 84

288

สร้างตัวเลือกช่องทำเครื่องหมาย drawable:

<?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 นั้นคุณกำลังระบุช่องทำเครื่องหมายด้วยหรือไม่
Tom Hammond

ทอม: สร้างตัวเลือกของคุณในโฟลเดอร์ drawable และช่องทำเครื่องหมายในโฟลเดอร์เลย์เอาต์
Mohamed Hisham Ibn Hanifa

ฉันต้องเปลี่ยน "ปุ่ม" เป็น "พื้นหลัง" ในช่องทำเครื่องหมาย
Francisco Corrales Morales

สำหรับช่องว่างภายในดูstackoverflow.com/questions/4037795/…
PiTheNumber

2
ฉันได้อัพเกรดโครงการเป็น android x หลังจากนั้นฉันไม่สามารถปรับแต่งช่องทำเครื่องหมายตามที่คุณพูดก่อนหน้า API ระดับ 21 และ Android: ปุ่มไม่ทำงาน
Misagh Aghakhani

44

คัดลอก btn_check.xml จาก android-sdk / platforms / android - # / data / res / drawable ไปยังโฟลเดอร์ 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

คุณกำลังพูดถึงการอ้างอิงไอคอนเริ่มต้นโดยตรงผ่าน "@android: drawable / ... " เป็นความคิดที่ไม่ดีหรือกระบวนการนี้ทั้งหมด?
WOUNDEDStevenJones

2
ตัวอย่าง: การอ้างอิงถึงไอคอน holo จะทำให้แอปของคุณทำงานผิดพลาดบนอุปกรณ์ที่เตรียมไว้ล่วงหน้า มันยากมากที่จะรักษาและแก้ไขปัญหาดังกล่าว ดังนั้นฉันมักจะคัดลอกไม่เพียง แต่ xml แต่ภาพเกินไปที่จะเป็นร้อยละ hundreed แน่ใจว่าทรัพยากรจะพบ นอกจากนี้ยังเป็นสิ่งสำคัญมากเพื่อให้แน่ใจว่า UI จะเหมือนกันในทุกอุปกรณ์
Korniltsev Anatoly

15

ความละเอียด / 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>

ความละเอียด / รูปแบบ / 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 / res

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

มันจะแก้ไข porblems ของคุณทั้งหมด


มันหายไปonSaveInstanceState()และonRestoreInstanceState()วิธีการฉันคิดว่าสถานะการตรวจสอบจะหายไปในการหมุน
EpicPandaForce

2

อีกตัวเลือกหนึ่งคือการใช้ToggleButton ที่มีพื้นหลังเป็น null และปุ่มกำหนดเอง

ตะโกนตัวอย่างที่มีตัวเลือกให้กับสีข้อความเช่นกัน

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

ใน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: appcompatและต้องการ drawable แบบกำหนดเอง (ชนิดselectorด้วย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.