Android - Abstand zwischen CheckBox und Text

Gibt es eine einfache Möglichkeit, das Kontrollkästchen in einem CheckBox-Steuerelement und den zugehörigen Text aufzufüllen?

Ich kann nicht einfach führende Leerzeichen hinzufügen, da meine Beschriftung mehrzeilig ist.

Wie es ist, befindet sich der Text viel zu nahe am Kontrollkästchen:

Ich hasse es, meine eigene Frage zu beantworten, aber in diesem Fall denke ich, dass ich muss. Nach dem Auschecken war @Falmarri mit seiner Antwort auf dem richtigen Weg. Das Problem ist, dass das CheckBox-Steuerelement von Android bereits die Eigenschaft android: paddingLeft verwendet, um den Text dort abzurufen, wo er sich befindet.

Die rote Linie zeigt den paddingLeft-Offsetwert der gesamten CheckBox

Wenn ich diese Auffüllung in meinem XML-Layout nur überschreibe, wird das Layout durcheinander gebracht. Folgendes bewirkt die Einstellung paddingLeft = "0":

Es stellt sich heraus, dass Sie dies in XML nicht beheben können. Sie haben es im Code getan. Hier ist mein Snippet mit einer fest codierten Padding-Erhöhung von 10dp.

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

Dies gibt Ihnen Folgendes, wobei die grüne Linie die Zunahme der Polsterung ist. Dies ist sicherer als das Hardcodieren eines Werts, da unterschiedliche Geräte unterschiedliche Zeichen für das Kontrollkästchen verwenden können.

UPDATE - Wie die Leute kürzlich in den Antworten unten erwähnt haben, hat sich dieses Verhalten anscheinend in Jelly Bean (4.2) geändert. Ihre App muss überprüfen, auf welcher Version sie ausgeführt wird, und die entsprechende Methode verwenden.

Für 4.3+ wird einfach padding_left gesetzt. Siehe htafoyas Antwort für Details.

Angesichts der Antwort von @DougW ist die Verwaltung der Version einfacher. Ich füge sie meiner Kontrollkästchenansicht hinzu:

android:paddingLeft="@dimen/padding_checkbox"

wo sich das Maß in zwei Werteordnern befindet:

Werte

<resources>

    <dimen name="padding_checkbox">0dp</dimen>

</resources>

Werte-v17 (4.2 JellyBean)

<resources>

    <dimen name="padding_checkbox">10dp</dimen>

</resources>

Ich habe eine benutzerdefinierte Prüfung, verwenden Sie die dps zu Ihrer besten Wahl.

Verwenden Sie Attribut android:drawableLeftanstelle von android:button. Um die Auffüllung zwischen Zeichen- und Texteinstellung festzulegen android:drawablePadding. Zum Zeichnen positionierbar verwenden 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) fügt den Text paddingLeft von buttonDrawable (ints rechter Rand) ein. Es funktioniert auch für den RTL-Modus.

Bevor 4.2 paddingLeft den buttonDrawable ignorierte, wurde er vom linken Rand der CompoundButton-Ansicht übernommen.

Sie können es über XML lösen - setzen Sie paddingLeft auf buttonDrawable.width + requiredSpace für ältere Androiden. Setzen Sie es nur unter API 17 auf requiredSpace. Verwenden Sie beispielsweise Dimensionsressourcen und überschreiben Sie sie im Ressourcenordner values-v17.

Die Änderung wurde über android.widget.CompoundButton.getCompoundPaddingLeft () eingeführt.

Ja, Sie können Polster hinzufügen, indem Sie Polster hinzufügen.

android:padding=5dp

Wenn Sie ein sauberes Design ohne Codes wünschen, verwenden Sie:

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

Der Trick besteht darin, die Farbe für transparent auf transparent zu setzen android:drawableLeftund einen Wert für zuzuweisen android:drawablePadding. Dank der Transparenz können Sie diese Technik auch für jede Hintergrundfarbe ohne Nebeneffekt anwenden - wie Farbfehlanpassung.

API 17 und höher können Sie verwenden:

android: paddingStart = "24dp"

API 16 und niedriger können Sie verwenden:

android: paddingLeft = "24dp"

In meinem Fall habe ich dieses Problem mithilfe des folgenden CheckBox-Attributs im XML gelöst:

* *

android: paddingLeft = "@ dimen / activity_horizontal_margin"

* *

Einfache Lösung: Fügen Sie diese Zeile in die CheckBox- Eigenschaften ein und ersetzen Sie 10 dp durch den gewünschten Abstandswert

android:paddingLeft="10dp"

Ich kenne keine Leute, aber ich habe getestet

<CheckBox android:paddingLeft="8mm" und verschiebt nur den Text nach rechts, nicht das gesamte Steuerelement.

Es passt mir gut.

Erweitern Sie stattdessen einfach die Android CheckBox, um eine bessere Polsterung zu erzielen. Auf diese Weise können Sie, anstatt es jedes Mal, wenn Sie die CheckBox verwenden, im Code reparieren zu müssen, stattdessen einfach die feste CheckBox verwenden.

Erste CheckBox erweitern:

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));
    }
}

Zweitens in Ihrer XML, anstatt eine normale CheckBox zu erstellen, erstellen Sie Ihre erweiterte

<com.whatever.CheckBoxWithPaddingFix
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello there" />

Ich bin gerade zu dem Schluss gekommen:

Überschreiben Sie das Kontrollkästchen und fügen Sie diese Methode hinzu, wenn Sie ein benutzerdefiniertes Zeichenelement haben:

@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;
    }

}

oder dies, wenn Sie das System Drawable verwenden:

@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;
    }

}

Danke für die Antwort :)

Dieses Verhalten scheint sich in Jelly Bean geändert zu haben. Der Trick paddingLeft fügt zusätzliches Auffüllen hinzu, sodass der Text zu weit rechts aussieht. Hat sonst noch jemand das bemerkt?

Verwenden Sie für das Leerzeichen zwischen dem Häkchen und dem Text:

android:paddingLeft="10dp"

Es wird jedoch mehr als 10 dp, da das Häkchen eine Auffüllung (ca. 5 dp) enthält. Wenn Sie Polster entfernen möchten, lesen Sie So entfernen Sie Polster um Android CheckBox :

android:paddingLeft="-5dp"
android:layout_marginStart="-5dp"
android:layout_marginLeft="-5dp"
// or android:translationX="-5dp" instead of layout_marginLeft

<CheckBox
        android:paddingRight="12dip" />

Wenn Sie eine benutzerdefinierte Bildauswahl für das Kontrollkästchen oder den Radiobutton haben, müssen Sie dieselbe Schaltfläche und Hintergrundeigenschaft wie diese festlegen:

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

Sie können die Größe des Kontrollkästchens oder des Optionsfelds mit der Hintergrundeigenschaft steuern.

Sie müssen nur einen Parameter in der XML-Datei haben

android:paddingLeft="20dp"

Das Setzen von minHeight und minWidth auf 0dpwar für mich die sauberste und direkteste Lösung für Android 9 API 28:

<CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="0dp"
        android:minWidth="0dp" />

Wenn Sie benutzerdefinierte Schaltflächen erstellen, sehen Sie z. B. das Tutorial zum Ändern des Erscheinungsbilds des Kontrollkästchens

Erhöhen Sie dann einfach die Breite von btn_check_label_background.9.png, indem Sie eine oder zwei weitere Spalten mit transparenten Pixeln in die Bildmitte einfügen. Lassen Sie die 9-Patch-Marker unverändert.

Was ich getan habe, ist ein TextViewund ein CheckBoxin einem (Verwandten) Layout. Das TextViewzeigt den Text an, den der Benutzer sehen soll, und das CheckBoxhat keinen Text. Auf diese Weise kann ich die Position / Polsterung von einstellen, CheckBoxwo immer ich will.

Ich hatte das gleiche Problem mit einem Galaxy S3 mini (Android 4.1.2) und habe einfach mein benutzerdefiniertes Kontrollkästchen AppCompatCheckBox anstelle von CheckBox erweitern lassen. Jetzt funktioniert es perfekt.

Sie müssen die Größe des verwendeten Bildes ermitteln, um diese Größe mit Ihrer Polsterung zu versehen. Auf den Android-Interna erhalten sie das auf src angegebene Zeichenelement und verwenden anschließend dessen Größe. Da es sich um eine private Variable handelt und es keine Getter gibt, können Sie nicht darauf zugreifen. Außerdem können Sie den com.android.internal.R.styleable.CompoundButton nicht abrufen und von dort aus den Drawable abrufen.

Sie müssen also Ihr eigenes Styleable erstellen (z. B. custom_src), oder Sie können es direkt in Ihre Implementierung des RadioButton einfügen:

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;
    }
}

Da Sie wahrscheinlich einen Zeichen-Selektor für Ihre android:buttonEigenschaft verwenden, müssen Sie android:constantSize="true"ein Standard-Zeichenelement wie das folgende hinzufügen und / oder angeben:

<?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>

Danach müssen Sie ein android:paddingLeftAttribut in Ihrer Checkbox-XML angeben .

Nachteile:

Im Layout-Editor wird der Text unter dem Kontrollkästchen mit API 16 und darunter angezeigt. In diesem Fall können Sie ihn beheben, indem Sie eine benutzerdefinierte Checkbox-Klasse wie vorgeschlagen erstellen , jedoch für API-Level 16.

Begründung:

Es handelt sich um einen Fehler, da der StateListDrawable#getIntrinsicWidth()Aufruf intern in verwendet wird. CompoundButtonEr kann jedoch einen < 0Wert zurückgeben, wenn kein aktueller Status vorhanden ist und keine konstante Größe verwendet wird.

Alles , was Sie dieses Problem zu überwinden tun müssen, ist hinzuzufügen , android:singleLine="true"um die checkBoxin Ihrem Android - xml - Layout:

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

und nichts Besonderes wird programmgesteuert hinzugefügt.

Das Kontrollkästchenbild überlappte sich, als ich meine eigenen Zeichen aus dem Selektor verwendete. Ich habe dies mit dem folgenden Code gelöst:

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);

Vielen Dank an Alex Semeniuk

Am Ende habe ich dieses Problem, indem ich die Bilder ändere. Gerade zusätzlichen transparenten Hintergrund in PNG-Dateien hinzugefügt. Diese Lösung funktioniert hervorragend auf allen APIs.

Vielleicht ist es zu spät, aber ich habe Dienstprogrammmethoden erstellt, um dieses Problem zu beheben.

Fügen Sie einfach diese Methoden zu Ihren Utensilien hinzu:

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());
}

Und verwenden Sie wie folgt:

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

oder so:

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

Anstatt den Text für das Kontrollkästchen anzupassen, habe ich Folgendes getan und es hat bei allen Geräten für mich funktioniert. 1) Fügen Sie in XML nebeneinander ein Kontrollkästchen und eine Textansicht hinzu. Abstand halten. 2) Setzen Sie die Textgröße des Kontrollkästchens auf 0sp. 3) Fügen Sie dieser Textansicht neben dem Kontrollkästchen relativen Text hinzu.

<CheckBox android:drawablePadding="16dip" - Der Abstand zwischen den Zeichen und dem Text.