RadioGroup 中 ToggleButton 下方的 TextView

Question

正如标题所说，我需要将 ToggleButton 正下方的文本对齐，该 ToggleButton 在 RadioGroup 下方。

我想要每个圆圈下方的状态文本。我尝试了 RelativeLayout 等的组合，但没有成功。

这是我的布局部分：

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:paddingTop="10dp">

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


            <ToggleButton
                android:id="@+id/toggleOnlineStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:checked="true"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvOnline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/toggleOnlineStatus"
                android:layout_centerHorizontal="true"
                android:text="Away" />

            <ToggleButton
                android:id="@+id/toggleAwayStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvAway"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:text="Away" />

            <ToggleButton
                android:id="@+id/toggleDNDStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvDND"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="DND" />

            <ToggleButton
                android:id="@+id/toggleXAStatus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:background="@drawable/style_toggle_button"
                android:textOff=""
                android:textOn="" />

            <TextView
                android:id="@+id/tvXA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="XA" />


        </RadioGroup>


    </LinearLayout>

Answer 1

您可以考虑使用如下所示的布局，而不是在水平方向的 RadioGroup 中添加 TextView 小部件。

看看这个例子，看看它是否是您要找的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingTop="10dp">


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

        <ToggleButton
            android:id="@+id/toggleOnlineStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:checked="true"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

        <ToggleButton
            android:id="@+id/toggleAwayStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

        <ToggleButton
            android:id="@+id/toggleDNDStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

        <ToggleButton
            android:id="@+id/toggleXAStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@drawable/add"
            android:layout_margin="12dp"
            android:textOff=""
            android:textOn="" />

    </RadioGroup>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tvOnline"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Online" />

        <TextView
            android:id="@+id/tvAway"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Away" />

        <TextView
            android:id="@+id/tvDND"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Away" />

        <TextView
            android:id="@+id/tvXA"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Away" />

    </LinearLayout>

此显示如下。

Answer 2

您可以在 ToggleButton 元素中使用 android:drawableTop 属性：

        <ToggleButton
            android:id="@+id/toggleOnlineStatus"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/style_toggle_button"
            android:checked="true"
            android:textOff="Online"
            android:textOn="Online" />

RadioGroup 中 ToggleButton 下方的 TextView

TextView below ToggleButton inside RadioGroup

android

radio-group

togglebutton

android-layout