天天看點

FragmentTabHost+TabWidget+FrameLayout布局問題

研究TabHost布局時發現,無論怎麼修改TabWidget與FrameLayout的位置和它們的屬性,都沒法将TabWidget放在底部,包括設定TabWidget屬性

android:layout_alignParentBottom="true"
           
android:tabStripEnabled="false"
           

無奈始終停留在頂部,這是放在頂部的布局檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <!-- android:background="#b2b2b2" -->
        <LinearLayout 
            android:layout_width="match_parent"
    		android:layout_height="match_parent"
   			android:orientation="vertical">
		<TabWidget
		    android:id="@android:id/tabs"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"/>
        <!-- android:background="@layout/shape" -->
	    <FrameLayout
	        android:id="@android:id/tabcontent"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"/>
	    </LinearLayout>
	</android.support.v4.app.FragmentTabHost>
</LinearLayout>
           

裡面再添加LinearLayout布局能勉強保證内容正常顯示,FrameLayout的内容不會與TabWidget重合,不會像這樣

FragmentTabHost+TabWidget+FrameLayout布局問題

有熱心網友提供了兩種方法,将TabWidget放在底部

實作方式一:通過TabWidget實作

這種方式主要是在布局中将TabWidget标簽嵌套在RelativeLayout中,并且在TabWidget标簽中中設定 android:layout_alignParentBottom="true"

另外,下劃線和頁籤之間的線去除的方法時在TabWidget标簽中設定屬性android:tabStripEnabled="false"

布局檔案activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
	    <FrameLayout
	        android:id="@android:id/tabcontent"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"/>
	    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <!-- tabStripEnabled屬性去掉底部下劃線與頁籤間的下劃線 -->
        <!-- layout_alignParentBottom屬性即可将其放在底部菜單欄,注意,必須在RelativeLayout裡 -->
        <TabWidget 
            android:id="@android:id/tabs"
            android:tabStripEnabled="false"
            android:background="#6E6E6E"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            ></TabWidget>
       
    </RelativeLayout>
	</android.support.v4.app.FragmentTabHost>
</LinearLayout>
           

實作的關鍵是将TabWidget放在相對布局中,并設定屬性

android:layout_alignParentBottom="true"
           

界面效果如下:

FragmentTabHost+TabWidget+FrameLayout布局問題

實作方式二:隐藏TabWidget,通過RadioGroup和RadioButton實作底部菜單欄

這種方式更漂亮,網上基本用的是這種方式,通過setCurrentTabByTag來切換不同的頁籤

main.xml

學習完,下一篇文章再介紹。