1. 程式人生 > >第三十七篇-BottomNavigationVIew底部導航的使用

第三十七篇-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();
        }
    }
}
View Code

 

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>
View Code

 

OK。