单选按钮下方的文本

Question

我需要你的帮助来解决我的布局问题。我有 4 个 RadioButtons，它们在这个方案中像往常一样出现：

O text1  O text2  O text3  O text4

其中 O 是按钮。我想知道是否可以通过这种方式更改此布局：

  O      O       O       O

文本1  文本2  文本3  文本4

Answer 1

这是在 RadioButtons 下面设置 Text 的解决方案：

此代码android:drawablePadding="-20dp" 不需要。

您在此处添加自己的可绘制选择器：android:drawableTop="@drawable/your_Image_Here"。

<RadioGroup
        android:id="@+id/RadioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/Icon1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:button="@android:color/transparent"
            android:checked="true"
            android:drawablePadding="-20dp"
            android:drawableTop="@drawable/your_Image_Here"
            android:gravity="center"
            android:text="@string/your_Text_Here"
            android:textColor="@color/icons_color" />

        <RadioButton
            android:id="@+id/Icon2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:button="@android:color/transparent"
            android:drawablePadding="-20dp"
            android:drawableTop="@drawable/your_Image_Here"
            android:gravity="center"
            android:text="@string/your_Text_Here"
            android:textColor="@color/icons_color" />
    </RadioGroup>

Answer 2

我不认为普通的 RadioButton 小部件默认可以做到这一点。你需要做一些事情来达到这个效果。您可以通过组合 RadioButton 和 TextView 来创建您自己的 RadioButton 视图类，这样您就可以完全控制项目彼此之间的关系。或者您可以跳过将其设置为视图，而只在布局中使用两个元素，1 个 TextView 和一个 RadioButton（没有设置文本）。

Answer 3

使用默认 RadioButton 的更简单解决方案：

<RelativeLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

      <RadioButton
          android:id="@+id/radio7"
          android:layout_centerHorizontal="true"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

      <TextView
          android:id="@+id/tvDays7"
          android:text="7 looong days"
          android:layout_centerHorizontal="true"
          android:layout_below="@id/radio7"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

  </RelativeLayout>

Answer 4

在 XML 文件中：

<!--...-->

<RadioGroup
    android:checkedButton="@+id/radioButton1"
    android:id="@+id/radioGroupBase"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:background="?attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:focusable="true"
        android:id="@+id/linearLayout1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
        
        <RadioButton
            android:clickable="false"
            android:focusable="false"
            android:id="@+id/radioButton1"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_width="match_parent" />
        
        <TextView
            android:clickable="false"
            android:focusable="false"
            android:id="@+id/textView1"
            android:text="@string/textView1_Text"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_width="match_parent" />
        
    </LinearLayout>
    
    <LinearLayout
        android:background="?attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:focusable="true"
        android:id="@+id/linearLayout2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
        
        <RadioButton
            android:clickable="false"
            android:focusable="false"
            android:id="@+id/radioButton2"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_width="match_parent" />
        
        <TextView
            android:clickable="false"
            android:focusable="false"
            android:id="@+id/textView2"
            android:text="@string/textView2_Text"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_width="match_parent" />
        
    </LinearLayout>
    
    <!--more RadioButtons-->

</RadioGroup>

<!--...-->

在onCreate() 过程中为LinearLayouts（不适用于RadioButtons）设置onClick() 侦听器（不要忘记import android.view.View; 和import android.widget.RadioGroup;） ：

//...

findViewById(R.id.linearLayout1).setOnClickListener(new View.OnClickListener()
{
    public void onClick(final View objView)
    {
        ((RadioGroup) findViewById(R.id.radioGroupBase)).check(findViewById(R.id.radioButton1).getId());
    }
});

findViewById(R.id.linearLayout2).setOnClickListener(new View.OnClickListener()
{
    public void onClick(final View objView)
    {
        ((RadioGroup) findViewById(R.id.radioGroupBase)).check(findViewById(R.id.radioButton2).getId());
    }
});

//more SetOnClickListener() calls for more LinearLayouts ("RadioButtons")

//...

剩下的就是在同一个onCreate() 过程中为RadioGroup 设置一个onCheckedChanged() 侦听器：

//...

((RadioGroup) findViewById(R.id.radioGroupBase)).setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()
{
    public void onCheckedChanged(final RadioGroup objRadioGroup, final int nCheckedID)
    {
        if (!objRadioGroup.isShown())
            return;
        
        //do something depending on which RadioButton was checked
    }
});

//...

为RadioGroup 和LinearLayouts 做一个简单的getter 可能是个好主意（后者需要import android.widget.LinearLayout;）：

//...

private RadioGroup Get_radioGroupBase() { return findViewById(R.id.radioGroupBase); }
private LinearLayout Get_linearLayout1() { return findViewById(R.id.linearLayout1); }
private LinearLayout Get_linearLayout2() { return findViewById(R.id.linearLayout2); }
//more getters for more LinearLayouts ("RadioButtons")

//...

Answer 5

目前，可以使用 MaterialRadioButton 轻松调整单选按钮文本的位置。

<com.google.android.material.radiobutton.MaterialRadioButton
    android:id="@+id/rbThemeLight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:drawableTop="@drawable/rb_selector"
    android:drawablePadding="4dp"
    android:gravity="center"
    android:padding="6dp"
    android:text="@string/settings_theme_light" />

这里有几点说明：

1. 使用android:button="@null" 可以禁用默认的可绘制单选按钮。
2. 您使用android:drawableTop 设置了自定义drawable 还有其他可用选项，例如 drawableTop、drawableEnd 等。

对于drawable，你可以使用类似的东西：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_shortAnimTime">

    <item android:state_checked="true">
        <shape android:shape="oval">
            <stroke android:width="5dp" android:color="@color/colorWs" />
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <stroke android:width="1.5dp" android:color="@color/colorClay" />
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>

</selector>

它可以在有或没有 RadioGroup 的情况下工作。