Android – Espacement entre CheckBox et le texte

Existe-t-il un moyen simple d’append un remplissage entre la case à cocher d’un contrôle CheckBox et le texte associé?

Je ne peux pas simplement append des espaces de début, car mon étiquette est multi-lignes.

En l’état, le texte est trop proche de la case à cocher: texte alt

    Je déteste répondre à ma propre question, mais dans ce cas, je pense que je dois le faire. Après vérification, @Falmarri était sur la bonne voie avec sa réponse. Le problème est que le contrôle CheckBox d’Android utilise déjà la propriété android: paddingLeft pour obtenir le texte où il se trouve.

    La ligne rouge indique la valeur de décalage paddingLeft de la case à cocher entière

    texte alt

    Si je remplace simplement ce remplissage dans ma mise en page XML, cela gâche la mise en page. Voici ce que paramètre paddingLeft = “0”:

    texte alt

    Il s’avère que vous ne pouvez pas résoudre ce problème en XML. Vous l’avez fait en code. Voici mon extrait de code avec une augmentation de remplissage rigide de 10dp.

     final float scale = this.getResources().getDisplayMesortingcs().density; checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f), checkBox.getPaddingTop(), checkBox.getPaddingRight(), checkBox.getPaddingBottom()); 

    Cela vous donne les éléments suivants, où la ligne verte représente l’augmentation du remplissage. C’est plus sûr que de coder en dur une valeur, car différents périphériques peuvent utiliser des tirables différents pour la case à cocher.

    texte alt

    MISE À JOUR – Comme les gens l’ont récemment mentionné dans les réponses ci-dessous, ce comportement a apparemment changé dans Jelly Bean (4.2). Votre application devra vérifier la version sur laquelle elle est exécutée et utiliser la méthode appropriée.

    Pour 4.3+, il suffit de définir padding_left. Voir la réponse de htafoya pour plus de détails.

    Compte tenu de la réponse de @DougW, ce que je fais pour gérer la version est plus simple, j’ajoute à ma vue checkbox:

     android:paddingLeft="@dimen/padding_checkbox" 

    où le dimen se trouve dans deux dossiers de valeurs:

    valeurs

      25dp  

    values-v17 (4.2 JellyBean)

      10dp  

    J’ai un chèque personnalisé, utilisez les dps pour votre meilleur choix.

    Utilisez l’atsortingbut android:drawableLeft au lieu du android:button android:drawableLeft Pour définir le padding entre drawable et text, utilisez android:drawablePadding . Pour positionner le dessin, utilisez android:paddingLeft .

      

    résultat

    Android 4.2 Jelly Bean (API 17) met le texte paddingLeft à partir du buttonDrawable (bord droit ints). Cela fonctionne également pour le mode RTL.

    Avant 4.2, paddingLeft ignorait le buttonDrawable – il était extrait du bord gauche de la vue CompoundButton.

    Vous pouvez le résoudre via XML – définissez paddingLeft sur buttonDrawable.width + requiredSpace sur les anciens androïdes. Définissez-le sur requiredSpace uniquement sur l’API 17. Par exemple, utilisez des ressources de dimension et remplacez-les dans le dossier de ressources values-v17.

    Le changement a été introduit via android.widget.CompoundButton.getCompoundPaddingLeft ();

    Oui, vous pouvez append un remplissage en ajoutant un remplissage.

    android:padding=5dp

    Si vous voulez un design propre sans codes, utilisez:

      

    L’astuce consiste à définir la couleur sur transparent pour android:drawableLeft et atsortingbuer une valeur pour android:drawablePadding . En outre, la transparence vous permet d’utiliser cette technique sur n’importe quelle couleur d’arrière-plan sans les effets secondaires, tels que la disparité des couleurs.

    Dans mon cas, j’ai résolu ce problème en utilisant l’atsortingbut CheckBox suivant dans le XML:

    *

    android: paddingLeft = “@ dimen / activity_horizontal_margin”

    *

    Solution simple, ajoutez cette ligne dans les propriétés de CheckBox , remplacez 10dp par la valeur d’espacement souhaitée

     android:paddingLeft="10dp" 

    Pourquoi ne pas simplement étendre le CheckBox Android pour avoir un meilleur remplissage à la place. De cette façon, au lieu d’avoir à le réparer en code à chaque fois que vous utilisez le CheckBox, vous pouvez simplement utiliser le CheckBox fixe.

    Première extension de CheckBox:

     package com.whatever; import android.content.Context; import android.util.AtsortingbuteSet; import android.widget.CheckBox; /** * This extends the Android CheckBox to add some more padding so the text is not on top of the * CheckBox. */ public class CheckBoxWithPaddingFix extends CheckBox { public CheckBoxWithPaddingFix(Context context) { super(context); } public CheckBoxWithPaddingFix(Context context, AtsortingbuteSet attrs, int defStyle) { super(context, attrs, defStyle); } public CheckBoxWithPaddingFix(Context context, AtsortingbuteSet attrs) { super(context, attrs); } @Override public int getCompoundPaddingLeft() { final float scale = this.getResources().getDisplayMesortingcs().density; return (super.getCompoundPaddingLeft() + (int) (10.0f * scale + 0.5f)); } } 

    Deuxième dans votre XML au lieu de créer un CheckBox normal créez votre extension

      

    API 17 et supérieur, vous pouvez utiliser:

    android: paddingStart = “24dp”

    API 16 et ci-dessous, vous pouvez utiliser:

    android: paddingLeft = “24dp”

    Je ne connais pas les gars, mais j’ai testé

    et déplace uniquement le texte vers la droite, pas l'intégralité du contrôle.

    Ça me va bien.

    Je viens de conclure sur ceci:

    Remplacez CheckBox et ajoutez cette méthode si vous avez un tirable personnalisé:

     @Override public int getCompoundPaddingLeft() { // Workarround for version codes < Jelly bean 4.2 // The system does not apply the same padding. Explantion: // http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text/4038195#4038195 int compoundPaddingLeft = super.getCompoundPaddingLeft(); if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) { Drawable drawable = getResources().getDrawable( YOUR CUSTOM DRAWABLE ); return compoundPaddingLeft + (drawable != null ? drawable.getIntrinsicWidth() : 0); } else { return compoundPaddingLeft; } } 

    ou ceci si vous utilisez le système extractible:

     @Override public int getCompoundPaddingLeft() { // Workarround for version codes < Jelly bean 4.2 // The system does not apply the same padding. Explantion: // http://stackoverflow.com/questions/4037795/android-spacing-between-checkbox-and-text/4038195#4038195 int compoundPaddingLeft = super.getCompoundPaddingLeft(); if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) { final float scale = this.getResources().getDisplayMetrics().density; return compoundPaddingLeft + (drawable != null ? (int)(10.0f * scale + 0.5f) : 0); } else { return compoundPaddingLeft; } } 

    Merci d'avoir répondu 🙂

    Ce comportement semble avoir changé dans Jelly Bean. L’astuce paddingLeft ajoute un remplissage supplémentaire, rendant le texte trop à droite. Quelqu’un d’autre l’a-t-il remarqué?

      

    Si vous avez un sélecteur d’image personnalisé pour la case à cocher ou le bouton radio, vous devez définir la même propriété de bouton et d’arrière-plan comme ceci:

       

    Vous pouvez contrôler la taille de la case à cocher ou du remplissage du bouton radio avec la propriété d’arrière-plan.

    seulement vous devez avoir un paramètre dans le fichier xml

     android:paddingLeft="20dp" 

    Si vous créez des boutons personnalisés, p.ex. voir le look du tutoriel de la case à cocher

    Augmentez simplement la largeur de btn_check_label_background.9.png en ajoutant une ou deux autres colonnes de pixels transparents au centre de l’image; laissez les marqueurs à 9 patchs tels quels.

    Ce que j’ai fait, c’est d’avoir un TextView et un CheckBox dans une disposition (relative). Le TextView affiche le texte que je souhaite voir par l’utilisateur et le CheckBox ne contient aucun texte. De cette façon, je peux définir la position / le remplissage du CheckBox où je veux.

    Il est peut-être trop tard, mais j’ai créé des méthodes utilitaires pour gérer ce problème.

    Ajoutez simplement cette méthode à vos utils:

     public static void setCheckBoxOffset(@NonNull CheckBox checkBox, @DimenRes int offsetRes) { float offset = checkBox.getResources().getDimension(offsetRes); setCheckBoxOffsetPx(checkBox, offset); } public static void setCheckBoxOffsetPx(@NonNull CheckBox checkBox, float offsetInPx) { int leftPadding; if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.JELLY_BEAN) { leftPadding = checkBox.getPaddingLeft() + (int) (offsetInPx + 0.5f); } else { leftPadding = (int) (offsetInPx + 0.5f); } checkBox.setPadding(leftPadding, checkBox.getPaddingTop(), checkBox.getPaddingRight(), checkBox.getPaddingBottom()); } 

    Et utiliser comme ça:

      ViewUtils.setCheckBoxOffset(mAgreeTerms, R.dimen.space_medium); 

    ou comme ça:

      // Be careful with this usage, because it sets padding in pixels, not in dp! ViewUtils.setCheckBoxOffsetPx(mAgreeTerms, 100f); 

    J’ai eu le même problème avec un Galaxy S3 mini (Android 4.1.2) et j’ai simplement fait ma case à cocher personnalisée étendre AppCompatCheckBox au lieu de CheckBox. Maintenant cela fonctionne parfaitement.

    Vous devez obtenir la taille de l’image que vous utilisez afin d’append votre remplissage à cette taille. Sur les internes Android, ils obtiennent le dessin que vous spécifiez sur src et utilisent ensuite sa taille. Comme il s’agit d’une variable privée et qu’il n’y a pas de getters, vous ne pouvez pas y accéder. De plus, vous ne pouvez pas obtenir le com.android.internal.R.styleable.CompoundButton et obtenir le dessin à partir de là.

    Vous devez donc créer votre propre style (c.-à-d. Custom_src) ou vous pouvez l’append directement dans votre implémentation de RadioButton:

     public class CustomRadioButton extends RadioButton { private Drawable mButtonDrawable = null; public CustomRadioButton(Context context) { this(context, null); } public CustomRadioButton(Context context, AtsortingbuteSet attrs) { this(context, attrs, 0); } public CustomRadioButton(Context context, AtsortingbuteSet attrs, int defStyle) { super(context, attrs, defStyle); mButtonDrawable = context.getResources().getDrawable(R.drawable.rbtn_green); setButtonDrawable(mButtonDrawable); } @Override public int getCompoundPaddingLeft() { if (Util.getAPILevel() <= Build.VERSION_CODES.JELLY_BEAN_MR1) { if (drawable != null) { paddingLeft += drawable.getIntrinsicWidth(); } } return paddingLeft; } } 

    Comme vous utilisez probablement un sélecteur pouvant être dessiné pour votre android:button propriété, vous devez append android:constantSize="true" et / ou spécifier un dessin par défaut comme ceci:

          

    Après cela, vous devez spécifier l’atsortingbut android:paddingLeft dans votre case à cocher xml.

    Les inconvénients:

    Dans l’éditeur de disposition, vous trouverez le texte sous la case à cocher avec API 16 et ci-dessous, dans ce cas vous pouvez le réparer en créant une classe de case à cocher personnalisée comme suggéré, mais pour le niveau 16.

    Raisonnement:

    c’est un bogue car l’ StateListDrawable#getInsortingnsicWidth() à StateListDrawable#getInsortingnsicWidth() est utilisé en interne dans CompoundButton mais il peut renvoyer une valeur < 0 s'il n'y a pas d'état actuel et qu'aucune taille constante n'est utilisée.

    Tout ce que vous avez à faire pour résoudre ce problème est d’append android:singleLine="true" à la checkBox dans votre présentation Android xml:

      

    et rien de spécial ne sera ajouté par programmation.

    L’image de la case à cocher se chevauchait lorsque j’ai utilisé mes propres tirables du sélecteur, j’ai résolu ce problème en utilisant le code ci-dessous:

     CheckBox cb = new CheckBox(mActivity); cb.setText("Hi"); cb.setButtonDrawable(R.drawable.check_box_selector); cb.setChecked(true); cb.setPadding(cb.getPaddingLeft(), padding, padding, padding); 

    Merci à Alex Semeniuk

    Je me retrouve avec ce problème en changeant les images. Juste ajouté fond transparent supplémentaire dans les fichiers png. Cette solution fonctionne parfaitement sur toutes les API.

    Au lieu d’ajuster le texte pour Checkbox, j’ai fait ce qui suit et cela a fonctionné pour moi pour tous les appareils. 1) En XML, ajoutez une case à cocher et une vue textuelle à l’une à côté de l’autre; garder une certaine distance. 2) Définissez la taille du texte de la case à cocher sur 0sp. 3) Ajoutez le texte relatif à cette vue de texte à côté de la case à cocher.

    - Le remplissage entre les tirables et le texte.