맞춤 확인란 이미지 Android


182

확인란에 맞춤 이미지를 사용하는 쉬운 방법이 있습니까? Gmail의 "별표 표시"동작을 복제하려고합니다. 체크하면 별표가 채워진 확인란이 필요합니다. 그리고 체크하지 않으면 빈 별입니다. 이미지 뷰를 사용해야하고 내 자신의 논리를 직접 수행해야합니까?

답변:


128

Button의 자식 인 확인란은 여기 에 설명 된대로 "버튼 스타일"아래에 여러 상태의 확인란을 배경 이미지로 제공 할 수 있습니다 .

... 여기에 예시되어 있습니다 .


26
덕분에, 나는 실제로 내가 여기에 필요한 정확하게 발견 it-ride.blogspot.com/2010/04/...을 하지만, 내가 원한다면 내가 원하는 방식으로 작업을했을 것이다 실제 사용자 정의 이미지를 = P
Falmarri

2
감사합니다. 정확히 내가 찾던 것-전체 상태를 알아 냈지만 android : button 대신 android : background를 설정하고 대신 2 개의 버튼으로 끝났습니다. 이제는 모두 잘 작동합니다.
Artem Russakovskii

1
-1. android:button아래 의 솔루션은 배경 속성을 사용하는 것보다 훨씬 좋습니다!
Orabîg

8
@ Orabîg :이 downvote가 잘못되었습니다. 질문에 완벽하게 답변합니다 ( "사용자 정의 확인란 이미지"). 이 특정 별표 버튼에 대한 바로 가기가 존재한다고해서이 답변이 무효화되지는 않습니다.
ereOn

이 게시물은 오래된 게시물이지만 Android 스튜디오에서도 android : button = "@ android : drawable / btn_star"메소드를 사용한다고 추가하고 싶습니다.
Angry 84

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

이 선택기를 어떤 레코드에 지정합니까? CheckBox를 지정하는 XML 파일 자체에서?
Tom Hammond

Tom : 드로어 블 폴더에서 선택기를 만들고 레이아웃 폴더에서 확인란을 선택
Mohamed Hisham Ibn Hanifa

CheckBox에서 '배경'에 대한 '버튼'을 변경해야했습니다.
Francisco Corrales Morales


2
API 레벨 21과 android : button이 작동하기 전에 말한 것처럼 내 프로젝트를 android x로 업그레이드 한 후 확인란을 사용자 정의 할 수 없습니다.
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:button="@android:drawable/..."


2
나쁜 조언. 아이콘이 버전마다 변경 될 수 있으며 전혀 사라질 수 있습니다. 기본 아이콘이 마음에 들면 소스에서 가져올 수 있습니다.
Korniltsev Anatoly

"@android : drawable / ..."을 통해 직접 기본 아이콘을 참조하는 것은 나쁜 생각입니까, 아니면이 과정을 전적으로 말하고 있습니까?
WOUNDEDStevenJones

2
예 : 홀로 아이콘을 참조하면 사전 허니컴 기기에서 앱이 중단됩니다. 그러한 문제를 유지하고 디버그하는 것은 정말 어렵습니다. 따라서 일반적으로 xml뿐만 아니라 이미지도 복사하지 않아도 리소스를 찾을 수 있습니다. 또한 모든 장치에서 UI가 동일하게 보이도록하는 것이 매우 중요합니다.
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
일부 설명은 새로운 사용자가 코드로 문제를 해결하는 방법을 이해하는 데 도움이됩니다.
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

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

에서 드로어 블> 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 with type 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.