BottomNavigationView+Fragment实现底部导航栏(包含源码)

这篇文章主要介绍通过Fragement + BottomNavigationView实现Android应用底部的导航栏，效果如下图

关于fragment使用的详细介绍，大家可以点击这里 。

下面进入正文，

1. 首先在Android视图下，打开Gradle Scripts 下的build gradle(Module:app),添加如下依赖,注意后面的版本号要与你项目中已有的依赖版本一致，这里是28.0.0。

    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:support-vector-drawable:28.0.0'
   

2. 在res下新建一个文件夹，命名为menu（如果有就不用新建了），在menu文件夹下新建一个菜单文件用于底部导航栏显示的内容，这里命名为navigation.xml，代码如下，其中icon属性表示的是显示的图标，大家可以自行设置图标路径

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_page"
        android:icon="@drawable/show"
        android:title="首页" />

    <item
        android:id="@+id/setting"
        android:icon="@drawable/setting"
        android:title="设置" />

    <item
        android:id="@+id/mycenter"
        android:icon="@drawable/footer_btn_mycenter_preesed"
        android:title="个人中心" />
</menu>

3. 新建一个布局文件，用于对设置整体页面布局，命名为start_for_fragment.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".startForFramment">

    <LinearLayout
        android:id="@+id/lin_lay_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"></LinearLayout>


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bnv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="7"
        app:elevation="0dp"
        app:menu="@menu/navigation1">

    </android.support.design.widget.BottomNavigationView>
</LinearLayout>

在布局中包含LinearLayout，和BottomNavigationView，这个id为lin_lay_fragment的LinearLayout就是用来进行占位的，随后我们动态加载的fragment所占的布局即为这个LinearLayout所占空间；而BottomNavigationView就是底部导航栏，这里设置了其显示的内容为第二步新建的菜单文件。

4. 新建三个布局文件，用于当点击底部导航栏时分别进行显示的三个页面，这里命名为fragment1.xml,fragment2.xml,fragment3.xml,代码随便写一下，如下

   fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是Fragment1"
        android:textSize="30sp"/>

</android.support.constraint.ConstraintLayout>

fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是Fragment2"
        android:textSize="30sp" />

</android.support.constraint.ConstraintLayout>

fragment3.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是Fragment3"
        android:textSize="30sp"/>

</android.support.constraint.ConstraintLayout>

5. 新建三个类继承自Fragment，并分别对这三个布局文件进行加载，这里命名为Fragment1.java, Fragment2.java, Fragment3.java,这里贴出Fragment1.java的代码，其他类似，代码如下，

package mystudy.kjpc.fragement;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment1,container,false);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        
    }
}

6. 新建一个Acticity继承自AppCompatActivity,其用途是用于连接相互切换的多个fragment，这里命名为StartForFActivity.java,在其中添加如下代码

package mystudy.kjpc.fragement;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

public class StartForFActivity extends AppCompatActivity {
    
    private BottomNavigationView bottomNavigationView;
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;
    private Fragment[] fragments;
    private int lastFragment;//用于记录上个选择的Fragment
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.start_for_framment);
        //权限检查和申请
        initFragment();
    }
    
    //初始化fragment和fragment数组
    private void initFragment()
    {

        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragments = new Fragment[]{fragment1,fragment2,fragment3};
        lastFragment = 0;
        getSupportFragmentManager().beginTransaction().replace(R.id.lin_lay_fragment,fragment1).show(fragment1).commit();
        bottomNavigationView = findViewById(R.id.bnv);

        bottomNavigationView.setOnNavigationItemSelectedListener(changeFragment);
    }
    //判断选择的菜单
    private BottomNavigationView.OnNavigationItemSelectedListener changeFragment= new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            switch (item.getItemId())
            {
                case R.id.home_page:
                {
                    if(lastFragment!=0)
                    {
                        switchFragment(lastFragment,0);
                        lastFragment=0;
                    }
                    return true;
                }
                case R.id.setting:
                {
                    if(lastFragment!=1)
                    {
                        switchFragment(lastFragment,1);
                        lastFragment=1;

                    }

                    return true;
                }
                case R.id.mycenter:
                {
                    if(lastFragment!=2)
                    {
                        switchFragment(lastFragment,2);
                        lastFragment=2;

                    }

                    return true;
                }


            }


            return false;
        }
    };


    //切换Fragment
    private void switchFragment(int lastfragment,int index)
    {
        FragmentTransaction transaction =getSupportFragmentManager().beginTransaction();
        transaction.hide(fragments[lastfragment]);//隐藏上个Fragment
        if(fragments[index].isAdded()==false)
        {
            transaction.add(R.id.lin_lay_fragment,fragments[index]);


        }
        transaction.show(fragments[index]).commitAllowingStateLoss();


    }
    
}

7. 最后在MainActivity中添加一个按钮跳转至StartForFActivity即可，注意要在manifest.xml中对StartForFActivity进行注册，最终运行效果如下：
   
   源程序链接这里给大家放上demo链接