服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android使用BottomNavigationBar实现底部导航栏

Android使用BottomNavigationBar实现底部导航栏

2022-09-24 18:29Night丶DQL Android

这篇文章主要为大家详细介绍了Android使用BottomNavigationBar实现底部导航栏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了android实现底部导航栏的具体代码,供大家参考,具体内容如下

展示

mode_fixed+background_style_static效果

Android使用BottomNavigationBar实现底部导航栏

de_fixed+background_style_ripple效果

Android使用BottomNavigationBar实现底部导航栏

mode_shifting+background_style_static效果

Android使用BottomNavigationBar实现底部导航栏

mode_shifting+background_style_ripple效果

Android使用BottomNavigationBar实现底部导航栏

1在gradle中添加

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

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"/>

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();

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) {
     }
   });

5.代码实现

?
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
106
107
108
109
110
package com.android.xiaobai;
 
import android.os.bundle;
import android.support.annotation.nullable;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmenttransaction;
import android.support.v7.app.appcompatactivity;
import android.util.log;
 
import com.ashokvarma.bottomnavigation.bottomnavigationbar;
import com.ashokvarma.bottomnavigation.bottomnavigationitem;
 
import java.util.arraylist;
 
import fragment.contactsfragment;
import fragment.dongtaifragment;
import fragment.msgfragment;
 
/**
 * created by xiaobai on 2018/1/31/031.
 */
 
public class messageactivity extends appcompatactivity implements bottomnavigationbar.ontabselectedlistener {
  private arraylist<fragment> fragments;
  private bottomnavigationbar bottomnavigationbar;
  private msgfragment msgfragment;
  private contactsfragment contactsfragment;
  private dongtaifragment dongtaifragment;
  private fragmentmanager fragmentmanager;
  private fragmenttransaction transaction;
  int lastselectedposition = 0;
 
  @override
  protected void oncreate(@nullable bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activty_message);
 
    bottomnavigationbar = findviewbyid(r.id.bottom_navigation_bar);
    init();
  }
 
  private void init() {
    //要先设计模式后再添加图标!
    //设置按钮模式 mode_fixed表示固定  mode_shifting表示转移
    bottomnavigationbar.setmode(bottomnavigationbar.mode_fixed);
    //设置背景风格
    // background_style_static表示静态的
    //background_style_ripple表示涟漪的,也就是可以变化的 ,跟随setactivecolor里面的颜色变化
    bottomnavigationbar.setbackgroundstyle(bottomnavigationbar.background_style_ripple);
    //添加并设置图标、图标的颜色和文字
    bottomnavigationbar
        .additem(new bottomnavigationitem(r.drawable.im_botton_message, "消息")).setactivecolor(r.color.blue)
        .additem(new bottomnavigationitem(r.drawable.im_botton_contacts, "联系人")).setactivecolor(r.color.red)
        .additem(new bottomnavigationitem(r.drawable.im_botton_dongtai, "动态")).setactivecolor(r.color.orign)
        .setfirstselectedposition(lastselectedposition )
        .initialise();
 
    bottomnavigationbar.settabselectedlistener(this);
    setdefaultfragment();
  }
 
  //设置初始界面
  private void setdefaultfragment() {
    fragmentmanager = getsupportfragmentmanager();
    transaction = fragmentmanager.begintransaction();
    transaction.replace(r.id.layframe, msgfragment.newinstance("消息"));
    transaction.commit();
  }
 
  @override
  public void ontabselected(int position) {
    fragmentmanager = getsupportfragmentmanager();
    transaction = fragmentmanager.begintransaction();
    switch (position) {
      case 0:
        if (msgfragment == null) {
          msgfragment = msgfragment.newinstance("消息");
        }
        transaction.replace(r.id.layframe, msgfragment);
        break;
      case 1:
        if (contactsfragment == null) {
          contactsfragment = contactsfragment.newinstance("联系人");
        }
        transaction.replace(r.id.layframe, contactsfragment);
        break;
      case 2:
        if (dongtaifragment == null) {
          dongtaifragment = dongtaifragment.newinstance("动态");
        }
        transaction.replace(r.id.layframe, dongtaifragment);
        break;
      default:
        break;
    }
    // 事务提交
    transaction.commit();
  }
 
  @override
  public void ontabunselected(int position) {
    log.d("dongtaifragment", "ontabunselected() called with: " + "position = [" + position + "]");
  }
 
  @override
  public void ontabreselected(int position) {
 
  }
}
?
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
package fragment;
 
import android.os.bundle;
import android.support.annotation.nullable;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.textview;
 
import com.android.xiaobai.r;
 
/**
 * created by xiaobai on 2018/1/31/031.
 */
 
public class msgfragment extends basefragment {
  /**
   * 标志位,标志已经初始化完成
   */
  private boolean isprepared;
  /**
   * 是否已被加载过一次,第二次就不再去请求数据了
   */
  private boolean mhasloadedonce;
  textview textview;
  @nullable
  @override
  public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
    if (mview == null) {
      // 需要inflate一个布局文件 填充fragment
      mview = inflater.inflate(r.layout.fragment_msg, container, false);
      initview();
      isprepared = true;
//    实现懒加载
      lazyload();
    }
    //缓存的mview需要判断是否已经被加过parent, 如果有parent需要从parent删除,要不然会发生这个mview已经有parent的错误。
    viewgroup parent = (viewgroup) mview.getparent();
    if (parent != null) {
      parent.removeview(mview);
    }
 
    return mview;
  }
  /**
   * 初始化控件
   */
  private void initview() {
 
  }
 
  @override
  public void lazyload() {
    if (!isprepared || !isvisible || mhasloadedonce) {
      return;
    }
    //填充各控件的数据
    mhasloadedonce = true;
  }
  public static msgfragment newinstance(string param1) {
    msgfragment fragment = new msgfragment();
    bundle args = new bundle();
    args.putstring("agrs1", param1);
    fragment.setarguments(args);
    return fragment;
  }
}
?
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"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".messageactivity">
 
  <framelayout
    android:id="@+id/layframe"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
 
  <com.ashokvarma.bottomnavigation.bottomnavigationbar
    android:id="@+id/bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" />
</linearlayout>
?
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
package fragment;
 
import android.support.v4.app.fragment;
import android.view.view;
 
 
/**
 * created by xiaobai on 2018/1/31/031.
 */
 
public abstract class basefragment extends fragment {
  /**
   * fragment当前状态是否可见
   */
  public boolean isvisible;
 
  /**
   * inflate布局文件 返回的view
   */
  public view mview;
 
  /**
   * 简化 findviewbyid
   *
   * @param viewid
   * @param <t>
   * @return
   */
  protected <t extends view> t find(int viewid) {
    return (t) mview.findviewbyid(viewid);
  }
 
  /**
   * setuservisiblehint是在oncreateview之前调用的
   * 设置fragment可见状态
   */
  @override
  public void setuservisiblehint(boolean isvisibletouser) {
    super.setuservisiblehint(isvisibletouser);
    /**
     * 判断是否可见
     */
    if (getuservisiblehint()) {
      isvisible = true;
      onvisible();
    } else {
      isvisible = false;
      oninvisible();
    }
  }
 
  /**
   * 可见
   */
  private void onvisible() {
    lazyload();
  }
 
  /**
   * 不可见
   */
  private void oninvisible() {
  }
 
  /**
   * 延迟加载
   * 子类必须重写此方法
   */
  public abstract void lazyload();
}

bottomnavigationbar 图标和文字的间距:

在自己项目里value文件夹中的dimens.xml里面复写fixed_height_bottom_padding(默认是10dp,值越小,间距越大。适合的模式是bottomnavigationbar.mode_fixed)

Android使用BottomNavigationBar实现底部导航栏

如果模式是bottomnavigationbar.mode_shifting也是一样,复写和修改相关的参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_36488374/article/details/79956806

延伸 · 阅读

精彩推荐