Android BottomNavigationView的使用

BottomNavigationView实现的效果就是常见的app底部导航栏的效果。

Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. It should be used when application has three to five top-level destinations.

适用于3到5个tab的情况下。

使用：

implementation "com.google.android.material:material:1.0.0"

布局文件：

现在res文件夹下建立menu文件夹

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_news"
        android:icon="@mipmap/ic_news_gray"
        app:showAsAction="ifRoom"
        android:title="首页" />
    <item
        android:id="@+id/item_lib"
        android:icon="@mipmap/ic_library_gray"
        app:showAsAction="ifRoom"
        android:title="图书" />

    <item
        android:id="@+id/item_find"
        android:icon="@mipmap/ic_discovery_gray"
        app:showAsAction="ifRoom"
        android:title="发现" />

    <item
        android:id="@+id/item_more"
        android:icon="@mipmap/ic_more_gray"
        app:showAsAction="ifRoom"
        android:title="更多" />

</menu>

 

<?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"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@drawable/bottom_navigation_selector"
        app:itemTextColor="@drawable/bottom_navigation_selector"
        app:menu="@menu/menu_bottom_navigation" />

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_above="@id/bottom_navigation"
        android:background="@drawable/bottom_shadow" />

</RelativeLayout>   

app:itemIconTint 为图标选中

app:itemTextColor 为文字选中

app:labelVisibilityMode="labeled"  当图标》3时显示文字

activity代码：

package com.lter.yjbang.ui.activity;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.MenuItem;

import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.lter.yjbang.R;
import com.lter.yjbang.adapter.ViewPagerAdapter;
import com.lter.yjbang.base.BaseActivity;
import com.lter.yjbang.mvp.presenter.MainPresenter;
import com.lter.yjbang.mvp.view.MainView;
import com.lter.yjbang.ui.fragment.MainFragment;
import com.lter.yjbang.utils.BottomNavigationViewHelper;

public class MainActivity extends BaseActivity<MainView, MainPresenter> implements MainView {

    private ViewPager viewPager;
    private MenuItem menuItem;
    private BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    protected int getContentViewResId() {
        return R.layout.activity_main;
    }

    @Override
    protected MainPresenter createPresenter() {
        return new MainPresenter(this);
    }

    @Override
    protected void initView() {
        viewPager =  findViewById(R.id.viewpager);
        bottomNavigationView =  findViewById(R.id.bottom_navigation);
    }

    @Override
    protected void initData(Bundle savedInstanceState) {
        //默认 >3 的选中效果会影响ViewPager的滑动切换时的效果，故利用反射去掉
//        BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.item_news:
                                viewPager.setCurrentItem(0);
                                break;
                            case R.id.item_lib:
                                viewPager.setCurrentItem(1);
                                break;
                            case R.id.item_find:
                                viewPager.setCurrentItem(2);
                                break;
                            case R.id.item_more:
                                viewPager.setCurrentItem(3);
                                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 {
                    bottomNavigationView.getMenu().getItem(0).setChecked(false);
                }
                menuItem = bottomNavigationView.getMenu().getItem(position);
                menuItem.setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        //禁止ViewPager滑动
//        viewPager.setOnTouchListener(new View.OnTouchListener() {
//            @Override
//            public boolean onTouch(View v, MotionEvent event) {
//                return true;
//            }
//        });

        setupViewPager(viewPager);
    }


    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(MainFragment.newInstance("首页"));
        adapter.addFragment(MainFragment.newInstance("图书"));
        adapter.addFragment(MainFragment.newInstance("发现"));
        adapter.addFragment(MainFragment.newInstance("更多"));
        viewPager.setAdapter(adapter);
    }

}
项目地址：https://github.com/sjhandrf/BottomNavigationView-Demo