先上圖

預(yù)覽效果

1.創(chuàng)建一個(gè)android studio工程并依賴最新的Design Support Library(25) 在app的build.gradle中：

compile 'com.android.support:design:25.0.0'

接下來就可以使用BottomNavigationView控件了绩社。

2.為MainActivity創(chuàng)建如下布局：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xuejinwei.bottomnavigationview.MainActivity">

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/bottom_navigation_color_selector"
        app:itemTextColor="@drawable/bottom_navigation_color_selector"
        app:menu="@menu/menu_bottom_navigation"/>

    <!--陰影-->
    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_above="@id/bottom_navigation"
        android:background="@drawable/shadow"/>
</RelativeLayout>

• app:itemBackground:設(shè)置item的背景裹匙，對應(yīng)setItemBackgroundResource(int resId)方法
• app:itemIconTintUsed:設(shè)置icon的顏色熬苍，對應(yīng)setItemIconTintList(ColorStateList tint)方法
• app:itemTextColor:設(shè)置文字的顏色败富，對應(yīng)setIteTextColor(ColorStateList textColor)方法

3.創(chuàng)建Fragment和ViewPagerAdapter為ViewPager服務(wù)撼嗓，代碼略去。

4.為ViewPager設(shè)置adapter 监婶，添加fragment：

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

    adapter.addFragment(DemoFragment.newInstance("撥號(hào)"));
    adapter.addFragment(DemoFragment.newInstance("信息"));
    adapter.addFragment(DemoFragment.newInstance("我的"));
    viewPager.setAdapter(adapter);
}

5.為BottomNavigationView添加OnNavigationItemSelectedListener屉佳，復(fù)寫OnNavigationItemSelected方法，這里通過item的id判斷選擇不同的時(shí)候ViewPagerAdapter選中的位置斜姥。

bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.item_call:
                            viewPager.setCurrentItem(0);
                            break;
                        case R.id.item_mail:
                            viewPager.setCurrentItem(1);
                            break;
                        case R.id.item_person:
                            viewPager.setCurrentItem(2);
                            break;
                    }
                    return false;
                }
            });

6.為ViewPagerAdapter設(shè)置OnPageChangeListener鸿竖，本文重要代碼在此，當(dāng)ViewPagerAdapter滑動(dòng)fragment的時(shí)候BottomNavigationView的選中狀態(tài)也跟著變化

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

        }

        @Override
        public void onPageSelected(int position) {
            if (prevMenuItem != null) {
                prevMenuItem.setChecked(false);
            } else {
                bottomNavigationView.getMenu().getItem(0).setChecked(false);
            }
            bottomNavigationView.getMenu().getItem(position).setChecked(true);
            prevMenuItem = bottomNavigationView.getMenu().getItem(position);

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

github BottomNavigationViewDemo