【Android基础篇】TabHost实现底部导航栏

在App应用中，导航栏往往是用于解决功能分块的最佳控件，而底部导航栏更是导航栏中最常用的，因为它位于屏幕底部，用户操作起来会很方便。

下面介绍一下使用Android控件TabHost实现底部导航栏的方法。

TabHost可以在控件库里直接拖到页面上，非常方便，但拖出来的是顶部导航栏，如下图所示：



到这里就可以开始实现底部导航栏了，我们首先转到它的XML布局代码里，然后修改成下面这样：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tabhosttest.MainActivity"
    tools:ignore="MergeRootFrame" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

           <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >

                </LinearLayout>
            </FrameLayout>

           <TabWidget
               android:id="@android:id/tabs"
               android:layout_width="match_parent"
               android:layout_height="wrap_content" >
           </TabWidget>

        </LinearLayout>
    </TabHost>

</FrameLayout>

修改的地方就是把TabWinget放到了FrameLayout下面。我们可以看一下Layout的界面层次，这是更改前的：




最外面的是界面的总FrameLayout，然后里面包含了一个TabHost，而这个TabHost里面有一个线性垂直布局LinearLayout，里面布局了两个部分的东西，一个是显示界面tabcontent，一个按钮控件tabs，现在是顶部导航栏，因为tabs在tabcontent上面，所以当我们要实现底部导航栏的时候，只需要把tabs改成在tabcontent的下面即可，改完后的层次图：




此时虽然在层次图上我们可以看到tabs在tabcontent下面，但远远没有大功告成，因为现在整个界面已经变成白色了，没有任何控件显示出来。原因出现tabcontent是一个FrameLayout，而这个Layout此时的height是match_parent，也就是说它一个就把整个页面全占了。所以下面我们要解决的就是tabcontent和tabs的比例显示问题。

我使用的方法是通过调整tabcontent和tabs的Weight（权重），我将tabcontent的weight调整为0.8，tabs不变，此时tabs就可以显示出来了（比例可更改），效果如图：



关于Weight这个属性，大家可以看看下面这两句话，如果需要更详细的的说明，可以去看看原文，后面附录了地址：

在layout_width設置為fill_parent的時候，layout_weight所代表的是你的控件要優先盡可能的大,但這個大是有限度的，即fill_parent.

在layout_width設置為wrap_content的時候，layout_weight所代表的是你的控件要優先盡可能的小,但這個小是有限度的，即wrap_content.

layout_height 同 layout_width.

原文地址