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