Android之底部导航栏BottomNavigationBar

最新推荐文章于 2023-08-04 12:41:52 发布
原创 最新推荐文章于 2023-08-04 12:41:52 发布 · 482 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Android应用中如何使用BottomNavigationBar实现底部导航栏，包括在build.gradle中添加依赖，布局文件引用，代码调用及监听器设置。展示了固定模式下不同背景风格的效果，并提供了完整案例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用步骤
  1. android studio中build.gradle中添加
dependencies {
 compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
 }
  1. 布局文件中添加引用
<com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>`

  1. 在代码中调用即可 

    BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottomNavigationBar);
    bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
    bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);

    bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_default, "Home").setActiveColorResource(R.color.colorAccent))
            .addItem(new BottomNavigationItem(R.drawable.ic_download, "Second").setActiveColorResource(R.color.colorPrimary))
            .addItem(new BottomNavigationItem(R.drawable.ic_error_page, "Thr").setActiveColorResource(R.color.colorPrimaryDark))
            .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "four").setActiveColorResource(R.color.colorFour))
            .setFirstSelectedPosition(0)
            .initialise();

  2. 设置监听器，做出相应的处理

    bottomNavigationBar.setTabSelectedListener(this);

//点击选择的
@Override
public void onTabSelected(int position) {
    if (fragments != null) {
        if (position < fragments.size()) {
            FragmentManager fm = getSupportFragmentManager();
            FragmentTransaction ft = fm.beginTransaction();
            Fragment fragment = fragments.get(position);
            if (fragment.isAdded()) {
                ft.replace(R.id.layFrame, fragment);
            } else {
                ft.add(R.id.layFrame, fragment);
            }
            ft.commitAllowingStateLoss();
        }
    }
}

@Override
public void onTabUnselected(int position) {
    if (fragments != null) {
        if (position < fragments.size()) {
            FragmentManager fm = getSupportFragmentManager();
            FragmentTransaction ft = fm.beginTransaction();
            Fragment fragment = fragments.get(position);
            ft.remove(fragment);
            ft.commitAllowingStateLoss();
        }
    }
}

@Override
public void onTabReselected(int position) {

}

    显示效果

  3. BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_RIPPLE

    Markdown

  4. BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_STATIC

Markdown
3. BottomNavigationBar.MODE_FIXED ＋ BottomNavigationBar.BACKGROUND_STYLE_STATIC

Markdown
4. BottomNavigationBar.MODE_SHIFTING ＋ BottomNavigationBar.BACKGROUND_STYLE_RIPPLE

Markdown

*案例完整代码：
1. activity_main.xml

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.xiaojiu.bottomnavigationbardemo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>

    </android.support.design.widget.AppBarLayout>

    <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/bottomNavigationBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
</LinearLayout>
  1. MainActivity
package com.xiaojiu.bottomnavigationbardemo;

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.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

    private ArrayList<Fragment> fragments;
    private BottomNavigationBar bottomNavigationBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottomNavigationBar);
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);

        bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_default, "Home").setActiveColorResource(R.color.colorAccent))
                .addItem(new BottomNavigationItem(R.drawable.ic_download, "Second").setActiveColorResource(R.color.colorPrimary))
                .addItem(new BottomNavigationItem(R.drawable.ic_error_page, "Thr").setActiveColorResource(R.color.colorPrimaryDark))
                .addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "four").setActiveColorResource(R.color.colorFour))
                .setFirstSelectedPosition(0)
                .initialise();

        fragments = getFragments();
        setDefaultFragment();
        bottomNavigationBar.setTabSelectedListener(this);


    }

    private ArrayList<Fragment> getFragments() {
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(HomeFragment.newInstance("Home"));
        fragments.add(SecondFragment.newInstance("Second"));
        fragments.add(ThreeFragment.newInstance("three"));
        fragments.add(FourFragment.newInstance("Four"));
        return fragments;
    }

    /**
     * 设置默认的
     */
    private void setDefaultFragment() {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.replace(R.id.layFrame, fragments.get(0));
        transaction.commit();
    }

    @Override
    public void onTabSelected(int position) {
        if (fragments != null) {
            if (position < fragments.size()) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction ft = fm.beginTransaction();
                Fragment fragment = fragments.get(position);
                if (fragment.isAdded()) {
                    ft.replace(R.id.layFrame, fragment);
                } else {
                    ft.add(R.id.layFrame, fragment);
                }
                ft.commitAllowingStateLoss();
            }
        }
    }

    @Override
    public void onTabUnselected(int position) {
        if (fragments != null) {
            if (position < fragments.size()) {
                FragmentManager fm = getSupportFragmentManager();
                FragmentTransaction ft = fm.beginTransaction();
                Fragment fragment = fragments.get(position);
                ft.remove(fragment);
                ft.commitAllowingStateLoss();
            }
        }
    }

    @Override
    public void onTabReselected(int position) {

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_scrolling, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //在BACKGROUND_STYLE_STATIC 模式下颜色是底部导航栏背景色，
        // BACKGROUND_STYLE_RIPPLE模式下是图标和文字的颜色（选中/未选中）
        //noinspection SimplifiableIfStatement
        if (id == R.id.take_pic) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
            return true;
        } else if (id == R.id.multi_select) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
            return true;
        } else if (id == R.id.theme_color_pick) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
            return true;
        } else if (id == R.id.theme_color_four) {
            bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
            bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

至于用到的toolbar网上很多资料，不再啰嗦

Demo地址：

https://github.com/mijiaxiaojiu/bottomNavigationBar.git
Android--BottomNavigationBar实现底部导航栏
超宇的博客
01-31 1万+
1.BottomNavigationBar的下载地址 https://github.com/Ashok-Varma/BottomNavigation 2.使用的方法 2.1在Gradle中添加 compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5’ 2.2布局实现 <com.ashokvarma.bottomn...
Android底部导航栏组件：BottomNavigationBar
c_cayujie的博客
01-11 2058
Google终于推出了自己风格的底部导航栏，对于android开发人员来说是一个福音。废话不多说，先来看一下效果： 怎么样，是不是还行，其实使用起来也非常简单，下面跟着我来做吧！添加依赖： compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.1'布局文件： <com.ashokvarma.bottomnavigation.Bo
Android底部导航 BottomNavigationBar（Google官方）
BandOfBrothersZTS的博客
01-24 1720
Android底部导航 BottomNavigationBar（Google官方） github地址（完整Demo下载） https://github.com/zhouxu88/BottomNavigationBar 简介 Android之前一直没有官方的底部导航栏，自己实现也是各有招数，不过不久前，Google官方在自己推出的Material design中增加了BottomNa
android底部导航栏凹凸设计,快速实现底部导航栏
weixin_30466329的博客
05-26 4078
Tint 着色器优点：去除“无用”图片，节省空间配合BottomNavigationView，实现一个快速，简洁的Tab栏，效果图如下传统做法：Tab 切换，字体变色、图片变色。至少给我提供八张图，四张默认，四张选中，然后通过 selector 文件设置现在BottomNavigationView只需四张图！！！依赖(AndroidX)implementation 'com.google.andr...
Android使用BottomNavigationBar实现底部导航栏
01-05
本文实例为大家分享了Android实现底部导航栏的具体代码，供大家参考，具体内容如下 展示 MODE_FIXED+BACKGROUND_STYLE_STATIC效果 DE_FIXED+BACKGROUND_STYLE_RIPPLE效果 MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果 MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果 1在Gradle中添加 compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5' 2布局实现 <com.ashokvarma
Android学习之BottomNavigationBar实现Android特色底部导航栏
qq_24429935的博客
03-07 586
Android底部导航栏的实现方式特别多，例如TabHost，TabLayout，或者TextView等，都可以实现底部导航栏的效果，但是却没有Google官方统一的导航栏样式，今天讲的就是Google最近添加到Material design中的底部导航栏BottomNavigationBar，也可以说是现今Android底部导航栏的一个标准与统一吧。 效果： 实现效果： 实现：
Android底部导航栏 BottomNavigationBar的简单使用
08-24
Android底部导航栏的简单使用 BottomNavigationBar
Android 底部导航栏 BottomNavigationBar的简单使用
08-24
总结起来，实现Android底部导航栏BottomNavigationBar的简单使用，主要包括以下几个步骤： 1. 引入Material Design库 2. 在布局文件中添加BottomNavigationView组件 3. 创建菜单资源文件定义导航选项 4. 在Activity...
Android 底部导航栏BottomNavigationBar实战教程
本资源主要介绍了在Android应用中如何实现底部导航栏（BottomNavigationBar）的示例，通过引入第三方开源库来简化开发过程，并确保设计符合Material Design规范。 在Android应用开发中，底部导航栏是一种常见的用户...
ANDROID BottomNavigationBar底部导航栏的实现示例
01-04
第一种介绍的就是使用开源库，因为使用开源库最简单，也更加的符合我们的审美标准，同时BottomNavigationBar还是符合当前的Material Design标准的。 效果展示 依赖 compile'com.ashokvarma.android:bottom-navigation-bar:1.2.0' 布局文件 activity_main.xml <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果
09-02
BottomBar是Github上的一个开源框架，本文给大家介绍Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
底部导航栏中间圆形按钮凸起效果demo
07-04
这是一个使用RelativeLayout+RadiouGroup+ImageView制作的中间凸起的按钮效果，代码简单易懂，避免了使用自定义控件带来的繁琐问题。
Android 原生底部导航栏,带切换淡入动画
06-07
Android 原生底部导航栏,加入了Fragment切换时的淡入动画
Android 底部导航栏BottomNavigationBar实现详解
"Android 底部导航栏(BottomNavigationBar)的使用教程" 在Android应用开发中，底部导航栏(BottomNavigationBar)是一种常见的组件，用于在多个页面之间提供平滑的导航体验。Google推出的BottomNavigationBar是实现这...
安卓：BottomNavigationBar——底部导航栏控件
A125679880的博客
08-04 7106
BottomNavigationBar是一个用于Android应用程序的底部导航栏控件，通常用于在应用程序的不同页面之间进行快速切换。它提供了一种直观且易于使用的导航方式，使用户可以轻松访问应用程序的各个模块。BottomNavigationBar（底部导航栏）是一种常见的用户界面设计模式，常用于移动应用程序中。
Android BottomNavigationBar 底部导航栏
weixin_41956752的博客
07-20 345
ViewPager实现        compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'//底部导航栏   &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/a...
android底部导航栏下沉,【详细】手把手教你快速实现Android底部导航栏
weixin_39770506的博客
05-26 725
1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout，这是我们最终封装的View工具类。其内部主要由viewpager和底部的TabHost类组成。ViewPager初始化contentViewPager = new ViewPager(context);LayoutParams contentVpLp = new LayoutParams(ViewG...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值