android BottomNavigationView(底部导航栏)

BottomNavigationView 很早之前就在 Material Design 中出现了，但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件。

添加依赖

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

在 res/menu/ 目录下创建一个 xml 文件（没有该目录则手动创建一个），我将其命名为 navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/one"
        android:icon="@mipmap/foot_ask_image"
        android:title="call" />
    <item
        android:id="@+id/two"
        android:icon="@mipmap/foot_ask_image_action"
        android:title="message" />
    <item
        android:id="@+id/three"
        android:icon="@mipmap/foot_look_live"
        android:title="setting" />
    <item
        android:id="@+id/me"
        android:icon="@mipmap/foot_look_live"
        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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_above="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
    <TextView
        android:id="@+id/text"
        android:layout_above="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/darker_gray"/>
    <!--itemIconTint 图标颜色 选中和未选中 
    menu  是刚才写的navigation-->
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@android:color/white"
        app:itemIconTint="@color/button_text"
        app:itemTextColor="@color/button_text"
        app:menu="@menu/navigation" />
</RelativeLayout>

里面itemTextColor使用的是ColorStateList着色

---

注意

底部导航栏高度默认是 56dp。

菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。

如果大于3个则会变得很丑

---

具体案例:BottomNavigationView+ViewPager

ViewPager

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

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

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

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
    }

}

Fragment

public class LocationFragment extends Fragment {

    private View mView;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        mView=inflater.inflate(R.layout.fragmet_one,container,false);
        TextView textView= (TextView) mView.findViewById(R.id.text);
        textView.setText("第一个");
        return mView;
    }
}

Activity

public class BottomActivitys extends AppCompatActivity{

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

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

        setContentView(R.layout.bottoms);
        bottomNavigationView= (BottomNavigationView) findViewById(R.id.navigation);
        viewPager= (ViewPager) findViewById(R.id.viewpager);
        /**
         * 切换
         */
        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()){
                            case R.id.one:
                                viewPager.setCurrentItem(0);
                                break;
                            case R.id.two:
                                viewPager.setCurrentItem(1);
                                break;
                            case R.id.three:
                                viewPager.setCurrentItem(2);
                                break;
                            case R.id.me:

                                viewPager.setCurrentItem(3);
                                break;

                        }
                        return false;
                    }
                });

        /**
         * viewpager滑动切换
         */
        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.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(new LocationFragment());
        adapter.addFragment(new TwoFragment());
        adapter.addFragment(new ThreeFragment());
        adapter.addFragment(new LocationFragment());
        viewPager.setAdapter(adapter);
    }
}

运行如下：

---

具体请看Demo中的BottomActivitys