2017-08-19 58 views
0

正如標題所說,我需要對齊ToggleButton以下的文本,這些文本位於RadioGroup之下。TextView下面RadioGroup裏面的ToggleButton

Current Display

我希望每個圓圈下面的狀態文本。我嘗試使用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> 

回答

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> 

該顯示如下。 enter image description here

+0

是第一個內部的第二'LinearLayout'?如果是,則在右側顯示「TextView」。 –

+0

檢查你的父母的線性佈局,我改變了方向爲垂直而不是水平,你使用 – Inducesmile

+0

真棒。這樣可行。不得不做一些填充以將文本與按鈕對齊。謝謝! –

0

可以在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" /> 
+0

這也沒有解決。 –