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

时间:2021-12-29 08:00:14

最近google在自己推出的material design中增加了bottom navigation导航控制。android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹果的底部toolbar,以后我们的app就会有一致的风格,先看一张效果:

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

这是官方在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
2
3
4
5
<com.ashokvarma.bottomnavigation.bottomnavigationbar
   android:layout_gravity="bottom"
   android:id="@+id/bottom_navigation_bar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

2.3类中activity中添加bottomnavigationitem

?
1
2
3
4
5
6
7
8
9
bottomnavigationbar bottomnavigationbar = (bottomnavigationbar) findviewbyid(r.id.bottom_navigation_bar);
 
bottomnavigationbar
        .additem(new bottomnavigationitem(r.drawable.ic_home_white_24dp, "home"))
        .additem(new bottomnavigationitem(r.drawable.ic_book_white_24dp, "books"))
        .additem(new bottomnavigationitem(r.drawable.ic_music_note_white_24dp, "music"))
        .additem(new bottomnavigationitem(r.drawable.ic_tv_white_24dp, "movies & tv"))
        .additem(new bottomnavigationitem(r.drawable.ic_videogame_asset_white_24dp, "games"))
        .initialise();

2.4设置事件监听器tabchangelistener

?
1
2
3
4
5
6
7
8
9
10
11
bottomnavigationbar.settabselectedlistener(new bottomnavigationbar.ontabselectedlistener(){
     @override
     public void ontabselected(int position) {
     }
     @override
     public void ontabunselected(int position) {]
     }
     @override
     public void ontabreselected(int position) {
     }
   });

3.案例的实现

布局文件

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

activity的代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
package com.lidong.demo.navigation_view;
 
import android.app.fragmentmanager;
import android.app.fragmenttransaction;
import android.os.bundle;
import android.support.v7.app.appcompatactivity;
import android.support.v7.widget.toolbar;
import android.util.log;
 
import com.ashokvarma.bottomnavigation.bottomnavigationbar;
import com.ashokvarma.bottomnavigation.bottomnavigationitem;
import com.lidong.demo.r;
 
/**
 * bottomnavigationbar实现
 */
public class bottomnavigationbardemoactivity extends appcompatactivity implements bottomnavigationbar.ontabselectedlistener {
 
  private bottomnavigationbar bottomnavigationbar;
  int lastselectedposition = 0;
  private string tag = bottomnavigationbardemoactivity.class.getsimplename();
  private locationfragment mlocationfragment;
  private findfragment mfindfragment;
  private favoritesfragment mfavoritesfragment;
  private bookfragment mbookfragment;
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_navigation_view_demo);
    toolbar toolbar = (toolbar) findviewbyid(r.id.toolbar);
    setsupportactionbar(toolbar);
    bottomnavigationbar = (bottomnavigationbar) findviewbyid(r.id.bottom_navigation_bar);
 
    bottomnavigationbar
        .additem(new bottomnavigationitem(r.mipmap.ic_location_on_white_24dp, "位置").setactivecolor(r.color.orange))
        .additem(new bottomnavigationitem(r.mipmap.ic_find_replace_white_24dp, "发现").setactivecolor(r.color.blue))
        .additem(new bottomnavigationitem(r.mipmap.ic_favorite_white_24dp, "爱好").setactivecolor(r.color.green))
        .additem(new bottomnavigationitem(r.mipmap.ic_book_white_24dp, "图书").setactivecolor(r.color.blue))
        .setfirstselectedposition(lastselectedposition )
        .initialise();
 
    bottomnavigationbar.settabselectedlistener(this);
    setdefaultfragment();
  }
 
  /**
   * 设置默认的
   */
  private void setdefaultfragment() {
    fragmentmanager fm = getfragmentmanager();
    fragmenttransaction transaction = fm.begintransaction();
    mlocationfragment = locationfragment.newinstance("位置");
    transaction.replace(r.id.tabs, mlocationfragment);
    transaction.commit();
  }
 
  @override
  public void ontabselected(int position) {
    log.d(tag, "ontabselected() called with: " + "position = [" + position + "]");
    fragmentmanager fm = this.getfragmentmanager();
    //开启事务
    fragmenttransaction transaction = fm.begintransaction();
    switch (position) {
      case 0:
        if (mlocationfragment == null) {
          mlocationfragment = locationfragment.newinstance("位置");
        }
        transaction.replace(r.id.tb, mlocationfragment);
        break;
      case 1:
        if (mfindfragment == null) {
          mfindfragment = findfragment.newinstance("发现");
        }
        transaction.replace(r.id.tb, mfindfragment);
        break;
      case 2:
        if (mfavoritesfragment == null) {
          mfavoritesfragment = favoritesfragment.newinstance("爱好");
        }
        transaction.replace(r.id.tb, mfavoritesfragment);
        break;
      case 3:
        if (mbookfragment == null) {
          mbookfragment = bookfragment.newinstance("图书");
        }
        transaction.replace(r.id.tb, mbookfragment);
        break;
      default:
        break;
    }
    // 事务提交
    transaction.commit();
  }
 
  @override
  public void ontabunselected(int position) {
    log.d(tag, "ontabunselected() called with: " + "position = [" + position + "]");
  }
 
  @override
  public void ontabreselected(int position) {
 
  }
}

fragment的代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package com.lidong.demo.navigation_view;
 
import android.app.fragment;
import android.os.bundle;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.textview;
 
import com.lidong.demo.r;
 
public class locationfragment extends fragment {
 
 
  public static locationfragment newinstance(string param1) {
    locationfragment fragment = new locationfragment();
    bundle args = new bundle();
    args.putstring("agrs1", param1);
    fragment.setarguments(args);
    return fragment;
  }
 
  public locationfragment() {
 
  }
 
  @override
  public void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
  }
 
  @override
  public view oncreateview(layoutinflater inflater, viewgroup container,
               bundle savedinstancestate) {
    view view = inflater.inflate(r.layout.fragment_location, container, false);
    bundle bundle = getarguments();
    string agrs1 = bundle.getstring("agrs1");
    textview tv = (textview)view.findviewbyid(r.id.tv_location);
    tv.settext(agrs1);
    return view;
  }
 
 
 
}

 

代码下载:https://github.com/lidong1665/androidrapidlibrary

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

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

以上就是关于bottomnavigationbar底部导航控制器,希望对大家的学习有所帮助。