Android 底部导航栏的两种实现（附源码）（通过FragmentTabHost + Fragment实现）

本文链接：https://blog.youkuaiyun.com/qq941263013/article/details/81136064

本文介绍了使用FragmentTabHost和Fragment在Android中实现底部导航栏的两种方式，包括纯小图+文字组合和带图片的底部导航栏。通过创建图片选择器、文字选择器、FragmentTabHost的枚举Tab以及初始化FragmentTabHost来实现。文章提供源码下载链接和GitHub项目地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android底部导航栏是非常常见的功能，UI设计大致分为两种：第一种纯小图+文字组合；第二种除了小图+文字组合外，还将中间设置大图。两种方式都有很多APP使用，并无优劣，根据需求选用即可。在这里我用我最熟悉的FragmentTabHost+Fragment实现上述功能。

注：文章末尾附项目源码下载链接。

效果展示

主要功能包括：FragmentTabHost的使用、图片选择器、文字选择器、沉浸式状态栏、带图片的底部导航栏等。

第一种纯小图+文字组合实现

页面布局

以下是Activity的布局文件，主要通过FragmentTabHost+FrameLayout实现底部导航栏，用View当做分割线，区分主体和底部导航栏。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.4dp"
        android:background="#99cccccc"
        android:visibility="visible" />

    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tabHost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingTop="2dp"
        android:visibility="visible" />
</LinearLayout>

创建多个图片选择器

在res的drawable文件夹下，创建与模块数量相同的图片选择器，使用户可以通过底部导航栏来区分，模块的选中和未选中状态。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@mipmap/tab_home_selected"/>
    <item android:state_pressed="true" android:drawable="@mipmap/tab_home_selected"/>
    <item android:state_checked="true" android:drawable="@mipmap/tab_home_selected"/>
    <item android:drawable="@mipmap/tab_home"/>
</selector>

创建一个文字选择器

在res的color文件夹（自行创建）下，创建一个文字选择器，用于底部导航栏的字体变色，一般创建一个即可。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/