Android收音机按钮,宽度灵活

时间:2012-01-08 17:19:39

标签: android layout user-interface tabs

我目前正在尝试在android(3.1)上使用底部的标签实现用户界面。我知道有几种方法,因为我找不到适合我的方法,我试图使用单选按钮。这个想法是,每个标签都是一个单选按钮(目前没有文字)。

布局应该如下所示:

在屏幕的顶部有一个framelayout,作为片段的容器。

在该容器下方有一个水平无线电组,每个单选按钮用作一个标签。活动选项卡(单选按钮)应该与上部的其他选项卡重叠,因此可以清楚显示哪个选项卡处于活动状态。为了使单选按钮像标签一样,我将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,并且在这两个周围的linearlayout中将radiogroup的一个设置为1,framelayout也会占据整个屏幕。
  2. 当我将framelayout的高度设置为0以进行调试时,会显示选项卡。然而,它们在宽度上不是均匀分布的,而是彼此重叠并且向左挤压。 当我将radiobuttons的宽度设置为用于非活动标签的图像的宽度(以px为单位)时,标签将均匀对齐。但是,当我单击其中一个选项卡并且选项卡图像更改为活动选项卡的选项卡时,即使我将statelistdrawable中的android:constantSize属性设置为false,该按钮也不会向右或向左重叠按钮。 ,但它将它转移到右边。
  3. 有没有人为这些问题找到解决方案,特别是使用相对尺寸?这是我在这里的第一篇文章,如果我的问题要详细说明或者不够详细,我会提前道歉。相信我,我已经尝试了很多年来解决这些问题(例如通过使用绝对尺寸)。任何帮助都会有很大帮助!

1 个答案:

答案 0 :(得分:0)

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

2.。)如果您的drawable具有定义的设备相关宽度,则将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>