radio-button layout - Aggiungi margine tra un RadioButton e la sua etichetta in Android?




radiogroup horizontal (17)

È possibile aggiungere un po 'di spazio tra un RadioButton e l'etichetta mentre si usano ancora i componenti integrati di Android? Di default il testo appare un po 'stropicciato.

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

Ho provato un paio di cose:

  1. Specificando margine e riempimento sembra aggiungere spazio attorno all'intero elemento (pulsante e testo, insieme). Ha senso, ma non fa quello che mi serve.

  2. Creazione di un drawable personalizzato tramite XML che specifica le immagini per gli stati selezionati e deselezionati, quindi aggiungendo alcuni pixel in più sul lato destro di ogni immagine. Questo dovrebbe funzionare, ma ora stai uscendo dall'interfaccia utente predefinita. (Non la fine del mondo, ma non l'ideale)

  3. Aggiungi spazi bianchi extra all'inizio di ogni etichetta. Android sembra tagliare un carattere di spazio iniziale, come in "My String", ma specificare l'unicode U + 00A0, come in "\ u00A0My String" fa il trucco. Funziona, ma sembra piuttosto sporco.

Qualche soluzione migliore?


Answers

Ho provato diversi modi e ho finito con questo funziona correttamente su entrambi emulatore e dispositivi:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />
  • android: lo sfondo deve essere trasparente come sembra su api10 c'è uno sfondo con padings intrinseci (non provato con altri apis ma la soluzione funziona anche su altri)
  • android: il pulsante deve essere nullo poiché i paddings non funzioneranno correttamente altrimenti
  • android: drawableLeft deve essere specificato al posto di Android: pulsante
  • android: drawablePadding è lo spazio che sarà tra il tuo drawable e il tuo testo

Per chiunque stia leggendo questo ora. La risposta accettata porterà ad alcuni problemi di layout sui nuovi apis che causano troppa imbottitura.

Su API <= 16 è possibile impostare il riempimento lasciato sul pulsante di opzione per impostare il padding relativo ai limiti di visualizzazione del pulsante di opzione. Inoltre, uno sfondo di patch nove modifica anche i limiti della vista relativi alla vista.

Nell'API 17 il riquadro sinistro è in relazione al pulsante di opzione selezionabile. Lo stesso vale per circa una patch nove. Per meglio illustrare le differenze di riempimento vedere la schermata allegata.

Se si scava attraverso il codice, si troverà un nuovo metodo in api 17 chiamato getHorizontalOffsetForDrawables . Questo metodo viene chiamato quando si calcola il padding sinistro per un pulsante di opzione (da qui lo spazio aggiuntivo illustrato nell'immagine).

TL; DR Dovresti avere lo stile di pulsante radio per il min sdk che stai supportando e un altro stile per api 17+


per me funziona:

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

Potresti provare a utilizzare l'attributo gravità del pulsante di opzione.

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

Questo allineerà il testo all'estremità destra. Controlla la prima radio nell'immagine.


Crea uno stile in style.xml come questo

<style name="Button.Radio">

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

Metti quello stile nel pulsante radio

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

È possibile modificare qualsiasi attributo come pulsante in quanto RadioButton eredita indirettamente il pulsante.


Aggiungi margine tra un pulsante radio e l' etichetta per paddingLeft :

android:paddingLeft="10dip"

Basta impostare il padding personalizzato.

Proprietà xml di 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" />

Fatto


So che è una vecchia domanda, ma con questa soluzione ho finalmente avuto la tranquillità e ho dimenticato il livello dell'API.

Gruppo radio verticale lato sinistro con vista testo verticale lato destro.

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

Sto usando un approccio diverso che penso dovrebbe funzionare su tutte le versioni API. Invece di applicare il padding, aggiungo una vista vuota tra i RadioButton:

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

Questo dovrebbe darti un riempimento di 20dp.


Utilizzare i seguenti attributi XML. Ha funzionato per me

Per uso API <= 16

android:paddingLeft="16dp"

Per API> = 17 usi

android:paddingStart="@16dp"

Per esempio:

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

Ulteriori informazioni: l'attributo drawablePadding non funziona. Funziona solo se hai aggiunto un drawable nel tuo pulsante radio. Per esempio:

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

Usa la gravità

            android:gravity="center_horizontal|center_vertical"

Puoi questo codice sul tuo file XML

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

oppure usalo nella classe di attività

radioButton.setPadding(12, 10, 0, 10);

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

    checkBox.getPaddingTop(),
    checkBox.getPaddingRight(),
    checkBox.getPaddingBottom());

Non posso provare questo adesso per verificare, ma hai provato a vedere se l'attributo android:drawablePadding fa quello che ti serve?


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

"Android: paddingLeft" sembra funzionare correttamente solo con Android 4.2.2

ho provato quasi tutte le versioni di Android e funziona solo sulla versione 4.2.2.


Il padding tra i drawable e il testo. Sarà raggiunto aggiungendo la riga qui sotto nel file xml. android:drawablePadding="@dimen/10dp"


La versione corrente (maggio 2011) dell'emulatore è lenta in particolare con Android 3.0 (Honeycomb) principalmente perché l'emulatore non supporta l'hardware GL - questo significa che il codice GL viene tradotto in software (software ARM, infatti) che poi viene emulato nel software in QEMU . Questo è pazzo-lento. Stanno lavorando a questo problema e lo hanno parzialmente risolto, ma non con alcun tipo di qualità di rilascio.

Guarda il video Google I / O 2011: Strumenti di sviluppo Android per vederlo in azione: passa a circa 44 minuti.





android radio-button