Abstand zwischen einem RadioButton und seiner Bezeichnung in Android hinzufügen?

85

Ist es möglich, ein wenig Platz zwischen einem RadioButton und dem Etikett zu schaffen, während die integrierten Komponenten von Android verwendet werden? Standardmäßig sieht der Text etwas zerknittert aus.

<RadioButton android:id="@+id/rb1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="My Text"/>

Ich habe ein paar Dinge ausprobiert:

  1. Das Festlegen von Rand und Abstand scheint Platz um das gesamte Element (Schaltfläche und Text zusammen) zu schaffen. Das macht Sinn, macht aber nicht das, was ich brauche.

  2. Erstellen einer benutzerdefinierten Zeichnung über XML, in der Bilder für den aktivierten und den nicht aktivierten Status angegeben werden, und Hinzufügen einiger zusätzlicher Pixel auf der rechten Seite jedes Bilds. Dies sollte funktionieren, aber jetzt verlassen Sie die Standardbenutzeroberfläche. (Nicht das Ende der Welt, aber nicht ideal)

  3. Fügen Sie am Anfang jedes Etiketts zusätzliche Leerzeichen hinzu. Android scheint ein führendes Leerzeichen wie in "My String" zu kürzen, aber die Angabe von Unicode U + 00A0 wie in "\ u00A0My String" reicht aus. Das funktioniert, aber es scheint irgendwie schmutzig.

Irgendwelche besseren Lösungen?

Allklauen
quelle

Antworten:

119

Für jeden, der dies jetzt liest, führt die akzeptierte Antwort zu einigen Layoutproblemen bei neueren APIs, die zu viel Auffüllen verursachen.

In API <= 16 können Sie paddingLeftdas Optionsfeld festlegen, um die Auffüllung relativ zu den Ansichtsgrenzen des Optionsfelds festzulegen. Darüber hinaus ändert ein Patch-9-Hintergrund auch die Ansichtsgrenzen relativ zur Ansicht.

Bei API> = 17 ist das paddingLeft(oder paddingStart) in Bezug auf das Optionsfeld zeichnbar. Gleiches gilt für den ungefähr neun Patch. Zur besseren Veranschaulichung der Polsterungsunterschiede siehe den beigefügten Screenshot.

Wenn Sie den Code durchforsten, finden Sie in API 17 eine neue Methode namens getHorizontalOffsetForDrawables . Diese Methode wird aufgerufen, wenn der linke Abstand für ein Optionsfeld berechnet wird (daher der im Bild dargestellte zusätzliche Platz).

TL; DR Nur verwenden, paddingLeftwenn Ihr minSdkVersion> = 17. Wenn Sie API <= 16 unterstützen, sollten Sie einen Optionsfeldstil für das von Ihnen unterstützte min SDK und einen anderen Stil für API 17+ haben.

Kombinieren Sie Screenshots, die Unterschiede in der linken Auffüllung zwischen API-Versionen zeigen

Jim Baca
quelle
2
API 17 ist android.os.Build.VERSION_CODES.JELLY_BEAN_MR1
KarenAnne
11
Der beste Weg, dies zu tun, ist mit einem "values-v17" -Verzeichnis; Fügen Sie dort Ihre API 17+ -Dimension in eine Ressourcen-XML und die Standarddimension für 16 und darunter in einfachen "Werten" ein.
Akent
14
Erstaunlich, wie Google-Entwickler / -Management uns üblichen Entwicklern begegnen. Sie tun, was sie wollen, wann sie wollen. Konsistenz und Integrität bedeuten ihnen nichts.
Yar
65

Sie sind sich nicht sicher, ob dies Ihr Problem beheben wird, haben jedoch die Eigenschaft "Padding left" von Radio Button mit einem Wert von 50dip oder mehr ausprobiert

user438650
quelle
2
Dies funktioniert und 50dip wird benötigt, um die Breite des Standardzeichens abzudecken. Zuerst habe ich 20dip verwendet und der Text wurde nach links verschoben! Das liegt daran, dass der Verankerungspunkt nicht die rechte Kante des Zeichens ist. es ist der linke Rand des Zeichens.
Robert Claypool
57

Ich habe verschiedene Möglichkeiten ausprobiert und bin damit fertig geworden, dass diese sowohl auf dem Emulator als auch auf den Geräten korrekt funktioniert:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />
  • android: hintergrund muss transparent sein wie es scheint auf api10 gibt es einen hintergrund mit intrinsischen auffüllungen (nicht mit anderen apis ausprobiert, aber die lösung funktioniert auch mit anderen)
  • android: button muss null sein, da die Auffüllungen sonst nicht richtig funktionieren
  • android: drawableLeft muss anstelle von android: button angegeben werden
  • android: drawablePadding ist der Abstand zwischen Ihrem Drawable und Ihrem Text
Gianluca P.
quelle
4
Die beste Antwort! Sie können auch android: background = "@ null" setzen und sehen so aus, wie Sie es angegeben haben, ohne Polsterung.
Saiyancoder
2
Wenn ich android: button = "@ null" einstelle, wird das Optionsfeld nicht aktiviert (angeklickt). Ich mache etwas falsch. Bitte helfen Sie stackoverflow.com/questions/28052820/…
Shirish Herwade
@ Shirish Diese Lösung hat nichts damit zu tun, dass Ihre Schaltfläche nicht angeklickt wird. Ich habe es gerade implementiert und es wird angeklickt.
Yar
Danke für die Lösung!
Vimalathithan Rajasekaran
31

Fügen Sie einen Rand zwischen einem Radiobutton und seiner Beschriftung hinzu, indem Sie links auffüllen :

android:paddingLeft="10dip"

Stellen Sie einfach Ihre benutzerdefinierte Polsterung ein .

Die XML-Eigenschaft von RadioButton.

<RadioButton
    android:id="@+id/radHighest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/YourImageResource"
    android:drawablePadding="50dp"
    android:paddingLeft="10dip"
    android:text="@string/txt_my_text"
    android:textSize="12sp" />

Getan

Hiren Patel
quelle
22

Verwenden Sie die folgenden XML-Attribute. Es hat bei mir funktioniert

Für API <= 16 verwenden

android:paddingLeft="16dp"

Für API> = 17 verwenden

android:paddingStart="@16dp"

Z.B:

<android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/popularityRadioButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:paddingEnd="@dimen/radio_button_text"
        android:paddingLeft="@dimen/radio_button_text"
        android:paddingRight="@dimen/radio_button_text"
        android:paddingStart="@dimen/radio_button_text"
        android:text="Popularity"
        android:textSize="@dimen/sort_dialog_text_size"
        android:theme="@style/AppTheme.RadioButton" />

Geben Sie hier die Bildbeschreibung ein

Weiter Mehr: drawablePaddingAttribut funktioniert nicht. Dies funktioniert nur, wenn Sie Ihrem Optionsfeld ein Zeichen hinzugefügt haben. Zum Beispiel:

<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:button="@null"
    android:drawableEnd="@android:drawable/btn_radio"
    android:drawablePadding="56dp"
    android:drawableRight="@android:drawable/btn_radio"
    android:text="New RadioButton" />
Srikar Reddy
quelle
5

Sie können dies derzeit nicht versuchen, um zu überprüfen, aber haben Sie versucht zu sehen, ob das Attribut android: drawablePadding genau das tut, was Sie benötigen?

Mark B.
quelle
1
Hm. Ich habe es versucht und es scheint in dieser Situation keine Wirkung zu haben. Vielen Dank für den Vorschlag, es klingt sicherlich richtig aus der Beschreibung: "Die Polsterung zwischen den Zeichen und dem Text".
Allclaws
4
final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),

    checkBox.getPaddingTop(),
    checkBox.getPaddingRight(),
    checkBox.getPaddingBottom());
Dilavar Malek
quelle
1

Der Abstand zwischen den Zeichen und dem Text. Dies wird durch Hinzufügen der folgenden Zeile in der XML-Datei erreicht. android:drawablePadding="@dimen/10dp"

Faakhir
quelle
Ich habe genau danach gesucht ... hat mir sehr geholfen
Shirish Herwade
2
@dimen/10dpschlechte Praxis
Vlad
0

Ich habe versucht, "android: paddingLeft" wird funktionieren. paddingLeft wirkt sich nur auf den Text aus, während das Radiobild an der ursprünglichen Position bleibt.

David Guo
quelle
-1

Das "android: paddingLeft" scheint nur unter android 4.2.2 korrekt zu funktionieren

Ich habe fast alle Versionen von Android ausprobiert und es funktioniert nur auf der Version 4.2.2.

Unterland
quelle
-1

Ich verwende einen anderen Ansatz, der meiner Meinung nach auf allen API-Versionen funktionieren sollte. Anstatt Padding anzuwenden, füge ich RadioButtons eine leere Ansicht hinzu:

<View
        android:layout_width="20dp"
        android:layout_height="1dp" />

Dies sollte Ihnen 20dp Polsterung geben.

Oren Bengigi
quelle
-1

Ich kam hierher, um nach einer Antwort zu suchen, und der einfachste Weg (nach einigem Überlegen) war, den Abstand am Anfang des Etiketts selbst so hinzuzufügen

<RadioGroup
     android:orientation="horizontal"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignRight="@+id/btnChangeMode"
     android:layout_marginTop="10dp"
     android:layout_marginBottom="10dp"
     android:layout_below="@+id/view3"
     android:gravity="center|left"
     android:id="@+id/ledRadioGroup">
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" On"
         android:layout_marginRight="6dp"
         android:id="@+id/ledon"
         android:textColor="@color/white" />
<RadioButton
         android:button="@drawable/custom_radio_button"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text=" Off"
         android:layout_marginLeft="6dp"
         android:id="@+id/ledoff"
         android:textColor="@color/white" />
jtizzle
quelle
-1

für mich funktioniert:

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_checked="true">
            <layer-list>
                <item android:right="5dp">
                    <shape android:paddingLeft="5dp" android:shape="oval">
                     <size android:width="20dp" android:height="20dp" />
                     <solid android:color="@color/blue" />
            </shape>
        </item>
    </layer-list>
</item>
<item android:paddingLeft="5dp" android:state_checked="false">
    <layer-list>
        <item android:right="5dp">
            <shape android:paddingLeft="5dp" android:shape="oval">
                <size android:width="20dp" android:height="20dp" />
                <solid android:color="@color/grey" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>
Vadim
quelle
-1
<RadioButton
                android:id="@+id/rb1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@null"
                android:paddingLeft="20dp"
                android:text="1"
                android:textColor="@color/text2"
                android:textSize="16sp"
                android:textStyle="bold" />
Dhaval Shingala
quelle
Erwägen
-1

Sie können diesen Code in Ihrer XML-Datei verwenden

<RadioButton
android:id="@+id/rButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:paddingLeft="10dip"
android:text="@string/your_text" />

oder verwenden Sie dies für die Aktivitätsklasse

radioButton.setPadding(12, 10, 0, 10);
Faxriddin Abdullayev
quelle
-1

Verwenden Sie die Schwerkraft

            android:gravity="center_horizontal|center_vertical"
Hossam Gamal
quelle
-1

Erstellen Sie einen solchen Stil in style.xml

<style name="Button.Radio">

    <item name="android:paddingLeft">@dimen/spacing_large</item>
    <item name="android:textSize">16sp</item>
</style>

Setzen Sie diesen Stil in das Optionsfeld

 <RadioButton
                android:id="@+id/rb_guest_busy"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:text="@string/guest_is_waiting"
                android:textSize="@dimen/font_size_3x_medium"
                android:drawablePadding="@dimen/spacing_large"
                android:textColor="@color/color_text_heading_dark"
                style="@style/Button.Radio"/>

Sie können jedes Attribut wie die Schaltfläche ändern, da RadioButton die Schaltfläche indirekt erbt.

Vindhya Pratap Singh
quelle
-1

Ich weiß, dass es eine alte Frage ist, aber mit dieser Lösung habe ich endlich Ruhe und vergesse die API-Ebene.

Linke Seite vertikale RadioGroup mit rechter Seite vertikale Textansicht.

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">
        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RadioGroup>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:gravity="center_vertical"
            android:text="Radio 2"/>
    </LinearLayout>
</LinearLayout>
Stanley Kou
quelle
@ Mark Buikema, es ist absolut kein Label, aber es funktioniert hier wie ein Label! Wenn Sie Klickbeschriftungen wünschen, können Sie TextViews Klick-Listener hinzufügen. Mein Punkt ist, müssen wir Layout für jede Version von Android OS implementieren? Ich denke nicht.
Stanley Kou
-1

Sie können versuchen, das Schwerkraftattribut des Optionsfelds zu verwenden.

<RadioButton
                        android:id="@+id/rb_all"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:checked="true"
                        android:gravity="right|center_vertical"
                        android:padding="@dimen/padding_30dp"
                        android:text="@string/filter_inv_all"
                        android:textColor="@color/black"
                        android:textSize="@dimen/text_size_18" />

Dadurch wird der Text ganz rechts ausgerichtet. Schauen Sie sich das erste Radio im Bild an.

Geben Sie hier die Bildbeschreibung ein

Salil Kaul
quelle