BottomNavigationView+ViewPager+Fragment仿微信底部導航欄

目標：

要實現的界面如下：

此時，我們需要採用BottomNavigationView+ViewPager+Fragment，一點點的說起。首先要在app/build.gradle裏添加：

implementation 'com.google.android.material:material:1.1.0'

底部導航欄

因爲現在基本上都要往androidx版本轉了。然後，在main.xml裏面添加如下：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/tab_menu"
        app:itemBackground="@color/dividerColor"
        app:labelVisibilityMode="labeled"
        />

app:menu會把新建的menu菜單item自動裝入此navigation。tab_menu菜單如下：

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

    <item
        android:id="@+id/tab_contacts"
        android:icon="@mipmap/tab_contacts_normal"
        android:title="@string/tab_contact" />

    <item
        android:id="@+id/tab_find"
        android:icon="@mipmap/tab_chat_normal"
        android:title="@string/tab_find" />

    <item
        android:id="@+id/tab_me"
        android:icon="@mipmap/tab_me_normal"
        android:title="@string/tab_me" />
</menu>

至於背景顏色、圖片icon、string字符串，自己添加就行了。這裏需要注意，有時候，BottomNavigationView裏面添加的item大於3個，會出現“未鋪滿”的假象，實際上就是加載多了，需要在xml裏面加入（具體的mode選項請自行百度，這裏只提供思路）：

app:labelVisibilityMode="labeled"

中間頁面：

直接看xml結構還清晰點。

那麼viewPager容器放好了，還要新建四個對應的fragment放裏面，這樣才能根據導航欄切換。

public class ChatFragment extends Fragment {

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_chat, container, false);
    }
}

起演示效果，這裏每個fragment只加載xml文件：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.ChatFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/hello_chat_fragment" />

</LinearLayout>

每個xml文件也只有一個textView顯示內容作爲區別。

此時，需要新建一個adpter適配器，這種情況在Android開發裏很多，適配器模式目的就是爲了把一個目標適配成另外一個目標。

public class MainFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragmentList;

    public MainFragmentAdapter(@NonNull FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.mFragmentList = fragments;
    }

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

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

這裏，SDK同樣爲我們準備了兩個adpter，fragmentPagerAdapter和FragmentPagerStateAdapter，這兩個的區別就是：pageStateAdapter每次滑動過後會將前一個或者後一個fragment銷燬，即destroyView和OnDetach等得到執行，目的就是爲了釋放資源。因此，當加入viewpager的fragment過多時，考慮用後一種adpter，當然，一般不會有人超過四個。

回到MainActivity裏面：

 private void  initMainData(){
        mMainFragmentList = new ArrayList<>(4);
        mMainFragmentList.add(new ChatFragment());
        mMainFragmentList.add(new ContactFragment());
        mMainFragmentList.add(new FindFragment());
        mMainFragmentList.add(new MeFragment());

        //viewpager初始化
        MainFragmentAdapter mainFragmentAdapter = new MainFragmentAdapter(getSupportFragmentManager(), mMainFragmentList);
        mViewPager.setAdapter(mainFragmentAdapter);

        //viewpager滑動點擊等監聽
        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int menuId = item.getItemId();
                // 跳轉指定頁面：Fragment
                switch (menuId) {
                    case R.id.tab_chat:
                        mViewPager.setCurrentItem(0);
                        break;
                    case R.id.tab_contacts:
                        mViewPager.setCurrentItem(1);
                        break;
                    case R.id.tab_find:
                        mViewPager.setCurrentItem(2);
                        break;
                    case R.id.tab_me:
                        mViewPager.setCurrentItem(3);
                        break;
                }

                return false;
            }
        });

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

            }

            @Override
            public void onPageSelected(int position) {
                //滑動到某頁面讓底部導航欄爲選中狀態
                mBottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

首先新建一個ArrayList把要滑動的fragment裝進去，再適配，添加listerner。即可。放一個完整的圖：

---

此專欄上一篇文章：Material Design之ActionBar、ToolBar

github代碼：我的github