Пользовательский флажок изображения Android


182

Есть ли простой способ использовать пользовательское изображение для флажка? Я пытаюсь продублировать "помеченное" поведение gmail. Поэтому я хочу иметь флажок, который, когда отмечен, является заполненной звездочкой. И когда не проверено пустая звезда. Должен ли я использовать изображение и сам делать свою логику?

Ответы:


128

Флажки, являющиеся дочерними элементами для Button, вы можете просто дать вашему флажку фоновое изображение с несколькими состояниями, как описано здесь , в разделе «Стиль кнопки»:

... и проиллюстрировано здесь :


26
Спасибо, я действительно нашел именно то , что мне нужно было здесь it-ride.blogspot.com/2010/04/... , но мне пришлось бы сделать это по- своему , если я хотел реальный пользовательский образ = P
Falmarri

2
Спасибо. Именно то, что я искал - я понял всю ситуацию, но я установил android: background вместо android: button и в итоге получил 2 кнопки вместо этого. Теперь все работает хорошо.
Артем Руссаковский

1
-1. Приведенное android:buttonниже решение намного лучше, чем использование атрибута background!
Orabîg

8
@ Orabîg: Это отрицательное мнение не так. На вопрос отлично ответили («Пользовательский флажок изображения»). Тот факт, что ярлык существует для этой конкретной помеченной кнопки, не лишает законной силы этот ответ.
ereOn

Хотя это может быть старый пост, я хотел бы добавить, что 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" />

В какой записи вы указываете этот селектор? В самом файле XML, где вы также указываете CheckBox?
Том Хаммонд,

Том: создайте свой селектор в папке для рисования и установите флажок в папке макета
Мохамед Хишам Ибн Ханифа

Мне пришлось поменять «кнопку» на «задний план» в CheckBox
Франциско Корралес Моралес

Для заполнения см stackoverflow.com/questions/4037795/...
PiTheNumber

2
Я обновил свой проект до android x, после чего я не смог настроить свой флажок, как вы сказали до api level 21, и кнопка android: не работает.
Мисах Агахани

44

Скопируйте файл btn_check.xml из android-sdk / platform / 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
Плохой совет Иконки могут быть изменены от версии к версии и могут вообще исчезнуть. Если вам действительно нравится значок по умолчанию, вы можете взять его из источников.
Корнильцев Анатолий

Вы говорите, что ссылаться на значки по умолчанию напрямую через "@android: drawable / ..." - это плохая идея, или этот процесс полностью?
WOUNDEDStevenJones

2
Пример: ссылка на значки holo приведет к сбою вашего приложения на устройствах с предварительным сотовым заполнением. Действительно трудно поддерживать и устранять такие проблемы. Поэтому я обычно копирую не только xml, но и изображения, чтобы быть уверенным, что ресурсы будут найдены. Также это очень важно для обеспечения того, чтобы интерфейс выглядел одинаково на всех устройствах.
Корнильцев Анатолий

15

Рез / рисуем / 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
Некоторое объяснение поможет новым пользователям понять, как ваш код решает проблему.
Брайан Томпсетт - 莱恩 莱恩

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

В 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 и хотите, чтобы пользовательский объект рисования (типа selectorс android:state_checked) работал на старых версиях платформы в дополнение к новым версиям платформы, вам необходимо использовать

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

вместо того

    <CheckBox
        android:button="@drawable/..."

1

На основании ответов Анселика и Рахула.

Это работает для меня (до и после 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" />
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.