具有灵活宽度的 Android 单选按钮

Question

我目前正在尝试在 android (3.1) 上实现一个底部有标签的用户界面。我知道有几种方法，但是，由于找不到适合我的方法，我正在尝试使用单选按钮。这个想法是，每个选项卡都是一个单选按钮（当前没有文本）。

布局应该是这样的：

在屏幕的顶部有一个框架布局，它充当了即将到来的片段的容器。

在该容器下面有一个水平无线电组，每个单选按钮用作标签。活动选项卡（单选按钮）应该与上部的其他选项卡重叠，因此很清楚哪个选项卡处于活动状态。为了使单选按钮像选项卡一样，我将 android:button 属性设置为 statelistdrawable。 statelistdrawable 包含活动和非活动状态的两个图像（不幸的是，我还不允许发布图像）。 由于活动选项卡的图像比非活动选项卡的图像更大（宽度），我的想法是使用 onClickListener 中的 bringToFront() 方法，以便活动选项卡（或单选按钮）与左侧的选项卡重叠并且它的权利。

我的布局文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<!-- container for the fragments -->
<FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffffff"
        android:layout_weight="0" />


<!-- container for the tabs realized with radio buttons -->
<RadioGroup
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom"
  android:orientation="horizontal"
  android:layout_weight="1" >

  <!-- tabs -->
  <RadioButton android:id="@+id/tab_1"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:button="@drawable/tab_button"
      android:text="" />
  <RadioButton android:id="@+id/tab_2"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:button="@drawable/tab_button"
      android:text="" />
  <RadioButton android:id="@+id/tab_3"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:button="@drawable/tab_button"
      android:text="" />
  <RadioButton android:id="@+id/tab_4"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:button="@drawable/tab_button"
      android:text="" />
  <RadioButton android:id="@+id/tab_5"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:button="@drawable/tab_button"
      android:text="" />
</RadioGroup>
</LinearLayout>

statelistdrawable xml 文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" 
android:constantSize="false">
<item
 android:state_checked="false"
 android:drawable="@drawable/tab_inactive" />
<item
 android:state_checked="true"
 android:drawable="@drawable/tab_active" />
</selector>

不幸的是我遇到了两个问题：

1. 即使我将 framelayout 的 layout_weight 设置为 0，将 radiogroup 中的一个设置为 1，在围绕这两者的线性布局中，framelayout 仍会占据整个屏幕。
2. 当我将框架布局的高度设置为 0 以进行调试时，会显示选项卡。但是，它们在宽度上分布不均匀，而是相互重叠并且有点向左挤压。 当我将单选按钮的宽度设置为用于非活动选项卡的图像的宽度（以 px 为单位）时，选项卡会均匀对齐。但是，当我单击其中一个选项卡并且选项卡图像更改为活动选项卡的选项卡时，即使我将 statelistdrawable 中的 android:constantSize 属性设置为 false，该按钮也不会将按钮重叠到它的右侧或左侧，但它会向右移动。

有没有人为这些问题找到解决方案，尤其是在使用相对维度时？这是我在这里的第一篇文章，如果我的问题是详细说明或不够详细，我提前道歉。相信我，我已经尝试了很长时间来解决这些问题（例如通过使用绝对尺寸）。任何帮助将不胜感激！

Answer 1

1.) 使用 FrameLayout 作为包装布局。它将 RadioGroup 放在子 FrameLayout 的顶部。从子 FrameLayout 和 RadioGroup 中移除 layout_weight 属性。

2.) 居中 RadioGroup 并在其上使用 wrap_content 以及按钮（evt. 带有一些填充），如果您的可绘制对象具有定义的设备相关宽度。或者在所有按钮上使用 layout_weight 1。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<!-- container for the fragments -->
<FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffffff" />


<!-- container for the tabs realized with radio buttons -->
<RadioGroup
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom|center"
  android:orientation="horizontal" >

  <!-- tabs -->
  <RadioButton android:id="@+id/tab_1"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:button="@drawable/tab_button"
      android:text="" />
  <RadioButton android:id="@+id/tab_2"
      android:state_checked="false"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:button="@drawable/tab_button"
      android:text="" />
</RadioGroup>

</FrameLayout>