Android - Espace entre CheckBox et le texte
Existe-t-il un moyen simple d’ajouter un espace entre la case à cocher d’un contrôle CheckBox et le texte associé?
Je ne peux pas simplement ajouter des espaces de début, car mon étiquette est multiligne.
Tel quel, le texte est trop proche de la case à cocher: 
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, c'est que le contrôle CheckBox d'Android utilise déjà la propriété Android: paddingLeft pour obtenir le texte à son emplacement actuel.
La ligne rouge indique la valeur de décalage paddingLeft de la totalité de la case à cocher.
Si je remplace simplement ce remplissage dans ma mise en page XML, cela gâche la mise en page. Voici ce que fait paddingLeft = "0":
Il s'avère que vous ne pouvez pas résoudre ce problème en XML. Vous avez le faire dans le code. Voici mon extrait de code avec une augmentation de 10dp pour un remplissage codé en dur.
final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),
checkBox.getPaddingTop(),
checkBox.getPaddingRight(),
checkBox.getPaddingBottom());
Cela vous donne ce qui suit, où la ligne verte est l’augmentation du remplissage. Cela est plus sûr que de coder en dur une valeur, étant donné que différents périphériques peuvent utiliser différents dessinables pour la case à cocher.
MISE À JOUR - Comme les gens l'ont récemment mentionné dans les réponses ci-dessous, ce comportement a apparemment changé chez Jelly Bean (4.2). Votre application devra vérifier sur quelle version 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 en case à cocher:
Android:paddingLeft="@dimen/padding_checkbox"
où le dimen se trouve dans deux dossiers de valeurs:
valeurs
<resources>
<dimen name="padding_checkbox">0dp</dimen>
</resources>
values-v17 (4.2 JellyBean)
<resources>
<dimen name="padding_checkbox">10dp</dimen>
</resources>
J'ai un chèque personnalisé, utilisez le DPS à votre meilleur choix.
Utilisez l'attribut Android:drawableLeft au lieu de Android:button. Afin de définir le remplissage entre le dessin et le texte, utilisez Android:drawablePadding. Pour positionner drawable, utilisez Android:paddingLeft.
<CheckBox
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:button="@null"
Android:drawableLeft="@drawable/check_selector"
Android:drawablePadding="-50dp"
Android:paddingLeft="40dp"
/>
Android 4.2 Jelly bean (API 17) place le texte paddingLeft du boutonDrawable (ints right Edge). Cela fonctionne aussi pour le mode RTL.
Avant la version 4.2, paddingLeft ignorait le buttonDrawable - il était pris à partir 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 up. Par exemple, utilisez des ressources de dimension et remplacez-les dans le dossier de ressources values-v17.
La modification a été introduite via Android.widget.CompoundButton.getCompoundPaddingLeft ();
Oui, vous pouvez ajouter un remplissage en ajoutant un remplissage.
Android:padding=5dp
Si vous voulez un design épuré sans codes, utilisez:
<CheckBox
Android:id="@+id/checkBox1"
Android:layout_height="wrap_content"
Android:layout_width="wrap_content"
Android:drawableLeft="@Android:color/transparent"
Android:drawablePadding="10dp"
Android:text="CheckBox"/>
L'astuce consiste à définir la couleur transparente sur Android:drawableLeft et d'attribuer une valeur à Android:drawablePadding. En outre, la transparence vous permet d’utiliser cette technique sur n’importe quelle couleur d’arrière-plan, sans effet secondaire - comme une discordance de couleurs.
API 17 et supérieure, vous pouvez utiliser:
Android: paddingStart = "24dp"
API 16 et ci-dessous, vous pouvez utiliser:
Android: paddingLeft = "24dp"
Dans mon cas, j'ai résolu ce problème en utilisant l'attribut CheckBox suivant dans le fichier XML:
*
Android: paddingLeft = "@ dimen/activity_horizontal_margin"
*
Solution simple, ajoutez cette ligne dans les propriétés CheckBox, remplacez 10dp par la valeur d'espacement souhaitée
Android:paddingLeft="10dp"
Pourquoi ne pas simplement étendre le Android CheckBox pour avoir un meilleur remplissage à la place. Ainsi, au lieu de devoir corriger le code à chaque fois que vous utilisez CheckBox, vous pouvez simplement utiliser le corrigé CheckBox.
First Extend CheckBox:
package com.whatever;
import Android.content.Context;
import Android.util.AttributeSet;
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, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CheckBoxWithPaddingFix(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public int getCompoundPaddingLeft() {
final float scale = this.getResources().getDisplayMetrics().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 étend
<com.whatever.CheckBoxWithPaddingFix
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="Hello there" />
Je ne connais pas les gars, mais j'ai testé
<CheckBox Android:paddingLeft="8mm" et ne déplace que le texte vers la droite, pas le contrôle complet.
Ça me va bien.
Je viens de conclure sur ceci:
Remplacez CheckBox et ajoutez cette méthode si vous avez un dessin personnalisable:
@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 drawable:
@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 rembourrage supplémentaire, donnant au texte une apparence trop à droite. Quelqu'un d'autre le remarque?
<CheckBox
Android:paddingRight="12dip" />
Si vous avez un sélecteur d'image personnalisé pour les cases à cocher ou les boutons radio, vous devez définir les mêmes propriétés de bouton et d'arrière-plan, telles que celles-ci:
<CheckBox
Android:id="@+id/filter_checkbox_text"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:button="@drawable/selector_checkbox_filter"
Android:background="@drawable/selector_checkbox_filter" />
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"
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.
Si vous créez des boutons personnalisés, par exemple, voir changer l'apparence du tutoriel de case à cocher
Ensuite, augmentez simplement la largeur de btn_check_label_background.9.png en ajoutant une ou deux colonnes supplémentaires de pixels transparents au centre de l'image; laissez les marqueurs de 9 patchs comme ils sont.
Ce que j’ai fait, c’est d’avoir une TextView et une CheckBox dans un (relatif) Layout. La TextView affiche le texte que je veux que l'utilisateur voie, et la CheckBox ne contient pas de texte. De cette façon, je peux définir la position/le remplissage de la CheckBox où je veux.
C'est peut-être trop tard, mais j'ai créé des méthodes utilitaires pour gérer ce problème.
Ajoutez simplement ces méthodes à vos outils:
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 utilisez comme ceci:
ViewUtils.setCheckBoxOffset(mAgreeTerms, R.dimen.space_medium);
ou comme ceci:
// Be careful with this usage, because it sets padding in pixels, not in dp!
ViewUtils.setCheckBoxOffsetPx(mAgreeTerms, 100f);
L'image de la case à cocher se chevauchait lorsque j'ai utilisé mon propre dessin de 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
Comme vous utilisez probablement un sélecteur de dessin pour votre propriété Android:button, vous devez ajouter Android:constantSize="true" et/ou spécifier un dessin par défaut comme ceci:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:constantSize="true">
<item Android:drawable="@drawable/check_on" Android:state_checked="true"/>
<item Android:drawable="@drawable/check_off"/>
</selector>
Après cela, vous devez spécifier l'attribut Android:paddingLeft dans votre case à cocher xml.
Inconvénients:
Dans l'éditeur de disposition, le texte se trouvant sous les cases d'api 16 et inférieures, vous pouvez le corriger en créant votre classe de cases à cocher personnalisée comme suggéré mais pour les niveaux d'api 16.
Justification:
il s'agit d'un bogue, car StateListDrawable#getIntrinsicWidth() est utilisé en interne dans CompoundButton, mais il peut renvoyer la valeur < 0 s'il n'y a pas d'état actuel ni de taille constante.
Vous devez obtenir la taille de l'image que vous utilisez pour pouvoir ajouter votre remplissage à cette taille. Sur les éléments internes Android, ils obtiennent le dessin que vous spécifiez sur src et utilisent ensuite sa taille. Comme c'est une variable privée et qu'il n'y a pas de getters, vous ne pouvez pas y accéder. Aussi, vous ne pouvez pas obtenir le com.Android.internal.R.styleable.CompoundButton et obtenir le drawable à partir de là.
Vous devez donc créer votre propre style (c'est-à-dire custom_src) ou vous pouvez l'ajouter 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, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomRadioButton(Context context, AttributeSet 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;
}
}
Tout ce que vous avez à faire pour résoudre ce problème consiste à ajouter Android:singleLine="true" à la checkBox de votre mise en page Android xml:
<CheckBox
Android:id="@+id/your_check_box"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:singleLine="true"
Android:background="@Android:color/transparent"
Android:text="@string/your_string"/>
et rien de spécial ne sera ajouté par programme.
Je me retrouve avec ce problème en changeant les images. Je viens d'ajouter un fond transparent supplémentaire dans les fichiers png. Cette solution fonctionne parfaitement sur toutes les API.