Material Design之底部导航栏

1.首先加入依赖包：

compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.2'

2.新建activity_main.xml主布局，用于放置整个Fragment

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frame_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

3.新建一个布局mycontentfragment_body.xml用于显示在上面的主布局的FrameLayout中，在里面已经加入了BottomNagigationBar：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/myfragment_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/headerinfo_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorPrimary"
            android:textSize="18sp"
            android:textStyle="bold|italic"/>

        <TextView
            android:id="@+id/bodyinfo_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="25sp"
            android:textColor="@color/colorAccent"/>
    </FrameLayout>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        ></com.ashokvarma.bottomnavigation.BottomNavigationBar>


</RelativeLayout>

4.新建MyContentFragment.java用于显示整个布局：

public class MyContentFragment extends Fragment implements BottomNavigationBar.OnTabSelectedListener {//实现BottomNavigationBar.OnTabSelectedListener


    private BottomNavigationBar mBottomNavigationBar;//底部导航栏
    private HomeFragment mHomeFragment;//点击主页时的Fragment
    private LocationFragment mLocationFragment;//点击位置时的Fragment
    private LikeFragment mLikeFragment;//点击喜好时的Fragment
    private PersonFragment mPersonFragment;//点击关于自我时的Fragment
    private TextView mTextView;

    public static MyContentFragment newInstance(String s) {
        MyContentFragment navigationFragment = new MyContentFragment();
        Bundle bundle = new Bundle();
        bundle.putString("args", s);
        navigationFragment.setArguments(bundle);
        return navigationFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.mycontentfragment_body, container, false);//把R.layout.mycontentfragment_layout
        // 放到container中并返回这个View，这样R.layout.mycontentfragment_layout和R.id.frame_content合为一个了重合在一起
        // 因为为frame，为帧，所以重叠
        mTextView = (TextView) view.findViewById(R.id.headerinfo_textview);
        Bundle bundle = getArguments();
        if (bundle != null) {
            String s = bundle.getString("args");
            if (!TextUtils.isEmpty(s)) {
                mTextView.setText(s);
            }
        }
        mBottomNavigationBar = (BottomNavigationBar) view.findViewById(R.id.bottom_navigation_bar);
        mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);/*
            包含3种Style:BACKGROUND_STYLE_DEFAULT：如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
                        BACKGROUND_STYLE_STATIC：点击的时候没有水波纹效果，即不抖动
                        BACKGROUND_STYLE_RIPPLE：点击的时候有水波纹效果，即抖动
        */
        mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);/*
            有三种Mode：MODE_DEFAULT：如果Item的个数<=3就会使用MODE_FIXED模式，否则使用MODE_SHIFTING模式
                       MODE_FIXED：填充模式，未选中的Item会显示文字，没有换挡动画。
                       MODE_SHIFTING：换挡模式，未选中的Item不会显示文字，选中的会显示文字。在切换的时候会有一个像换挡的动画
        */

        //添加BottomNavigationBar项
        //构造器为选中时的图标和文字，tInactiveIcon()设置为选中的图标，setInActiveColor() 设置Item未选中颜色方法，setActiveColor() 设置Item选中颜色方法，如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态，可以使用BottomNavigationItem.setInActiveIcon()方法来设置。
        mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.home_fill, "Home").setInactiveIconResource(R.drawable.home).setActiveColorResource(R.color.toolbar_item_background_normal).setInActiveColorResource(R.color.black))
                .addItem(new BottomNavigationItem(R.drawable.location_fill, "Location").setInactiveIconResource(R.drawable.location).setActiveColorResource(R.color.toolbar_item_background_normal).setInActiveColorResource(R.color.black))
                .addItem(new BottomNavigationItem(R.drawable.like_fill, "Like").setInactiveIconResource(R.drawable.like).setActiveColorResource(R.color.toolbar_item_background_normal).setInActiveColorResource(R.color.black))
                .addItem(new BottomNavigationItem(R.drawable.person_fill, "Me").setInactiveIconResource(R.drawable.person).setActiveColorResource(R.color.toolbar_item_background_normal).setInActiveColorResource(R.color.black))
                .setFirstSelectedPosition(0)//设置第一次的选中
                .initialise();

        mBottomNavigationBar.setTabSelectedListener(this);//设置BottomNavigationBar的点击事件,有onTabSelected()、onTabUnselected()和onTabReselected()

        setDefaultFragment();//设置默认的内容区
        return view;
    }

    /**
     * set the default fagment
     * <p>
     * the content id should not be same with the parent content id
     */
    private void setDefaultFragment() {//设置默认的内容区
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        HomeFragment homeFragment = mHomeFragment.newInstance("Home");
        transaction.replace(R.id.myfragment_content, homeFragment).commit();

    }

    @Override
    public void onTabSelected(int position) {//底部导航栏的点击事件
        FragmentTransaction beginTransaction = getFragmentManager().beginTransaction();

        switch (position) {//position为BottomNavigationBar项的索引
            case 0:
                if (mHomeFragment == null) {
                    mHomeFragment = HomeFragment.newInstance("Home");
                }
                beginTransaction.replace(R.id.myfragment_content, mHomeFragment);
                break;
            case 1:
                if (mLocationFragment == null) {
                    mLocationFragment = LocationFragment.newInstance("Location");
                }
                beginTransaction.replace(R.id.myfragment_content, mLocationFragment);
                break;
            case 2:
                if (mLikeFragment == null) {
                    mLikeFragment = LikeFragment.newInstance("Like");
                }
                beginTransaction.replace(R.id.myfragment_content, mLikeFragment);
                break;
            case 3:
                if (mPersonFragment == null) {
                    mPersonFragment = PersonFragment.newInstance("Me");
                }
                beginTransaction.replace(R.id.myfragment_content, mPersonFragment);
                break;
        }
        beginTransaction.commit();

    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }

}

5.新建HomeFragment.java、LocationFragment.java、LikeFragment.java和PersonFragment.java用于显示点击BottomNavigationBar时的显示的内容：

项目地址：

https://github.com/wanglunhui2012/BottomNavigationBarTest