在Android中的RadioButton及其标签之间增加边距？

88

在仍然使用Android内置组件的情况下，是否可以在RadioButton和标签之间添加一点空间？默认情况下，文本看起来有些混乱。

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

我尝试了几件事：

  1. 指定边距和填充似乎会在整个元素（按钮和文本在一起）周围增加空间。那是有道理的，但不能满足我的需要。

  2. 通过XML创建自定义可绘制对象，以指定用于检查和未检查状态的图像，然后在每个图像的右侧添加一些额外的像素。这应该可以，但是现在您要跳出默认UI。（不是世界末日，但不是理想的）

  3. 在每个标签的开头添加额外的空格。Android似乎修剪了一个前导空格字符，例如“ My String”，但是指定了Unicode U + 00A0，例如“ \ u00A0My String”就可以了。这行得通，但似乎有点脏。

有更好的解决方案吗？

android  radio-button 
— 全爪
source

Answers:

120

对于现在阅读本文的任何人，可接受的答案都会导致在较新的API上出现一些布局问题，从而导致填充过多。

在API <= 16上，您可以paddingLeft在单选按钮上进行设置，以相对于单选按钮的视图范围设置填充。此外，补丁九背景也会更改相对于视图的视图范围。

在API> = 17时，paddingLeft（或paddingStart）与可绘制的单选按钮有关。同样适用于补丁九。为了更好地说明填充差异，请参阅随附的屏幕截图。

如果深入研究代码，您会在API 17中找到一个名为getHorizo​​ntalOffsetForDrawables的新方法。计算单选按钮的左填充时会调用此方法（因此，图中显示了额外的空间）。

TL; DRpaddingLeft如果您minSdkVersion的>> 17，请使用。如果您支持的API <= 16，则应该具有所支持的最小SDK的单选按钮样式，以及API 17+的另一种样式。

结合显示API版本之间左填充差异的屏幕截图

— 吉姆·巴卡
source
2
API 17是android.os.Build.VERSION_CODES.JELLY_BEAN_MR1
— KarenAnne
11
最好的方法是使用“ values-v17”目录。将您的API 17+维度放到资源xml中，将标准的16和以下的维度放到普通的“值”中。
— 肯特2014年
14
Google开发人员/管理人员如何对待我们平常的开发人员，真是太神奇了。他们随时随地都可以做他们想做的事。一致性和完整性对​​他们没有任何意义。
— 2015年
66

不知道这是否能解决您的问题，但是您是否尝试过使用单选按钮的“ Padding left”属性，其值为50dip或更大

— 用户438650
source
2
这可以工作，并且需要50dip来覆盖默认可绘制对象的宽度。起初我使用20dip，文本向左移动！这是因为锚点不是可绘制对象的右边缘。它是绘制对象的左边缘。
— 罗伯特·克莱普
58

我尝试了几种方法，并完成了这一种在模拟器和设备上都能正常工作的方法：

    <RadioButton
        android:background="@android:color/transparent"
        android:button="@null"
        android:drawableLeft="@drawable/your_own_selector"
        android:drawablePadding="@dimen/your_spacing" />
  • android：background需要透明，因为在api10上似乎有一个带有固有填充的背景（未尝试与其他api一起使用，但该解决方案也适用于其他api）
  • android：button必须为null，否则填充将无法正常工作
  • 需要指定android：drawableLeft而不是android：button
  • android：drawablePadding是您的drawable和您的文字之间的空间
— 詹卢卡（Gianluca P.）
source
4
最好的答案！您还可以设置android：background =“ @ null”，并且外观与您声明的一样，没有填充。
— saiyancoder 2014年
2
当我设置android：button =“ @ null”时，单选按钮未得到检查（单击）。我我做错了什么。请帮助stackoverflow.com/questions/28052820/...
— 希里什Herwade
@Shirish此解决方案与未单击您的按钮无关。我刚刚实现了它，然后单击了它。
— 2015年
感谢您的解决方案！
— 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" />

完成了

— 希伦·帕特尔（Hiren Patel）
source
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" />
— 斯里卡·雷迪（Srikar Reddy）
source
6

现在无法尝试验证，但是您是否尝试查看android：drawablePadding属性是否满足您的需求？

— 马克B
source
1
嗯 尝试一下，在这种情况下似乎没有任何效果。感谢您的建议，从以下描述中确实听起来很正确：“可绘制对象和文本之间的填充”。
— allclaws 2010年
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）
source
1

可绘制对象和文本之间的填充。这将通过在xml文件中添加以下行来实现。 android:drawablePadding="@dimen/10dp"

— 法克希尔
source
我一直在寻找这个……对我有很大帮助
— Shirish Herwade
2
@dimen/10dp不好的做法
— 弗拉德
0

我试过了，“ android：paddingLeft”将起作用。paddingLeft仅在使无线电图像保持原始位置的同时影响文本。

— 郭大卫
source
-1

“ android：paddingLeft”似乎只能在android 4.2.2下正常工作

我已经尝试了几乎所有版本的android，并且仅适用于4.2.2版本。

— 低地
source
-1

我使用的是我认为应该适用于所有API版本的其他方法。而不是应用填充，而是在RadioButtons之间添加一个空视图：

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

这应该给您20dp填充。

— 奥伦·本吉吉（Oren Bengigi）
source
-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" />
— jtizzle
source
-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>
— 瓦迪姆
source
-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" />
— 达瓦尔·辛加拉
source
考虑添加一些注释来解释这是如何解决问题的；）
— 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" />

或在Activity类上使用

radioButton.setPadding(12, 10, 0, 10);
— 传真里丁（Faxriddin Abdullayev）
source
-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"/>

您可以更改与button相同的任何属性，因为RadioButton间接继承了button。

— Vindhya Pratap Singh
source
-1

我知道这是一个古老的问题，但是有了这个解决方案，我终于放心了，而忘记了API级别。

左侧垂直RadioGroup具有右侧垂直文本视图。

 <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>
— 斯坦利·寇
source
@Mark Buikema，绝对不是标签，但是在这里确实像标签！如果要单击标签，可以将单击侦听器添加到TextViews。我的观点是，我们是否需要为每个版本的android os实现布局？我觉得不行。
— 斯坦利·寇
-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" />

这将使文本最右边对齐。检出图像中的第一个收音机。

在此处输入图片说明

— 萨利尔·考尔（Salil Kaul）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.