Android BottomNavigationBar底部导航控制器使用方法详解

admin

参考文章 ：http://blog.csdn.net/qq_16131393/article/details/51419901


最近Google在自己推出的Material design中增加了Bottom Navigation导航控制。Android一直没有官方的导航控制器，自己实现确实是五花八门，有了这个规定之后，就类似苹果的底部Toolbar，以后我们的APP就会有一致的风格，先看一张效果：

这是官方在Material design中给出一张图，确实很不错。

1.BottomNavigationBar的下载地址

https://github.com/Ashok-Varma/BottomNavigation

2.使用的方法

2.1在Gradle中添加

compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5'

2.2布局实现

1. <com.ashokvarma.bottomnavigation.BottomNavigationBar
   
2.    android:layout_gravity="bottom"
   
3.    android:id="@+id/bottom_navigation_bar"
   
4.    android:layout_width="match_parent"
   
5.    android:layout_height="wrap_content"/>

复制代码

2.3类中Activity中添加BottomNavigationItem

1. BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
   
2. 
   
3. bottomNavigationBar
   
4.         .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
   
5.         .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
   
6.         .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
   
7.         .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
   
8.         .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
   
9.         .initialise();

复制代码

2.4设置事件监听器TabChangeListener

1. bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
   
2.      @Override
   
3.      public void onTabSelected(int position) {
   
4.      }
   
5.      @Override
   
6.      public void onTabUnselected(int position) {]
   
7.      }
   
8.      @Override
   
9.      public void onTabReselected(int position) {
   
10.      }
    
11.    });

复制代码

3.案例的实现

布局文件

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.   xmlns:tools="http://schemas.android.com/tools"
   
4.   xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
   
5.   android:layout_height="match_parent"
   
6.   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   
7.   tools:showIn="@layout/activity_navigation_view_demo"
   
8.   tools:context="com.lidong.demo.navigation_view.BottomNavigationBarDemoActivity">
   
9. 
   
10.   <LinearLayout
    
11.     android:id="@+id/tb"
    
12.     android:layout_width="match_parent"
    
13.      android:layout_height="match_parent"
    
14.     android:orientation="vertical" />
    
15.   <com.ashokvarma.bottomnavigation.BottomNavigationBar
    
16.     android:id="@+id/bottom_navigation_bar"
    
17.     android:layout_width="match_parent"
    
18.     android:layout_alignParentBottom="true"
    
19.     android:layout_height="wrap_content"/>
    
20. </RelativeLayout>

复制代码

Activity的代码：

1. package com.lidong.demo.navigation_view;
   
2. 
   
3. import android.app.FragmentManager;
   
4. import android.app.FragmentTransaction;
   
5. import android.os.Bundle;
   
6. import android.support.v7.app.AppCompatActivity;
   
7. import android.support.v7.widget.Toolbar;
   
8. import android.util.Log;
   
9. 
   
10. import com.ashokvarma.bottomnavigation.BottomNavigationBar;
    
11. import com.ashokvarma.bottomnavigation.BottomNavigationItem;
    
12. import com.lidong.demo.R;
    
13. 
    
14. /**
    
15. * BottomNavigationBar实现
    
16. */
    
17. public class BottomNavigationBarDemoActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
    
18. 
    
19.   private BottomNavigationBar bottomNavigationBar;
    
20.   int lastSelectedPosition = 0;
    
21.   private String TAG = BottomNavigationBarDemoActivity.class.getSimpleName();
    
22.   private LocationFragment mLocationFragment;
    
23.   private FindFragment mFindFragment;
    
24.   private FavoritesFragment mFavoritesFragment;
    
25.   private BookFragment mBookFragment;
    
26. 
    
27.   @Override
    
28.   protected void onCreate(Bundle savedInstanceState) {
    
29.     super.onCreate(savedInstanceState);
    
30.     setContentView(R.layout.activity_navigation_view_demo);
    
31.     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    
32.     setSupportActionBar(toolbar);
    
33.     bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
    
34. 
    
35.     bottomNavigationBar
    
36.         .addItem(new BottomNavigationItem(R.mipmap.ic_location_on_white_24dp, "位置").setActiveColor(R.color.orange))
    
37.         .addItem(new BottomNavigationItem(R.mipmap.ic_find_replace_white_24dp, "发现").setActiveColor(R.color.blue))
    
38.         .addItem(new BottomNavigationItem(R.mipmap.ic_favorite_white_24dp, "爱好").setActiveColor(R.color.green))
    
39.         .addItem(new BottomNavigationItem(R.mipmap.ic_book_white_24dp, "图书").setActiveColor(R.color.blue))
    
40.         .setFirstSelectedPosition(lastSelectedPosition )
    
41.         .initialise();
    
42. 
    
43.     bottomNavigationBar.setTabSelectedListener(this);
    
44.     setDefaultFragment();
    
45.   }
    
46. 
    
47.   /**
    
48.    * 设置默认的
    
49.    */
    
50.   private void setDefaultFragment() {
    
51.     FragmentManager fm = getFragmentManager();
    
52.     FragmentTransaction transaction = fm.beginTransaction();
    
53.     mLocationFragment = LocationFragment.newInstance("位置");
    
54.     transaction.replace(R.id.tabs, mLocationFragment);
    
55.     transaction.commit();
    
56.   }
    
57. 
    
58.   @Override
    
59.   public void onTabSelected(int position) {
    
60.     Log.d(TAG, "onTabSelected() called with: " + "position = [" + position + "]");
    
61.     FragmentManager fm = this.getFragmentManager();
    
62.     //开启事务
    
63.     FragmentTransaction transaction = fm.beginTransaction();
    
64.     switch (position) {
    
65.       case 0:
    
66.         if (mLocationFragment == null) {
    
67.           mLocationFragment = LocationFragment.newInstance("位置");
    
68.         }
    
69.         transaction.replace(R.id.tb, mLocationFragment);
    
70.         break;
    
71.       case 1:
    
72.         if (mFindFragment == null) {
    
73.           mFindFragment = FindFragment.newInstance("发现");
    
74.         }
    
75.         transaction.replace(R.id.tb, mFindFragment);
    
76.         break;
    
77.       case 2:
    
78.         if (mFavoritesFragment == null) {
    
79.           mFavoritesFragment = FavoritesFragment.newInstance("爱好");
    
80.         }
    
81.         transaction.replace(R.id.tb, mFavoritesFragment);
    
82.         break;
    
83.       case 3:
    
84.         if (mBookFragment == null) {
    
85.           mBookFragment = BookFragment.newInstance("图书");
    
86.         }
    
87.         transaction.replace(R.id.tb, mBookFragment);
    
88.         break;
    
89.       default:
    
90.         break;
    
91.     }
    
92.     // 事务提交
    
93.     transaction.commit();
    
94.   }
    
95. 
    
96.   @Override
    
97.   public void onTabUnselected(int position) {
    
98.     Log.d(TAG, "onTabUnselected() called with: " + "position = [" + position + "]");
    
99.   }
    
100. 
     
101.   @Override
     
102.   public void onTabReselected(int position) {
     
103. 
     
104.   }
     
105. }

复制代码

fragment的代码

1. package com.lidong.demo.navigation_view;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.os.Bundle;
   
5. import android.view.LayoutInflater;
   
6. import android.view.View;
   
7. import android.view.ViewGroup;
   
8. import android.widget.TextView;
   
9. 
   
10. import com.lidong.demo.R;
    
11. 
    
12. public class LocationFragment extends Fragment {
    
13. 
    
14. 
    
15.   public static LocationFragment newInstance(String param1) {
    
16.     LocationFragment fragment = new LocationFragment();
    
17.     Bundle args = new Bundle();
    
18.     args.putString("agrs1", param1);
    
19.     fragment.setArguments(args);
    
20.     return fragment;
    
21.   }
    
22. 
    
23.   public LocationFragment() {
    
24. 
    
25.   }
    
26. 
    
27.   @Override
    
28.   public void onCreate(Bundle savedInstanceState) {
    
29.     super.onCreate(savedInstanceState);
    
30.   }
    
31. 
    
32.   @Override
    
33.   public View onCreateView(LayoutInflater inflater, ViewGroup container,
    
34.                Bundle savedInstanceState) {
    
35.     View view = inflater.inflate(R.layout.fragment_location, container, false);
    
36.     Bundle bundle = getArguments();
    
37.     String agrs1 = bundle.getString("agrs1");
    
38.     TextView tv = (TextView)view.findViewById(R.id.tv_location);
    
39.     tv.setText(agrs1);
    
40.     return view;
    
41.   }
    
42. 
    
43. 
    
44. 
    
45. }

复制代码

代码下载：https://github.com/lidong1665/AndroidRapidLibrary

代码实现起来很简单，就加载布局，添加BottomNavigationItem，设置TabChangeListener就这三步搞定底部导航控制器。

http://blog.csdn.net/qq_16131393/article/details/51419901