BottomNavigationView 實現

本文采用最新控件BottomNavigationView +viewpager +fragment來實現類似於淘寶的低欄效果，先上效果圖

要實現實現這個效果首先有兩個要求，在app的build.gradle裏

compileSdkVersion 25 ／／編譯SDK必須是25

compile 'com.android.support:design:25.0.0'／／design包必須是25以上的版本

有了這兩個以後，我們就能夠直接在layout佈局裏使用這個控件了                                     

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.wenxi.bottomnavigationview2.MainActivity">

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        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/main">
    </android.support.design.widget.BottomNavigationView>
    <!--陰影-->
    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_above="@id/bottomNavigationView"
        android:background="@drawable/shadow"/>
</RelativeLayout>

介紹一下BottomNavigationView的三個重要屬性：

app:itemBackground:設置item的背景，對應setItemBackgroundResource(int resId)方法app:itemIconTintUsed:設置icon的顏色，對應setItemIconTintList(ColorStateList tint)方法app:itemTextColor:設置文字的顏色，對應setIteTextColor(ColorStateList textColor)方法

在java代碼中初始化viewpager

viewPager = (ViewPager) findViewById(R.id.viewpager);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

        adapter.addFragment(MainFragment.newInstance("撥號"));
        adapter.addFragment(MainFragment.newInstance("信息"));
        adapter.addFragment(MainFragment.newInstance("搜索"));
        viewPager.setAdapter(adapter);

        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) {

            }
        });
    }

最後再設置BottomNavigationView 的點擊事件監聽就可以

 bottomNavigationView=(BottomNavigationView) findViewById(R.id.bottomNavigationView);
        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_search:{
                        viewPager.setCurrentItem(2);
                        break;
                    }
                }
                return false;
            }
        });

本文源代碼下載地址