BottomNaviagtionView和Viewpage实现底部导航栏

1. 效果：

导航栏.gif

2. 核心思路：

用bottomnavigationview 和 viewpage 实现fragment的切换，从而实现底部导航栏。

3. 代码：

• XML(Activity)

<?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"
    tools:context=".Control.Activity.ChatActivity"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/view_page"
        />
    <android.support.design.widget.BottomNavigationView
        android:background="#e4e4e4"
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu"/>

</LinearLayout>

PS:ViewPage使用layout_weight属性是为了让BottomNavigationView和ViewPage在垂直方向上可以铺满屏幕。

• XML（Menu）

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/chat"
        android:icon="@drawable/ic_chat_black_48dp"
        android:title="@string/menu_chat"
        />

    <item
        android:icon="@drawable/ic_account_box_black_48dp"
        android:id="@+id/account"
        android:title="@string/menu_account"/>

    <item
        android:id="@+id/setting"
        android:icon="@drawable/ic_settings_black_48dp"
        android:title="@string/menu_setting"/>


</menu>

PS:Menu不能设置太多，3-5个是最合适。否则会显示不出来。

• 创建Fragment
• 自定义一个FragmentAdapter并继承FragmentPageAdapter

package com.example.myim.Model.Adapter;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * 作者：LTF on 2019/8/9 15:25
 */
public class FragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentList;
    private Context context;

    public FragmentAdapter(FragmentManager fm, Context context,List<Fragment> fragmentList) {
        super(fm);
        this.context = context;
        this.fragmentList = fragmentList;


    }

    @Override
    public Fragment getItem(int i) {
        return fragmentList.get(i);
    }

    @Override
    public int getCount() {
        return fragmentList.size();
    }
}

PS:继承后的Fragment必须重写 getCount() 和 getItem() 方法，并实现类的构造方法。

• Activity代码

public class ChatActivity extends AppCompatActivity implements ChatFragment.OnFragmentInteractionListener,
        AccountFragment.OnFragmentInteractionListener,SettingFragment.OnFragmentInteractionListener{

    private ViewPager viewPager;
    private BottomNavigationView bottomNavigationView;
    private List<Fragment> fragmentList;


    @Override
    public void onFragmentInteraction(Uri uri) {

    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);
        getSupportActionBar().hide();
        initView();
    }

    private void initView() {
        fragmentList = new ArrayList<>();
        fragmentList.add(new ChatFragment());
        fragmentList.add(new AccountFragment());
        fragmentList.add(new SettingFragment());

        viewPager = findViewById(R.id.view_page);
        bottomNavigationView = findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()){

                    case R.id.chat:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.account:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.setting:
                        viewPager.setCurrentItem(2);
                        break;
                     default:break;

                }




                return false;
            }
        });

        viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),this,fragmentList));
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                bottomNavigationView.getMenu().getItem(i).setChecked(true);

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

    }
}

PS：在新版本的AS中直接创建Fragment的话，Activity需要实现各个Fragment的一个监听方法——onFragmentInteraction，不然会报错。

4. 总结：

• 首先在Activity中创建一个ViewPage和BottomNavigationView，BottomNavigationView需要使用app:menu方法定义底部菜单栏。（BottomNavigationView需要导入包：implementation 'com.android.support:design:28.0.0'）
• 创建Fragment
• 在Activity中实例化BottomNavigationView和ViewPage，并通过new FragmentXXX（）把Fragment添加进一个List<Fragment>集合中。
• 创建FragmentAdapter 并继承FragmentPageAdapter，实现它的构造方法和重写getItem、getCount两个方法。
• 在Activity中让BottomNavigationView实现setOnNavigationItemSelectedListener，并让ViewPage实现addOnPageChangeListener。