3分鐘教你實現仿微信底部導航欄效果（BottomNavigationView + ViewPager）

實現效果圖

前言

微信相信每個人都用，不得不說微信界面的整潔度、體驗感還是挺好的，那麼微信底部的導航是怎樣實現的呢？怎樣做成點擊底部導航欄可以進行頁面切換、左右劃也可以實現同樣的效果呢？今天就帶大家來仿製一個，高仿喲！

XML佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="wrap_content"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bn_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

menu文件

這裏我們需要先在 res 目錄下新建一個 menu 文件夾來放 menu 文件

然後我們需要新建一個 menu 文件，icon代表底部導航的圖標、title代表底部導航的文字

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/first"
        android:icon="@mipmap/img_left"
        android:title="第一個" />
    <item
        android:id="@+id/second"
        android:icon="@mipmap/img_up"
        android:title="第二個" />
    <item
        android:id="@+id/third"
        android:icon="@mipmap/img_down"
        android:title="第三個" />

</menu>

menu文件寫好了以後，記得把他加到XML控件上去：menu

<com.google.android.material.bottomnavigation.BottomNavigationView
        app:menu="@menu/bn_view"
        android:id="@+id/bn_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

如圖所示，這就是加上menu後的效果，這裏需要注意的是，你加的icon會自動變成這種只有外觀輪廓的樣子

ViewPager的使用

想要實現ViewPager，你得現有一個Adapter適配器，這邊getItem()方法你需要返回你當前List中和當前position對應的元素（也就是Fragment頁面），getCount()就比較簡單了，直接返回List的大小就行了。

PagerAdapter（Java）

public class PagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> mList;

    public PagerAdapter(@NonNull FragmentManager fm, List<Fragment> list) {
        super(fm);
        mList = list;
    }

    public PagerAdapter(@NonNull FragmentManager fm, int behavior, List<Fragment> list) {
        super(fm, behavior);
        mList = list;
    }

    public PagerAdapter(@NonNull FragmentManager fm) {
        super(fm);
    }

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

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

Activity中實現

只需要在List中隨便加入幾個Fragment，然後實例化剛剛寫的PagerAdapter，最後ViewPager調用 .setAdapter() 方法傳入PagerAdapter即可實現一個可以左右側滑切換界面的效果

注意：你傳入多少個Fragment取決於你menu的數量

List<Fragment> list = new ArrayList<>();
        // 隨便加了三個有內容的Fragment
        list.add(new FragmentTabFrag1());
        list.add(new FragmentEventBus());
        list.add(new FragmentEventBus2());

PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager(), list);

mViewpager.setAdapter(adapter);

做完這些，你會發現，上面可以切換界面的做好了，下面的導航也實現了，可是它兩卻互不相關，你點你的，我滑我的。。。那麼接下來就來讓它兩“心連心”。

上下聯動

側滑帶動按鈕選擇

先實現一下，我ViewPager側滑，可以改變BottomNavigationView的當前選項

只需給你的ViewPager加上一個PageChangeListener（頁面改變監聽器），然後在頁面改變以後，BottomNavigationView調用.setSelectedItemId()方法，手動對當前選項作出對應的改變，就實現了！

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

    }

    @Override
    public void onPageSelected(int position) {
        switch (position) {
            case 0:
                mBnView.setSelectedItemId(R.id.first);
                break;
            case 1:
                mBnView.setSelectedItemId(R.id.second);
                break;
            case 2:
                mBnView.setSelectedItemId(R.id.third);
                break;
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

點擊底部按鈕帶動頁面

頁面側滑帶動按鈕實現了，就剩下按鈕帶動頁面了

這裏也是非常的簡單，只需要給BottomNavigationView加上一個ItemSelectedListener（子項選擇監聽器），然後根據子項的改變，然後ViewPager調用.setCurrentItem()方法對當前顯示的頁面進行更改；點擊按鈕以後，頁面跟着動的效果也就實現了。

mBnView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()) {
            case R.id.first:
                mViewpager.setCurrentItem(0);
                break;
            case R.id.second:
                mViewpager.setCurrentItem(1);
                break;
            case R.id.third:
                mViewpager.setCurrentItem(2);
                break;
        }
        return true;
    }
});

做到這裏，效果圖中的功能就實現了，只不過顏色可能不是那麼令人喜歡，作爲一個完美主義，怎能容忍？改顏色！改它！

自定義選中&未選中顏色

color文件

在res目錄下創建color文件夾，沒辦法，它就是這麼刁鑽，用這個控件創建了2個文件夾

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZOvHJb42-1589884552962)(E:\ASYU\Desktop\color創建.png)]

創建color文件

我這裏用了紅綠兩種顏色，紅色是未選中時的顏色，綠色是選中時的顏色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorRed" android:state_checked="false" />
    <item android:color="@color/colorGreen" android:state_checked="true" />

</selector>

然後自然是在XML中加上屬性：itemIconTint

<com.google.android.material.bottomnavigation.BottomNavigationView
        app:itemIconTint="@color/bn_view"
        app:menu="@menu/bn_view"
        android:id="@+id/bn_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

結語

我想着有個前言，沒個結語好像不太協調。。。

來都來了，點個贊再走唄~