2012-01-08 62 views
0

我目前正試圖在Android(3.1)上用底部的選項卡實現用戶界面。我知道有幾種方法,但是,因爲我找不到適合我的方法,所以我嘗試使用單選按鈕。這個想法是,每個標籤是一個單選按鈕(目前沒有文本)。具有靈活寬度的Android單選按鈕

佈局應該是這個樣子:

在屏幕的上方還有充當片段來一個容器的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,將周圍線性佈局中的radiogroup設置爲1 se兩個,framelayout佔據整個屏幕。
  2. 當我將framelayout的高度設置爲0以進行調試時,會顯示選項卡。然而,它們並不是均勻分佈在整個寬度上,而是它們彼此重疊,並且被擠壓到左邊。 當我將單選按鈕的寬度設置爲用於非活動選項卡的圖像的寬度(以px爲單位)時,選項卡均勻對齊。但是,當我點擊其中一個選項卡並且選項卡圖像更改爲活動選項卡的圖標時,即使將statelistdrawable中的android:constantSize屬性設置爲false,該按鈕也不會與按鈕的右邊或左邊重疊,但它會將其轉移到右側。

有沒有人得到這些問題的解決方案,特別是使用相對尺寸?這是我在這裏的第一篇文章,如果我的問題是要詳細說明或不夠詳細,我會提前道歉。相信我,我已經嘗試了很多年瞭解決這些問題(例如通過使用絕對尺寸)。任何幫助都會大大降低!

+0

我現在發現了一個(不是很優雅)的解決方案,我的第二個問題。我在選項卡(單選按鈕)和使用​​不同狀態的levelListDrawable的片段之間插入了一個分隔條,這取決於哪個選項卡處於活動狀態。 讓我第一個問題 – Schnodahipfe 2012-01-08 20:14:43

+0

第一個問題的答案請參閱:http://stackoverflow.com/questions/1958388/android-simple-linearlayout-and-fill-parent-question – Schnodahipfe 2012-01-08 21:04:46

回答

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>