【说明】

  1、主界面上添加父容器:FragmentTabHost

    属于v4兼容包
    需要指定该id为android:id/tabhost,不能修改,表示由android系统来托管这个id。
    本身是一个FrameLayout的子类

  2、显示内容区域

    作为每选一个导航按钮,将显示导航对应的内容。这个内容区域需要使用一个容器来表示。
    必须设定这个容器的id为android:id/tabcontent

  3、导航区域  

    需要指定导航元素——TabWidget

【注意】

  1、指定id时为android:id/tabhost,绑定时使用android.R.id.tabhost.

  2、每一个Tab对应的Fragment的会填充到tabcontext上

 

【效果】

   

 

 【项目结构】

  

 

【步骤】

  ①修改activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@android:id/tabhost">

    <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="0dp"
            android:layout_weight="1">

        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom">

        </TabWidget>
    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

 

  ②创建main_tab_item.xml底部导航的单个布局

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="match_parent"
 5     android:layout_weight="1"
 6     android:layout_height="wrap_content"
 7     android:orientation="vertical"
 8     android:background="@color/blackBg">
 9 
10     <ImageView
11         android:id="@+id/ivTab"
12         android:layout_width="40dp"
13         android:layout_height="40dp"
14         android:layout_gravity="center"
15         android:padding="5sp"
16         android:scaleType="fitCenter"
17         android:src="@mipmap/ic_launcher"
18         />
19     <TextView
20         android:id="@+id/tvTab"
21         android:layout_width="match_parent"
22         android:layout_height="wrap_content"
23         android:gravity="center"
24         android:textColor="@color/writeTx"
25         android:text="聊天"
26         android:textSize="12sp"/>
27 
28 </LinearLayout>

 

  

版权声明:本文为xqz0618原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/xqz0618/p/tabhost.html