BottomNavigationBar底部导航条用法

先来张效果图

接下来是实现过程

1.加入依赖

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

2.xml布局

 1 fragment.xml的布局
 2 <?xml version="1.0" encoding="utf-8"?>
 3 <LinearLayout
 4     xmlns:android="http://schemas.android.com/apk/res/android"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:gravity="center"
 8     android:orientation="vertical">
 9 
10     <TextView
11         android:id="@+id/tv_fragment_text"
12         android:layout_width="match_parent"
13         android:layout_height="wrap_content"
14         android:gravity="center_horizontal"
15         android:text="@string/app_name"
16         android:textColor="@color/colorAccent"
17         android:textSize="24sp"/>
18 </LinearLayout>

 1 activity_main.xml的布局
 2 <?xml version="1.0" encoding="utf-8"?>
 3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:id="@+id/activity_main"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     android:paddingBottom="@dimen/activity_vertical_margin"
 9     android:paddingLeft="@dimen/activity_horizontal_margin"
10     android:paddingRight="@dimen/activity_horizontal_margin"
11     android:paddingTop="@dimen/activity_vertical_margin"
12     tools:context="cct.buttomnavigationbar.MainActivity">
13     <LinearLayout
14         android:id="@+id/ll_content"
15         android:layout_width="match_parent"
16         android:layout_height="match_parent"
17         android:orientation="vertical"
18         android:text="Hello World!">
19     </LinearLayout>
20     <com.ashokvarma.bottomnavigation.BottomNavigationBar
21         android:id="@+id/bottom_navigation_bar"
22         android:layout_width="match_parent"
23         android:layout_height="wrap_content"
24         android:layout_alignParentBottom="true">
25     </com.ashokvarma.bottomnavigation.BottomNavigationBar>
26 </RelativeLayout>

 1 colors.xml
 2 <?xml version="1.0" encoding="utf-8"?>
 3 <resources>
 4     <color name="colorPrimary">#3F51B5</color>
 5     <color name="colorPrimaryDark">#303F9F</color>
 6     <color name="colorAccent">#FF4081</color>
 7     <color name="green">#79E65D</color>
 8     <color name="orange">#F8A52A</color>
 9     <color name="pink">#FF77FF</color>
10     <color name="yellow">#FFFF44</color>
11     <color name="light">#BBFFF1</color>
12 </resources>

1 strings.xml
2 <resources>
3     <string name="app_name">BottomNavigationBar</string>
4     <string name="tab_one">Fish</string>
5     <string name="tab_two">Fly</string>
6     <string name="tab_three">Bird</string>
7     <string name="tab_four">Coffee</string>
8 </resources>

2.Java代码

BaseFragment类

 1 package cct.buttomnavigationbar.fragment;
 2 import android.os.Bundle;
 3 import android.support.annotation.Nullable;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 import android.widget.TextView;
 9 import cct.buttomnavigationbar.R;
10 public class BaseFragment extends Fragment {
11     @Nullable
12     @Override
13     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
14         View view = inflater.inflate(R.layout.fragment,container,false);
15         TextView mFragmentText = (TextView) view.findViewById(R.id.tv_fragment_text);
16         Bundle bundle = getArguments();
17         String args = bundle.getString(Constants.KEY_ARGS);
18         mFragmentText.setText(args);
19         return view;
20     }
21 }

Constants类

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

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

 1 package cct.buttomnavigationbar.fragment;
 2 import android.os.Bundle;
 3 public class FragmentOne extends BaseFragment {
 4     public static FragmentOne newInstance(String s){
 5         Bundle bundle = new Bundle();
 6         bundle.putString(Constants.KEY_ARGS,s);
 7         FragmentOne fragment = new FragmentOne();
 8         fragment.setArguments(bundle);
 9         return fragment;
10     }
11 }

MainActivity类

 1 package cct.buttomnavigationbar;
 2 import android.support.v7.app.AppCompatActivity;
 3 import android.os.Bundle;
 4 import com.ashokvarma.bottomnavigation.BadgeItem;
 5 import com.ashokvarma.bottomnavigation.BottomNavigationBar;
 6 import com.ashokvarma.bottomnavigation.BottomNavigationItem;
 7 import cct.buttomnavigationbar.fragment.FragmentFour;
 8 import cct.buttomnavigationbar.fragment.FragmentOne;
 9 import cct.buttomnavigationbar.fragment.FragmentThree;
10 import cct.buttomnavigationbar.fragment.FragmentTwo;
11 
12 public class MainActivity extends AppCompatActivity {
13     private BottomNavigationBar bottomNavigationBar;
14     private FragmentOne mFragmentOne;
15     private FragmentTwo mFragmentTwo;
16     private FragmentThree mFragmentThree;
17     private FragmentFour mFragmentFour;
18     @Override
19     protected void onCreate(Bundle savedInstanceState) {
20         super.onCreate(savedInstanceState);
21         setContentView(R.layout.activity_main);
22         BadgeItem badgeItem=new BadgeItem();
23         badgeItem.setHideOnSelect(false)
24                 .setText("10").setBackgroundColor(R.color.light)
25                 .setBorderWidth(0);
26         bottomNavigationBar= (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
27         bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one,R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem))
28                 .addItem(new BottomNavigationItem(R.drawable.icon_two, R.string.tab_two).setActiveColorResource(R.color.orange))
29                 .addItem(new BottomNavigationItem(R.drawable.icon_three, R.string.tab_three).setActiveColorResource(R.color.pink))
30                 .addItem(new BottomNavigationItem(R.drawable.icon_four, R.string.tab_four).setActiveColor(R.color.yellow))//依次添加item,分别icon和名称
31                 .setFirstSelectedPosition(0)//设置默认选择item
32                 .initialise();//初始化
33         bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
34             @Override
35             public void onTabSelected(int position) {
36                 android.support.v4.app.FragmentTransaction transaction=getSupportFragmentManager().beginTransaction();
37                switch(position)
38                {
39                    case 0:
40                    {
41                        if(mFragmentOne==null)
42                        {
43                            mFragmentOne=FragmentOne.newInstance("First Fragment");
44                        }
45                        transaction.replace(R.id.ll_content, mFragmentOne);
46                        break;
47                    }
48                    case 1:
49                    {
50                        if(mFragmentTwo==null)
51                    {
52                           mFragmentTwo=FragmentTwo.newInstance("Second Fragment");
53                    }
54                    transaction.replace(R.id.ll_content,mFragmentTwo);
55                        break;
56                    }
57                    case 2:
58                    {
59                        if(mFragmentThree==null)
60                        {
61                            mFragmentThree=FragmentThree.newInstance("ThirdFragment");
62                        }
63                 transaction.replace(R.id.ll_content,mFragmentThree);
64                        break;
65                    }
66                    case 3:
67                    {
68                        if(mFragmentFour==null)
69                        {
70                            mFragmentFour=FragmentFour.newInstance("Forth Fragment");
71                        }
72                    transaction.replace(R.id.ll_content,mFragmentFour);
73                        break;
74                    }
75                    default:
76                        if(mFragmentOne==null)
77                        {
78                          mFragmentOne=FragmentOne.newInstance("First Fragment");
79                        }
80                    transaction.replace(R.id.ll_content,mFragmentOne);
81                        break;
82 
83                }
84                 transaction.commit();
85            }
86             @Override
87             public void onTabUnselected(int position) {
88 
89             }
90             @Override
91             public void onTabReselected(int position) {
92 
93             }
94         });
95     }
96 }