Dodać margines między RadioButton a jego etykietą w systemie Android?


88

Czy można dodać trochę miejsca między RadioButton a etykietą, nadal korzystając z wbudowanych komponentów Androida? Domyślnie tekst wygląda na nieco zgnieciony.

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

Próbowałem kilku rzeczy:

  1. Wydaje się, że określenie marginesu i dopełnienia powoduje zwiększenie przestrzeni wokół całego elementu (przycisku i tekstu razem). To ma sens, ale nie robi tego, czego potrzebuję.

  2. Tworzenie niestandardowego elementu rysunkowego za pomocą XML, określając obrazy dla stanów zaznaczonych i niezaznaczonych, a następnie dodając kilka dodatkowych pikseli po prawej stronie każdego obrazu. To powinno działać, ale teraz wychodzisz poza domyślny interfejs użytkownika. (Nie koniec świata, ale nie ideał)

  3. Dodaj dodatkowe spacje na początku każdej etykiety. Wygląda na to, że Android przycina początkowy znak spacji, jak w „Mój ciąg”, ale podanie kodu Unicode U + 00A0, jak w przypadku „\ u00A0Mój ciąg” załatwia sprawę. To działa, ale wydaje się trochę brudne.

Jakieś lepsze rozwiązania?

Odpowiedzi:


120

Dla każdego, kto to teraz czyta, zaakceptowana odpowiedź doprowadzi do pewnych problemów z układem w nowszych interfejsach API, powodując zbyt duże wypełnienie.

W API <= 16 możesz ustawić paddingLeftna przycisku radiowym, aby ustawić dopełnienie względem granic widoku przycisku radiowego. Dodatkowo tło łatki numer 9 zmienia również granice widoku w stosunku do widoku.

W API> = 17 paddingLeft(lub paddingStart) jest w odniesieniu do przycisku opcji do rysowania. To samo dotyczy poprawki dziewiątej. Aby lepiej zilustrować różnice w wypełnieniu, zobacz załączony zrzut ekranu.

Jeśli przekopiesz się przez kod, w API 17 znajdziesz nową metodę o nazwie getHorizontalOffsetForDrawables . Ta metoda jest wywoływana podczas obliczania lewego wypełnienia przycisku radiowego (stąd dodatkowa spacja pokazana na rysunku).

TL; DR Po prostu użyj, paddingLeftjeśli twój minSdkVersionjest> = 17. Jeśli wspierasz API <= 16, powinieneś mieć styl przycisku radiowego dla min SDK, który wspierasz, i inny styl dla API 17+.

połącz zrzuty ekranu pokazujące różnice w wypełnieniu po lewej stronie między wersjami API


2
api 17 to android.os.Build.VERSION_CODES.JELLY_BEAN_MR1
KarenAnne

11
Najlepszym sposobem na to jest użycie katalogu „values-v17”; umieść wymiar API 17+ w zasobach xml tam, a standardowy dla 16 i poniżej w zwykłych „wartościach”.
akent

15
Niesamowite, jak programiści / zarząd Google traktują nas zwykłych programistów. Robią, co chcą i kiedy chcą. Konsekwencja i uczciwość nic dla nich nie znaczą.
Yar

66

Nie jestem pewien, czy to rozwiąże problem, ale czy wypróbowałeś właściwość „Padding left” przycisku radiowego o wartości 50dip lub więcej


2
To działa i potrzebne jest 50dip, aby pokryć szerokość domyślnego rysunku. Na początku użyłem 20dip i tekst przesunął się w lewo! Dzieje się tak, ponieważ punkt zakotwiczenia nie jest prawą krawędzią elementu do rysowania; jest to lewa krawędź wyciąganego elementu.
Robert Claypool

58

Wypróbowałem kilka sposobów i skończyłem z tym działającym poprawnie zarówno na emulatorze, jak i na urządzeniach:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />
  • android: tło musi być przezroczyste, jak się wydaje w api10, istnieje tło z wewnętrznymi wypełnieniami (nie próbowano z innymi interfejsami API, ale rozwiązanie działa również na innych)
  • android: button musi być pusty, ponieważ w przeciwnym razie wypełnienia nie będą działać poprawnie
  • android: drawableLeft musi być określony zamiast android: button
  • android: drawablePadding to przestrzeń, która będzie między twoim rysunkiem a tekstem

4
Najlepsza odpowiedź! Możesz także ustawić android: background = "@ null" i będzie wyglądać tak, jak podano, bez dopełnienia.
saiyancoder

2
kiedy ustawiam android: button = "@ null", przycisk opcji nie jest sprawdzany (klikany). Robię coś złego. proszę o pomoc stackoverflow.com/questions/28052820/…
Shirish Herwade

@Shirish to rozwiązanie nie ma nic wspólnego z brakiem kliknięcia przycisku. Właśnie to zaimplementowałem i zostało kliknięte.
Yar

Dzięki za rozwiązanie!
Vimalathithan Rajasekaran

32

Dodaj margines między radiobuttonem jego etykietą , wypełniając po lewej stronie :

android:paddingLeft="10dip"

Po prostu ustaw niestandardowe wypełnienie .

Właściwość xml 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" />

Gotowe


22

Użyj następujących atrybutów XML. U mnie to zadziałało

Dla API <= 16 użyj

android:paddingLeft="16dp"

Dla API> = 17 użyj

android:paddingStart="@16dp"

Na przykład:

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

wprowadź opis obrazu tutaj

Więcej informacji: drawablePaddingatrybut nie działa. Działa tylko wtedy, gdy dodałeś element do rysowania w przycisku opcji. Na przykład:

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

6

Nie możesz teraz tego spróbować, aby zweryfikować, ale czy próbowałeś sprawdzić, czy atrybut android: drawablePadding spełnia Twoje wymagania ?


1
Hm. Spróbowałem i wydaje się, że nie ma to żadnego efektu w tej sytuacji. Dzięki za sugestię, z pewnością brzmi to prosto z opisu: „Dopełnienie między elementami do rysowania a tekstem”.
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());

1

Dopełnienie między elementami rysunkowymi a tekstem. Zostanie to osiągnięte poprzez dodanie poniższej linii w pliku xml. android:drawablePadding="@dimen/10dp"


właśnie tego szukałem ... bardzo mi pomogło
Shirish Herwade

2
@dimen/10dpzła praktyka
Vlad

0

Próbowałem, „android: paddingLeft” będzie działać. paddingLeft wpłynie tylko na tekst, a obraz radia pozostanie w pierwotnym położeniu.


-1

Wydaje się, że „android: paddingLeft” działa poprawnie tylko w systemie Android 4.2.2

Wypróbowałem prawie wszystkie wersje Androida i działa tylko w wersji 4.2.2.


-1

Używam innego podejścia, które moim zdaniem powinno działać na wszystkich wersjach API. Zamiast stosować dopełnienie, dodaję pusty widok między RadioButtons:

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

Powinno to zapewnić wypełnienie 20 dp.


-1

Przyszedłem tutaj szukając odpowiedzi i najprostszym sposobem (po pewnym zastanowieniu) było dodanie spacji na początku samej etykiety tak

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

-1

u mnie działa:

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

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

Zastanów się nad dodaniem kilku komentarzy, aby wyjaśnić, jak to rozwiązuje problem;)
DeadlyJesus

-1

Możesz ten kod w swoim pliku 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" />

lub użyj tego w klasie Activity

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

-1

Utwórz styl w style.xml w ten sposób

<style name="Button.Radio">

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

Umieść ten styl w przycisku opcji

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

Możesz zmienić dowolny atrybut tak samo jak przycisk, ponieważ RadioButton pośrednio dziedziczy przycisk.


-1

Wiem, że to stare pytanie, ale dzięki takiemu rozwiązaniu w końcu odzyskałem spokój i zapomniałem o poziomie API.

Lewa strona pionowa RadioGroup z pionowym widokiem tekstu po prawej stronie.

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

@Mark Buikema, Absolutnie to nie jest etykieta, ale tutaj działa jak etykieta! Jeśli chcesz mieć etykiety kliknięć, możesz dodać detektory kliknięć do TextViews. Chodzi mi o to, czy musimy implementować układ dla każdej wersji systemu operacyjnego Android? Myśle że nie.
Stanley Kou

-1

Możesz spróbować użyć atrybutu grawitacji przycisku opcji.

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

Spowoduje to wyrównanie tekstu do skrajnego prawego końca. Sprawdź pierwsze radio na obrazku.

wprowadź opis obrazu tutaj

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.