使用 Fragment 实现底部导航

最新推荐文章于 2023-07-01 08:15:00 发布

原创

最新推荐文章于 2023-07-01 08:15:00 发布 · 855 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android

本文介绍了在 Android 应用中使用 Fragment 实现底部导航栏的方法。通过在 MainActivity 中设置 FrameLayout 作为内容区域，点击底部导航栏时动态替换 Fragment 实现页面切换，以此达到简化应用层级、提升用户体验的效果。

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

在 Android 应用中使用底部导航栏的方式相信大家都已经十分熟悉了，包括微信、手机QQ、大众点评等大家耳熟能详的 app 都都使用这种形式。底部导航栏能有效的突出重点、热点功能，减少应用的层级结构，令使用者一目了然，这里介绍一下使用 Fragment 来实现底部导航栏的方式。

首先定义主活动 MainActivity 作为容器，底部导航栏即在 MainActivity 活动的下方。 MainActivity中间为 FrameLayout，所有底部导航栏对应的子页面即依附在此 FrameLayout 内。当点击下方导航时，FrameLayout 中的内容就自动切换到子页面对应的 Fragment，实现了导航的过程。

首先看看 MainActivity 内相关的内容：

public class MainActivity extends Activity  {
    private FragmentManager fragmentManager;

    private HomeFragment homeFragment；
    private WorkFragment workFragment;
    private WarnFragment warnFragment;
    private SettingFragment settingFragment;

    private View homeTab;
    private View workTab;
    private View warnTab;
    private View settingTab;

    private ImageView homeImage;
    private ImageView workImage;
    private ImageView warnImage;
    private ImageView settingImage;

    private TextView homeText;
    private TextView workText;
    private TextView warnText;
    private TextView settingText;
     ...
}

以上是相关的元素的定义，接下来看一下相关的界面配置：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/tab_bg">

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <ImageView
                    android:id="@+id/home_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:bac