Androidstudio使用BottomNavigationView 实现底部导航栏

1. BottomNavigationView介绍

在 Android 开发中,BottomNavigationView 是一个常用的组件,用于实现底部导航栏。它通常与 Fragment 结合使用,以便在用户点击不同的导航项时切换不同的界面

2. 实现步骤

  1. 创建菜单资源文件

res/menu 目录下创建一个 XML 文件,用于定义底部导航栏的菜单项。例如,创建一个名为 user_navigation.xml 的文件:

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

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_baseline_home_24"
        android:title="首页" />



    <item
        android:id="@+id/dynamic"
        android:icon="@drawable/img_dynamic"
        android:title="信息社" />



    <item
        android:id="@+id/found"
        android:icon="@drawable/baseline_view_sidebar_24"
        android:title="失物招领" />



    <item
        android:id="@+id/notify"
        android:icon="@drawable/ic_baseline_notifications_none_24"
        android:title="公告" />




    <item
        android:id="@+id/mine"
        android:icon="@drawable/ic_baseline_manage_accounts_24"
        android:title="我的" />


</menu>

注意事项: res下如果没有menu ,则先新建menu 文件夹

  1. 在布局文件中添加 BottomNavigationView

在你的主布局文件(例如 activity_main.xml)中添加 BottomNavigationView,并引用刚才创建的菜单资源文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:orientation="vertical">


    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/rel" />


    <RelativeLayout
        android:id="@+id/rel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">


        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/user_navigation" />

    </RelativeLayout>




</RelativeLayout>
  1. 在 Activity 中设置 BottomNavigationView

在你的 MainActivity 中,设置 BottomNavigationView 的点击事件,并在用户点击不同的导航项时切换 Fragment


public class UserMainActivity extends MainActivity {
    
    

    //创建4个 Fragment
  private HomeFragment mHomeFragment;
    private PostFragment mPostFragment;
    private FoundFragment mFoundFragment;
    private NotifyFragment mNotifyFragment;
    private MineFragment mMineFragment;
    private BottomNavigationView bottomNavigationView;


   @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


      //初始化控件
      bottomNavigationView = findViewById(R.id.bottomNavigationView)

      //bottomNavigationView tab点击切换
      main_bottom_nv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    
    
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    
    

                if (item.getItemId() == R.id.home) {
    
    
                    selectedFragment(0);
                } else if (item.getItemId() == R.id.dynamic) {
    
    
                    selectedFragment(1);
                } else if (item.getItemId() == R.id.found) {
    
    
                    selectedFragment(2);
                } else if (item.getItemId() == R.id.notify) {
    
    
                    selectedFragment(3);
                } else {
    
    
                    selectedFragment(4);
                }

                return true;
            }
        });


      //默认首页选中
     selectedFragment(0);

    }

    private void selectedFragment(int position) {
    
    
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        hideFragment(fragmentTransaction);
        if (position == 0) {
    
    
            if (mHomeFragment == null) {
    
    
                mHomeFragment = new HomeFragment();
                fragmentTransaction.add(R.id.content, mHomeFragment);
            } else {
    
    
                fragmentTransaction.show(mHomeFragment);
            }

        } else if (position == 1) {
    
    

            if (mPostFragment == null) {
    
    
                mPostFragment = new PostFragment();
                fragmentTransaction.add(R.id.content, mPostFragment);
            } else {
    
    
                fragmentTransaction.show(mPostFragment);
            }
        } else if (position == 2) {
    
    

            if (mFoundFragment == null) {
    
    
                mFoundFragment = new FoundFragment();
                fragmentTransaction.add(R.id.content, mFoundFragment);
            } else {
    
    
                fragmentTransaction.show(mFoundFragment);
            }
        } else if (position == 3) {
    
    

            if (mNotifyFragment == null) {
    
    
                mNotifyFragment = new NotifyFragment();
                fragmentTransaction.add(R.id.content, mNotifyFragment);
            } else {
    
    
                fragmentTransaction.show(mNotifyFragment);
            }
        } else {
    
    
            if (mMineFragment == null) {
    
    
                mMineFragment = new MineFragment();
                fragmentTransaction.add(R.id.content, mMineFragment);
            } else {
    
    
                fragmentTransaction.show(mMineFragment);
            }
        }
        //提交
        fragmentTransaction.commit();

    }

    private void hideFragment(FragmentTransaction fragmentTransaction) {
    
    


        if (mHomeFragment != null) {
    
    
            fragmentTransaction.hide(mHomeFragment);
        }
        if (mNotifyFragment != null) {
    
    
            fragmentTransaction.hide(mNotifyFragment);
        }

        if (mPostFragment != null) {
    
    
            fragmentTransaction.hide(mPostFragment);
        }

        if (mFoundFragment != null) {
    
    
            fragmentTransaction.hide(mFoundFragment);
        }


        if (mMineFragment != null) {
    
    
            fragmentTransaction.hide(mMineFragment);
        }
    }

} 

  1. 创建 Fragment

创建对应的 Fragment 类,例如 HomeFragment、PostFragment、NotifyFragment 和 MineFragment 。每个 Fragment 对应一个导航项。

public class HomeFragment extends Fragment {
    
    

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
    
    
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

温馨提示: 这里就创建了一个HomeFragment页面,其它页面依次创建即可

  1. 运行应用

现在,你可以运行应用并查看底部导航栏的效果。点击不同的导航项时,Fragment 会相应地切换。
请添加图片描述

3. 关于作者其它项目视频教程介绍

  1. Android新闻资讯app实战:https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
  2. Androidstudio开发购物商城实战:https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
  3. Android开发备忘录记事本实战:https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
  4. Androidstudio底部导航栏实现:https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
  5. Android使用TabLayout+ViewPager2实现左右滑动切换:https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8