第三十七篇-BottomNavigationVIew底部导航的使用

效果图：

 添加底部导航和viewpaper

设置底部导航在底部

app:layout_constraintBottom_toBottomOf="parent"

新建四个fragment和四个layout，并将它们和viewpaper联系起来，方法toolbar那一章讲过

viewPager=findViewById(R.id.viewpaper);
fragments= new ArrayList<>();
fragments.add(new fragment1());
fragments.add(new fragment2());
fragments.add(new fragment3());
fragments.add(new fragment4());

MyAdapter adapter=new MyAdapter(getSupportFragmentManager(),fragments);
viewPager.setAdapter(adapter);

此时四个页面之间可以进行切换，现在，需要将底部导航和页面关联起来。

bottomNavigationView=findViewById(R.id.bottom1);
bottomNavigationView.setItemIconTintList(null);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.item1:
                viewPager.setCurrentItem(0);
                break;
            case R.id.item2:
                viewPager.setCurrentItem(1);
                break;
            case R.id.item3:
                viewPager.setCurrentItem(2);
                break;
            case R.id.item4:
                viewPager.setCurrentItem(3);
                break;
            default:
                break;
        }
        return false;
    }
});

现在，当改变底部导航时，页面会相应变化，但是，如果单纯移动页面，导航却不会变化。所以，将页面也和导航关联起来。

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        if(menuItem!=null){
            menuItem.setChecked(false);

        }else{
            menuItem=bottomNavigationView.getMenu().getItem(0);
            menuItem.setChecked(true);
        }
        menuItem=bottomNavigationView.getMenu().getItem(position);
        menuItem.setChecked(true);

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

如果menuItem不为空就设置它为false，然后获取页面当前位置的menuItem并设为true。如果它为空，则设置它为主页面。

附上代码：

MainActivity.java

package com.example.aimee.bottomnavigationviewtest;

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

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    List<Fragment>fragments;
    ViewPager viewPager;
    BottomNavigationView bottomNavigationView;
    MenuItem menuItem;

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

        viewPager=findViewById(R.id.viewpaper);
        fragments= new ArrayList<>();
        fragments.add(new fragment1());
        fragments.add(new fragment2());
        fragments.add(new fragment3());
        fragments.add(new fragment4());

        MyAdapter adapter=new MyAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);
        bottomNavigationView=findViewById(R.id.bottom1);
        bottomNavigationView.setItemIconTintList(null);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item1:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.item2:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.item3:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.item4:
                        viewPager.setCurrentItem(3);
                        break;
                    default:
                        break;
                }
                return false;
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if(menuItem!=null){
                    menuItem.setChecked(false);

                }else{
                    menuItem=bottomNavigationView.getMenu().getItem(0);
                    menuItem.setChecked(true);
                }
                menuItem=bottomNavigationView.getMenu().getItem(position);
                menuItem.setChecked(true);

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private class MyAdapter extends FragmentPagerAdapter{
        List<Fragment>fragments;

        public MyAdapter(FragmentManager fm,List<Fragment>fragments) {
            super(fm);
            this.fragments=fragments;
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

 

main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpaper"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom1"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        app:menu="@menu/menu_main"
        android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>

 

OK。