底部导航栏-----FragmentTabHost
【说明】
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 版权协议,转载请附上原文出处链接和本声明。