web-dev-qa-db-fra.com

Centre CheckBox pouvant être dessiné en lui-même

J'ai une CheckBox que je veux centrée dans ses propres limites, pas poussée à l'écart. Probablement plus facile démontré que expliqué:

enter image description here

Notez que ce n'est pas centré. Actuellement défini comme:

<CheckBox
    Android:id="@+id/checkbox_star"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:button="@drawable/btn_favorite"

    Android:layout_gravity="center"
    Android:minWidth="48dp" />

Ignorez le bouton personnalisé que vous pouvez dessiner. Il se comporte de la même manière avec une variable CheckBox de vanille (la petite case à cocher se comporte de la même manière).

androidandroid-layoutcheckboxdrawablepadding
25
davidcesarino

Je pense que le problème est que le widget Checkbox utilise un TextView standard avec l'attribut drawableLeft , car il s'attend à ce que le texte soit également affiché. (C’est pourquoi vous le voyez centré verticalement, mais légèrement décalé vers la gauche.) 

Si vous voulez simplement un bouton d’image avec plusieurs états, je vous suggère d’utiliser un ToggleButton avec vos images personnalisées dans un sélecteur de liste state . Vous pouvez également créer une classe personnalisée qui étend ImageView et implémente Checkable.

27
Sam

Vous pouvez utiliser une mise en page parent pour y parvenir: 

<LinearLayout
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    Android:gravity="center">

    <CheckBox
        Android:id="@+id/checkbox_star"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:gravity="center"
        Android:text="Check box text" />
</LinearLayout>
10
Eldhose M Babu

Ce problème d'alignement peut être résolu par CheckableImageView , une variable View personnalisée qui étend ImageView ou AppCompatImageView et implémente directement Checkable. Il possède également d'autres attributs ImageView.

import Android.content.Context;
import Android.util.AttributeSet;
import Android.view.View;
import Android.widget.Checkable;
import Android.widget.ImageView;

/**
 * @author hendrawd on 6/23/16
 */
public class CheckableImageView extends ImageView implements Checkable {

    public CheckableImageView(Context context) {
        super(context);
    }

    public CheckableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    private boolean mChecked = false;

    private static final int[] CHECKED_STATE_SET = {Android.R.attr.state_checked};

    @Override
    public int[] onCreateDrawableState(final int extraSpace) {
        final int[] drawableState = super.onCreateDrawableState(extraSpace + 1);
        if (isChecked())
            mergeDrawableStates(drawableState, CHECKED_STATE_SET);
        return drawableState;
    }

    @Override
    public void setChecked(boolean checked) {
        if (mChecked != checked) {
            mChecked = checked;
            refreshDrawableState();
        }
    }

    @Override
    public boolean isChecked() {
        return mChecked;
    }

    @Override
    public void toggle() {
        setChecked(!mChecked);
    }

    @Override
    public void setOnClickListener(final OnClickListener l) {
        View.OnClickListener onClickListener = new OnClickListener() {
            @Override
            public void onClick(View v) {
                toggle();
                l.onClick(v);
            }
        };
        super.setOnClickListener(onClickListener);
    }
}

Il suffit de définir votre propriété sélectionnable drawable in src de votre code XML et l’état de vérification pouvant être tracé suit automatiquement.

Exemple d'utilisation

<your.package.name.CheckableImageView
    Android:id="@+id/some_id"
    Android:layout_width="48dp"
    Android:layout_height="48dp"
    Android:src="@drawable/set_your_selector_here"
    Android:padding="14dp"
    Android:gravity="center" />

Exemple de sélecteur (placé dans un dossier pouvant être dessiné avec l'extension .xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/ic_cb_check" Android:state_checked="true" Android:state_focused="true" />
    <item Android:drawable="@drawable/ic_cb_uncheck" Android:state_checked="false" Android:state_focused="true" />
    <item Android:drawable="@drawable/ic_cb_uncheck" Android:state_checked="false" />
    <item Android:drawable="@drawable/ic_cb_check" Android:state_checked="true" />
</selector>

Changez ic_cb_check et ic_cb_uncheck avec vos images préférées.

Ce code est également disponible sur https://Gist.github.com/hendrawd/661824a721c22b3244667379e9358b5f

5
HendraWD
Android:button="@null"
Android:foreground="@drawable/btn_favorite" 
Android:foregroundGravity="center"
3
j__m

Cela fonctionnera correctement si besoin est. Juste de petits changements dans les attributs de fond et de bouton. Cet extrait de code a été testé avec succès. J'espère que cela vous aidera.

 <CheckBox
Android:id="@+id/checkbox_star"
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:background="@drawable/btn_favorite"
Android:button="@color/transparent"
Android:layout_gravity="center"
Android:minWidth="48dp" />
2
Anant Shah

Définissez le Android:width pour qu'il ne montre que votre case à cocher, puis centrez-le à l'aide de Android:layout_gravity="center".

0
David Kranitz

N'utilisez pas ce code pour contourner le bogue de la case à cocher avec l'alignement du centre pour> SDK23 si vous envisagez d'utiliser des cases à cocher dans recyclerview.

<CheckBox
Android:button="@null"
Android:drawableLeft="@drawable/checkbox_selector"
Android:drawableStart="@drawable/checkbox_selector"
/>

Les cases à cocher ne seront pas cochées dans onBindViewHolder avant la prochaine actualisation si RV (exemple: scroll, ..).

0
AndroidTank

Il suffit d'utiliser l'approche suivante:

          <CheckBox
                  Android:button="@null"                        
                  Android:foreground="@drawable/checkbox_selector"
                  Android:foregroundGravity="center"/>

Cela fonctionne bien pour moi. Mais cela ne fonctionne que pour 

targetSdkVersion> = Build.VERSION_CODES.M || view instanceof FrameLayout

0
ultraon