BottomNavigationBar底部导航条用法

先来张效果图

接下来是实现过程

1.加入依赖

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

2.xml布局

 fragment.xml的布局
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center"
     android:orientation="vertical">

     <TextView
         android:id="@+id/tv_fragment_text"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:gravity="center_horizontal"
         android:text="@string/app_name"
         android:textColor="@color/colorAccent"
         android:textSize="24sp"/>
 </LinearLayout>

 activity_main.xml的布局
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     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="cct.buttomnavigationbar.MainActivity">
     <LinearLayout
         android:id="@+id/ll_content"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical"
         android:text="Hello World!">
     </LinearLayout>
     <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>

 colors.xml
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="colorPrimary">#3F51B5</color>
     <color name="colorPrimaryDark">#303F9F</color>
     <color name="colorAccent">#FF4081</color>
     <color name="green">#79E65D</color>
     <color name="orange">#F8A52A</color>
     <color name="pink">#FF77FF</color>
     <color name="yellow">#FFFF44</color>
     <color name="light">#BBFFF1</color>
 </resources>

 strings.xml
 <resources>
     <string name="app_name">BottomNavigationBar</string>
     <string name="tab_one">Fish</string>
     <string name="tab_two">Fly</string>
     <string name="tab_three">Bird</string>
     <string name="tab_four">Coffee</string>
 </resources>

2.Java代码

BaseFragment类

 package cct.buttomnavigationbar.fragment;
 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
 import cct.buttomnavigationbar.R;
 public class BaseFragment extends Fragment {
     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.fragment,container,false);
         TextView mFragmentText = (TextView) view.findViewById(R.id.tv_fragment_text);
         Bundle bundle = getArguments();
         String args = bundle.getString(Constants.KEY_ARGS);
         mFragmentText.setText(args);
         return view;
     }
 }

Constants类

 package cct.buttomnavigationbar.fragment;
 public class Constants {
     public static final String KEY_ARGS = "args";
 }

Fragment1类， Fragment2，Fragment3,Fragment4与之一样，就不贴了

 package cct.buttomnavigationbar.fragment;
 import android.os.Bundle;
 public class FragmentOne extends BaseFragment {
     public static FragmentOne newInstance(String s){
         Bundle bundle = new Bundle();
         bundle.putString(Constants.KEY_ARGS,s);
         FragmentOne fragment = new FragmentOne();
         fragment.setArguments(bundle);
         return fragment;
     }
 }

MainActivity类

 package cct.buttomnavigationbar;
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import com.ashokvarma.bottomnavigation.BadgeItem;
 import com.ashokvarma.bottomnavigation.BottomNavigationBar;
 import com.ashokvarma.bottomnavigation.BottomNavigationItem;
 import cct.buttomnavigationbar.fragment.FragmentFour;
 import cct.buttomnavigationbar.fragment.FragmentOne;
 import cct.buttomnavigationbar.fragment.FragmentThree;
 import cct.buttomnavigationbar.fragment.FragmentTwo;

 public class MainActivity extends AppCompatActivity {
     private BottomNavigationBar bottomNavigationBar;
     private FragmentOne mFragmentOne;
     private FragmentTwo mFragmentTwo;
     private FragmentThree mFragmentThree;
     private FragmentFour mFragmentFour;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         BadgeItem badgeItem=new BadgeItem();
         badgeItem.setHideOnSelect(false)
                 .setText("10").setBackgroundColor(R.color.light)
                 .setBorderWidth(0);
         bottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
         bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one,R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem))
                 .addItem(new BottomNavigationItem(R.drawable.icon_two, R.string.tab_two).setActiveColorResource(R.color.orange))
                 .addItem(new BottomNavigationItem(R.drawable.icon_three, R.string.tab_three).setActiveColorResource(R.color.pink))
                 .addItem(new BottomNavigationItem(R.drawable.icon_four, R.string.tab_four).setActiveColor(R.color.yellow))//依次添加item,分别icon和名称
                 .setFirstSelectedPosition(0)//设置默认选择item
                 .initialise();//初始化
         bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
             @Override
             public void onTabSelected(int position) {
                 android.support.v4.app.FragmentTransaction transaction=getSupportFragmentManager().beginTransaction();
                switch(position)
                {
                    case 0:
                    {
                        if(mFragmentOne==null)
                        {
                            mFragmentOne=FragmentOne.newInstance("First Fragment");
                        }
                        transaction.replace(R.id.ll_content, mFragmentOne);
                        break;
                    }
                    case 1:
                    {
                        if(mFragmentTwo==null)
                    {
                           mFragmentTwo=FragmentTwo.newInstance("Second Fragment");
                    }
                    transaction.replace(R.id.ll_content,mFragmentTwo);
                        break;
                    }
                    case 2:
                    {
                        if(mFragmentThree==null)
                        {
                            mFragmentThree=FragmentThree.newInstance("ThirdFragment");
                        }
                 transaction.replace(R.id.ll_content,mFragmentThree);
                        break;
                    }
                    case 3:
                    {
                        if(mFragmentFour==null)
                        {
                            mFragmentFour=FragmentFour.newInstance("Forth Fragment");
                        }
                    transaction.replace(R.id.ll_content,mFragmentFour);
                        break;
                    }
                    default:
                        if(mFragmentOne==null)
                        {
                          mFragmentOne=FragmentOne.newInstance("First Fragment");
                        }
                    transaction.replace(R.id.ll_content,mFragmentOne);
                        break;

                }
                 transaction.commit();
            }
             @Override
             public void onTabUnselected(int position) {

             }
             @Override
             public void onTabReselected(int position) {

             }
         });
     }
 }