Добавить поле между RadioButton и его меткой в ​​Android?


88

Можно ли добавить немного места между RadioButton и меткой, по-прежнему используя встроенные компоненты Android? По умолчанию текст выглядит немного сморщенным.

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

Я пробовал пару вещей:

  1. Кажется, что указание полей и отступов добавляет пространство вокруг всего элемента (кнопки и текста вместе). Это имеет смысл, но не делает того, что мне нужно.

  2. Создание настраиваемого чертежа с помощью XML, определяющего изображения для отмеченного и непроверенного состояний, а затем добавление нескольких дополнительных пикселей с правой стороны каждого изображения. Это должно работать, но теперь вы выходите за пределы пользовательского интерфейса по умолчанию. (Не конец света, но не идеал)

  3. Добавьте дополнительный пробел в начало каждой метки. Android, кажется, обрезает начальный пробел, как в «My String», но указание Unicode U + 00A0, как в «\ u00A0My String», помогает. Это работает, но кажется немного грязным.

Есть лучшие решения?

Ответы:


120

Для тех, кто читает это сейчас, принятый ответ приведет к некоторым проблемам с макетом в новых API, вызывающих слишком большое заполнение.

В API <= 16 вы можете установить paddingLeftпереключатель, чтобы установить отступ относительно границ просмотра переключателя. Кроме того, фон патча девять также изменяет границы представления относительно представления.

В API> = 17 paddingLeft(или paddingStart) относится к переключателю, который можно рисовать. То же самое и с патчем девять. Чтобы лучше проиллюстрировать различия заполнения, см. Прилагаемый снимок экрана.

Если вы покопаетесь в коде, вы найдете новый метод в API 17 под названием getHorizontalOffsetForDrawables . Этот метод вызывается при вычислении левого отступа для переключателя (отсюда и дополнительное пространство, показанное на рисунке).

TL; DR Просто используйте, paddingLeftесли у вас minSdkVersion> = 17. Если вы поддерживаете API <= 16, у вас должен быть стиль переключателя для минимального SDK, который вы поддерживаете, и другой стиль для API 17+.

объединить скриншоты, показывающие различия в левом заполнении между версиями API


2
апи 17 android.os.Build.VERSION_CODES.JELLY_BEAN_MR1
KarenAnne

11
Лучший способ сделать это - использовать каталог «values-v17»; поместите ваше измерение API 17+ в xml ресурсов там, а стандартное для 16 и ниже просто "значениями".
akent

15
Удивительно, как разработчики / руководство Google относятся к нам, обычным разработчикам. Они делают все, что хотят, когда хотят. Последовательность и целостность для них ничего не значат.
Яр

66

Не уверен, что это решит вашу проблему, но пробовали ли вы свойство Radio Button "Padding left" со значением 50dip или более


2
Это работает, и 50dip необходимо, чтобы покрыть ширину вытяжного элемента по умолчанию. Сначала я использовал 20dip, и текст сдвинулся влево! Это потому, что точка привязки не является правым краем объекта для рисования; это левый край drawable.
Роберт Клейпул

58

Я попробовал несколько способов и закончил с тем, что этот работает правильно как на эмуляторе, так и на устройствах:

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />
  • android: фон должен быть прозрачным, поскольку кажется, что на api10 есть фон с внутренними отступами (не пробовал с другими apis, но решение работает и на других)
  • android: button должно быть нулевым, иначе отступы не будут работать правильно
  • Android: drawableLeft должен быть указан вместо андроида: кнопка
  • android: drawablePadding - это пространство, которое будет между вашим drawable и вашим текстом

4
Лучший ответ! Вы также можете установить android: background = "@ null", и он будет выглядеть так, как вы заявили, без заполнения.
saiyancoder

2
когда я устанавливаю android: button = "@ null", переключатель не проверяется (не щелкается). Я делаю что-то не так. пожалуйста, помогите stackoverflow.com/questions/28052820/…
Шириш Хервэйд

@Shirish это решение не имеет ничего общего с тем, что ваша кнопка не нажата. Я просто реализовал это, и он щелкнул.
Яр

Спасибо за решение!
Vimalathithan Rajasekaran

32

Добавить маржу между радиокнопкой его этикеткой на paddingLeft :

android:paddingLeft="10dip"

Просто установите свой собственный отступ .

Свойство RadioButton xml.

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

Выполнено


22

Используйте следующие атрибуты XML. Это сработало для меня

Для API <= 16 используйте

android:paddingLeft="16dp"

Для API> = 17 используйте

android:paddingStart="@16dp"

Например:

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

введите описание изображения здесь

Дальше Подробнее: drawablePaddingатрибут не работает. Это работает, только если вы добавили возможность рисования в свой переключатель. Например:

<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

Не могу попробовать это прямо сейчас, чтобы проверить, но пытались ли вы проверить, делает ли атрибут android: drawablePadding то, что вам нужно?


1
Хм. Попробовал, и похоже, что в этой ситуации это не имеет никакого эффекта. Спасибо за предложение, оно определенно звучит прямо из описания: «Отступ между чертежами и текстом».
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

Отступ между чертежами и текстом. Это будет достигнуто путем добавления строки ниже в файл xml. android:drawablePadding="@dimen/10dp"


я искал именно это ... мне очень помог
Шириш Хервэйд

2
@dimen/10dpплохая практика
Влад

0

Я пробовал, "android: paddingLeft" будет работать. paddingLeft воздействует только на текст, сохраняя радиоизображение в исходном положении.


-1

Кажется, что "android: paddingLeft" корректно работает только под android 4.2.2.

Я пробовал почти все версии Android, и он работает только с версией 4.2.2.


-1

Я использую другой подход, который, как мне кажется, должен работать во всех версиях API. Вместо применения отступов я добавляю пустое представление между RadioButtons:

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

Это должно дать вам отступ 20dp.


-1

Я пришел сюда в поисках ответа, и самый простой способ (после некоторого размышления) был добавить пробел в начале самой метки, например

<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

у меня работает:

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

Вы можете добавить несколько комментариев, чтобы объяснить, как это решает проблему;)
DeadlyJesus

-1

Вы можете использовать этот код в своем 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" />

или используйте это в классе активности

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

-1

Создайте такой стиль в style.xml

<style name="Button.Radio">

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

Поместите этот стиль в переключатель

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

Вы можете изменить любой атрибут так же, как и кнопку, поскольку RadioButton косвенно наследует кнопку.


-1

Я знаю, что это старый вопрос, но с этим решением я наконец успокоился и забыл об уровне API.

Левая вертикальная радиогруппа с правой вертикальной текстовой панелью.

 <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, Абсолютно это не ярлык, но здесь он работает как ярлык! Если вам нужны метки щелчков, вы можете добавить прослушиватели щелчков в TextViews. Я хочу сказать, нужно ли нам реализовывать макет для каждой версии ОС Android? Я думаю нет.
Стэнли Коу

-1

Вы можете попробовать использовать атрибут гравитации радиокнопки.

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

Это выровняет текст по правому краю. Обратите внимание на первое радио на изображении.

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.