单选按钮,文本在按钮上方

17

我是 Android 的新手,需要在我的活动中添加单选按钮,但是我需要将文本放置在圆点按钮的顶部。

请帮忙。我找到了以下内容,但我不理解 @drawable/main_selector 和 @style/TabStyle 是什么意思。

Radiobutton with text on top

有人能给我一个 101 指南吗。

更新

根据一些建议,我使用了以下内容,但没有起作用:

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RadioButton
    android:text="something that is on top"
    android:id="@+id/toggle_tab_left"
    android:button="?android:attr/listChoiceIndicatorSingle"        
    style="@null"/>

<RadioButton 
    android:button="?android:attr/listChoiceIndicatorSingle"
    android:text="something that is on top"
    android:id="@+id/toggle_tab_right"
    style="@null"/>
</RadioGroup>

更新2

我从Warpzit那里得到了我的解决方案,但在我把问题标记为已回答之前,有人可以帮我解决下面的对齐问题吗?我将有5个单选按钮排成一行,其中一些单选按钮的文本会分成2行。当文本适合屏幕时,因为横向或平板电脑,所有文本都应该在同一行中:

enter image description here

更新3

...根据屏幕大小,文本可能会分成不同行数。它不总是标准的。

enter image description here


1
这个问题被踩了,我不明白为什么。它的提问非常清晰明了,目标也很明确。证据是它甚至已经很快得到了正确的回答!!! - Yiannis Stavrianos
5个回答

33

@style/TabStyle只是一个应用的样式,可以忽略。 @drawable/main_selector是一种图形,根据情况进行切换。您可以在这里了解更多有关选择器的信息。

获取文本置顶的示例:

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RadioButton
    android:text="Text on top"
    android:button="@null"
    android:background="#f00"
    android:layout_weight="1"/>

<RadioButton 
    android:text="Text on top"
    android:button="@null"
    android:background="#0f0"
    android:layout_weight="1"/>
</RadioGroup>

将得到以下结果:

在背后,顶部的文本示例

如果你想让文本出现在按钮上方,可以使用以下xml代码:

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RadioButton
    android:text="Text on top"
    android:button="@null"
    android:drawableBottom="@android:drawable/btn_radio"
    android:gravity="center"
    android:layout_weight="1"/>

<RadioButton
    android:text="Text on top"
    android:button="@null"
    android:drawableBottom="@android:drawable/btn_radio"
    android:gravity="center"
    android:layout_weight="1"/>
</RadioGroup>

这将会得到以下结果:

上面的例子


1
我可以使用默认的按钮(bullet)而不是@drawable/main_selector吗? - Yiannis Stavrianos
@YiannisStavrianos 是的,但是指出的是按钮可绘制对象应该为"@null",而您应该覆盖背景。 - Warpzit
@YiannisStavrianos 我不明白你的问题。你是想在文本过长时隐藏它,还是有其他需求? - Warpzit
我需要将项目符号底部对齐。 - Yiannis Stavrianos
我尝试过那个,它差不多是我所需要的。根据屏幕大小,文本行数可能是1、2或更多。我将无法每次屏幕大小改变时设置高度。请参见更新3。 - Yiannis Stavrianos
显示剩余6条评论

26
为了补充Warpzit great answer,您应该在按钮上使用android:gravity="center_horizontal|bottom"android:layout_height="match_parent"来对齐它们。
此外,无需从AOSP复制单选按钮可绘制对象,请使用?android:attr/listChoiceIndicatorSingle

Screenshot

XML布局

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/radioGroup1"
    android:layout_width="400dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="20dp" >

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
        android:gravity="center_horizontal|bottom"
        android:text="RadioButton" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
        android:gravity="center_horizontal|bottom"
        android:text="RadioButton dsfsdfsdfsdfsdf" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:button="@null"
        android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
        android:gravity="center_horizontal|bottom"
        android:text="RadioButton fdsfsd fdsfsdf fsfsdfs" />

</RadioGroup>

如果我要在RadioGroup中以编程方式添加单选按钮,该怎么做? - Ishaan Puniani
在将按钮添加到RadioGroup之前,为每个按钮准备并设置RadioGroup.LayoutParams。 - sergio91pt

2

让这种效果易于应用的好方法是使用样式。为此,请将以下代码放置在您的styles.xml文件中,位于resources标签下方。

<style name="RadioWithTextOnTop">
    <item name="android:button">@null</item>
    <item name="android:drawableBottom">?android:attr/listChoiceIndicatorSingle</item>
    <item name="android:gravity">center_horizontal|bottom</item>
</style>

然后,将它应用到你的RadioButton上,像这样:

<RadioButton
    style="@style/RadioWithTextOnTop"
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="RadioButton" />

0
  <RadioButton
                    android:id="@+id/radio1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
                    android:gravity="center_horizontal|bottom"[enter image description here][1]
                    android:background="@drawable/app_border_0"
                    android:padding="@dimen/_15sdp"
                    android:text="@string/no"
                    android:fontFamily="@font/poppins_medium"
                    style="@style/AppRadioAppStyle"
                    android:layout_marginStart="@dimen/_10sdp"/>

在你的RadioButton中应该添加android:button="@null"


0
我最终采用的最简单解决方案是:
<RadioButton
    ...
    android:gravity="center_horizontal|bottom"
    android:drawableTop="?android:attr/listChoiceIndicatorSingle"
    android:button="@null"
    />

它还使用了较新的动画图标样式listChoiceIndicatorSingle,这是默认设置。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接