安卓:BottomNavigationBar——底部导航栏控件

目录

一、BottomNavigationBar介绍

二、BottomNavigationBar的常用方法及其常用类

(一)、常用方法

1. 添加菜单项

2. 移除菜单项

3. 设置选中监听器

4. 设置当前选中项 

5. 设置徽章

 6. 样式和颜色定制

7. 动画效果 

8. 隐藏底部导航栏。

 9、设置模式

10.初始化 bottomNavigation

 (二)、常用类

 TextBadgeItem常用方法:

 ShapeBadgeItem常用方法:

三、bottomNavigation的使用例子 

一、BottomNavigationBar介绍

        BottomNavigationBar是一个用于Android应用程序的底部导航栏控件,通常用于在应用程序的不同页面之间进行快速切换。它提供了一种直观且易于使用的导航方式,使用户可以轻松访问应用程序的各个模块。

依赖包:

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'

二、BottomNavigationBar的常用方法及其常用类

(一)、常用方法

        BottomNavigationBar提供了一系列常用的方法,用于定制和管理底部导航栏的外观和行为。以下是BottomNavigationBar的常用方法及其调用例子的详细介绍:

1. 添加菜单项

  • addItem(BottomNavigationItem item):向导航栏添加一个菜单项。

2. 移除菜单项

  • removeItem(int position):从导航栏中移除指定位置的菜单项。

3. 设置选中监听器

  • setOnTabSelectedListener(OnTabSelectedListener listener):设置导航栏的选中监听器。

4. 设置当前选中项 

  • setCurrentItem(int position, boolean animate):设置当前选中的菜单项。
  • setFirstSelectedPosition(int position):设置默认选中项。

5. 设置徽章

  • setNotification(String text, int position):在指定位置的菜单项上显示徽章。
  • removeNotification(int position):移除指定位置菜单项上的徽章。

 6. 样式和颜色定制

  • setBackgroundStyle(int backgroundStyle):用于设置底部导航栏的背景样式。
  • setDefaultBackgroundColor(int color):设置导航栏的默认背景颜色。
  • setAccentColor(int color):设置选中项的颜色。
  • setInactiveColor(int color):设置未选中项的颜色。
  • setTitleState(int state):设置标题的显示方式,可选值有STATE_ALWAYS_SHOW、STATE_ALWAYS_HIDE和STATE_SHOW_WHEN_ACTIVE。
  • setTitleTextSize(int textSize):设置标题的字体大小。

7. 动画效果 

  • setColored(boolean colored):设置是否启用选中项的颜色动画效果。
  • setBehaviorTranslationEnabled(boolean enabled):设置是否启用底部导航栏的滑动效果。

8. 隐藏底部导航栏。

  • hideBottomNavigation(boolean hide):显示或隐藏底部导航栏。

 9、设置模式

  • setMode(int mode) :
  1. MODE_FIXED:固定模式

    • 当导航栏的菜单项个数小于等于3个时,推荐使用此模式。
    • 在固定模式下,所有的菜单项会平均分布在底部导航栏中,且大小相等。
  2. MODE_SHIFTING:移动模式

    • 当导航栏的菜单项个数大于3个时,推荐使用此模式。
    • 在移动模式下,当前选中的菜单项会突出显示,而其他未选中的菜单项则会缩小并向上移动。

10.初始化 bottomNavigation

  •  initialise():用于完成底部导航栏的初始化。

 (二)、常用类

  1. BottomNavigationBar:底部导航栏的主要类,用于创建和管理底部导航项。通过该类,可以设置导航栏的模式、背景样式、菜单项等属性,并监听导航项的选中事件。
  2. BadgeItem:角标类,用于在导航栏的菜单项上显示角标。它有两个子类:TextBadgeItem用于在菜单项上显示文本角标。ShapeBadgeItem用于在菜单项上显示形状角标,如圆形、方形等。 
  3. BottomNavigationItem:底部导航项的类,用于创建每个菜单项。通过该类,可以设置图标、标题和选中状态的图标。
  4. OnTabSelectedListener:底部导航栏的选项卡选中监听器接口。通过实现该接口,可以监听到选项卡的选中事件,并在相应的回调方法中进行处理。
  5. BadgeAnimation角标动画类,用于定义角标的出现和消失动画效果。

 TextBadgeItem常用方法

  • setText(String text):设置角标上显示的文本内容。
  • setBackgroundColor(int color):设置角标的背景颜色。
  • setTextColor(int color):设置角标文本的颜色。
  • setHideOnSelect(boolean hideOnSelect):设置是否在选中菜单项时隐藏角标,默认为false。
  • setAnimationDuration(long duration):设置角标动画的持续时间,单位为毫秒。
  • show()hide():手动显示和隐藏角标。 
  •  setShape(Shape shape):设置角标的形状。

 ShapeBadgeItem常用方法

  • setIconDrawable(Drawable icon):设置菜单项的图标。
  • setInactiveIconDrawable(Drawable icon):设置菜单项的非选中状态的图标。 
  • setText(String text):设置菜单项的文本内容。
  •  setInactiveColor(int color):设置菜单项的非选中状态的颜色。
  • setActiveColor(int color):设置菜单项的选中状态的颜色。
  • setBadgeItem(BadgeItem badgeItem):为菜单项设置角标。

三、bottomNavigation的使用例子 

MainActivity: 

package com.example.bottomnavigationbardemo;import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import android.graphics.Color;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;
import com.ashokvarma.bottomnavigation.ShapeBadgeItem;
import com.ashokvarma.bottomnavigation.TextBadgeItem;import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {private FragmentManager mFragmentManager;private BottomNavigationBar mBottomNavigationBar;TextBadgeItem mTextBadgeItem;ShapeBadgeItem mShapeBadgeItem;private FirstFragment firstFragment;private SecondFragment secondFragment;private ThirdFragment thirdFragment;private FragmentTransaction transaction;int curPosition;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mBottomNavigationBar = findViewById(R.id.bottom_navigation_bar);initBottomNavigationBar();}private void initBottomNavigationBar() {// 设置固定模式mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);// 设置点击事件mBottomNavigationBar.setTabSelectedListener(this);List<BottomNavigationItem> items= getBottomNavigationItem();mBottomNavigationBar.addItem(items.get(0)).setFirstSelectedPosition(0).addItem(items.get(1)).addItem(items.get(2))// 此方法应在所有自定义方法结束时调用。此方法将考虑所有更改并重新绘制选项卡。.initialise();setDefaultFragment();}private List<BottomNavigationItem> getBottomNavigationItem() {initBadgeItem();// 用来存item的集合List<BottomNavigationItem> items = new ArrayList<>();// 创建Item1BottomNavigationItem homeItem = new BottomNavigationItem(R.drawable.home,"首页");// 设置被点击时的颜色homeItem.setActiveColor(R.color.purple_500).setBadgeItem(mShapeBadgeItem);// 设置没有被点中的颜色
//        homeItem.setInActiveColor(R.color.teal_200);// 设计没有被点中时的图片资源
//        homeItem.setInactiveIconResource(R.drawable.ic_launcher_foreground);items.add(homeItem);// 创建Item2BottomNavigationItem messageItem = new BottomNavigationItem(R.drawable.message,"信息");// 设置被点击时的颜色设置没有被点中的颜色messageItem.setActiveColor(R.color.purple_500)
//        .setInActiveColor(R.color.teal_200).setBadgeItem(mTextBadgeItem);//        .setInactiveIconResource(R.drawable.ic_launcher_foreground);items.add(messageItem);// 创建Item2BottomNavigationItem personage = new BottomNavigationItem(R.drawable.person,"个人信息");// 设置被点击时的颜色设置没有被点中的颜色personage.setActiveColor(R.color.purple_500);
//                .setInActiveColor(R.color.teal_200)
//                .setInactiveIconResource(R.drawable.ic_launcher_foreground);items.add(personage);return items;}/*** 设置徽章*/private void initBadgeItem() {mTextBadgeItem = new TextBadgeItem();mTextBadgeItem.setText("99+").setTextColor("#ffffff").setBorderWidth(5).setBackgroundColor("#ff4083").setHideOnSelect(false); // 选中是否隐藏
//                .setGravity(Gravity.TOP); // 设置位置mShapeBadgeItem = new ShapeBadgeItem();mShapeBadgeItem.setShape(ShapeBadgeItem.SHAPE_OVAL).setShapeColor(Color.RED).setEdgeMarginInDp(this,0) // 距离item的边距,dP.setSizeInDp(this, 15, 15) //宽高值,dp.setHideOnSelect(false).setAnimationDuration(300); //隐藏和展示的动画速度,单位毫秒,和setHideOnSelect一起使用}/*** 设置默认开启的fragment*/private void setDefaultFragment() {mFragmentManager = getSupportFragmentManager();FragmentTransaction transaction = mFragmentManager.beginTransaction();firstFragment = new FirstFragment();transaction.add(R.id.tb, firstFragment);transaction.commit();}/*** 隐藏当前fragment** @param transaction*/private void hideFragment(FragmentTransaction transaction) {if (firstFragment != null) {transaction.hide(firstFragment);}if (secondFragment != null) {transaction.hide(secondFragment);}if (thirdFragment != null) {transaction.hide(thirdFragment);}}@Overridepublic void onTabSelected(int position) {curPosition = position;//每次点击赋值//开启事务transaction = mFragmentManager.beginTransaction();// 隐藏当前的fragmenthideFragment(transaction);switch (position) {case 0:if (firstFragment == null) {firstFragment = new FirstFragment();transaction.add(R.id.tb, firstFragment);} else {transaction.show(firstFragment);}// transaction.replace(R.id.tb, firstFragment);break;case 1:if (secondFragment == null) {secondFragment = new SecondFragment();transaction.add(R.id.tb, secondFragment);} else {transaction.show(secondFragment);}break;case 2:if (thirdFragment == null) {thirdFragment = new ThirdFragment();transaction.add(R.id.tb, thirdFragment);} else {transaction.show(thirdFragment);}break;}// 事务提交transaction.commit();}@Overridepublic void onTabUnselected(int position) {// 没有被选中时,调用该方法}@Overridepublic void onTabReselected(int position) {// 再次选中时,调用此方法}}

代码解析:

MainActivity 类是一个包含底部导航栏的活动。在 onCreate() 方法中,通过调用 initBottomNavigationBar() 初始化了底部导航栏。

initBottomNavigationBar() 方法中:

  • 设置了底部导航栏的模式为 MODE_SHIFTING,表示选项卡会随用户的点击而移动。
  • 设置了底部导航栏的点击事件监听器为当前活动(this)。
  • 调用 getBottomNavigationItem() 方法获取底部导航栏的选项卡集合,并添加到底部导航栏中。
  • 调用 initialise() 方法完成底部导航栏的初始化,并设置默认显示的片段。

getBottomNavigationItem() 方法中:

  • 创建了三个底部导航栏的选项卡 BottomNavigationItem
  • 分别设置了选项卡的图标、文字、被点击时的颜色、未被点击时的颜色和未被点击时的图标资源。
  • 将选项卡添加到一个列表中并返回。

除此之外,还定义了其他方法:

  • initBadgeItem():初始化了两个徽章(TextBadgeItem 和 ShapeBadgeItem),并设置其属性。
  • setDefaultFragment():设置默认显示的片段为 FirstFragment
  • hideFragment(FragmentTransaction transaction):隐藏当前显示的片段。
  • onTabSelected(int position):处理选项卡被选中的事件,根据位置切换不同的片段。
  • onTabUnselected(int position):处理选项卡取消选中的事件。
  • onTabReselected(int position):处理选项卡再次被选中的事件。

总结:该代码是一个包含底部导航栏的活动,通过点击底部选项卡来切换显示不同的片段。可以根据需要修改底部导航栏的样式、添加更多的选项卡和设置对应的片段。

 FirstFragment :

package com.example.bottomnavigationbardemo;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;public class FirstFragment extends Fragment {@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.activity_first_fragment, container, false);return view;}
}

 activity_first_fragment:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="第一个Fragment"android:textSize="30sp" />
</LinearLayout>

activity_main: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff"android:orientation="vertical"><FrameLayoutandroid:id="@+id/tb"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><Viewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:background="#eeeeee" /><com.ashokvarma.bottomnavigation.BottomNavigationBarandroid:id="@+id/bottom_navigation_bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom" /></LinearLayout>

注意: SecondFragment、ThirdFragment和FirstFragment的代码一样,其布局文件也跟activity_first_fragment一样。

运行效果:

 

 

 四、总结

        BottomNavigationBar(底部导航栏)是一种常见的用户界面设计模式,常用于移动应用程序中。下面是 BottomNavigationBar 的优点和缺点的总结:

优点:

1. 提供直观的导航:底部导航栏通常位于屏幕底部,使用户可以轻松访问主要功能和导航选项。这种布局方式更符合用户的自然操作习惯,提供了直观的导航体验。
2. 节省屏幕空间:将导航选项放置在底部,可以节省屏幕顶部的空间,更多地用于显示应用程序的内容。尤其对于大屏幕设备,这种设计可以更好地利用屏幕空间。
3. 易于使用手指操作:由于底部导航栏靠近手指自然的位置,用户可以轻松地使用拇指进行导航,而无需频繁改变手持设备的姿势。
4. 强调当前位置:通过高亮显示当前活动或选中的导航选项,底部导航栏可以帮助用户更清楚地知道自己所处的位置,并提供上下文导航。

缺点:

1. 屏幕空间限制:虽然底部导航栏节省了屏幕顶部的空间,但它也会占用屏幕底部的一定高度。对于某些应用程序而言,这可能会减少可用的内容显示区域。
2. 选项数量限制:底部导航栏通常适用于不超过五个主要功能或导航选项的应用程序。如果选项过多,可能会导致导航栏变得拥挤,难以识别和操作。
3. 设计一致性:底部导航栏是一种常见的设计模式,但并不适用于所有应用程序。在选择使用底部导航栏时,需要确保它与应用程序的整体设计风格和用户期望一致。

        综上所述,BottomNavigationBar 提供了直观、节省空间和易于操作的优点,但也存在屏幕空间限制和选项数量限制等一些缺点。在设计应用程序时,需要仔细考虑是否采用底部导航栏,并确保与应用程序的整体设计一致。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/75015.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

过程:从虚拟机上添加 git 并成功提交到 GitLab 的全过程

Ⅰ、准备工作&#xff1a; 1、Git 查看&#xff1a; 其一、命令&#xff1a;git --version // 此时就能在虚拟机环境下看到 git 的版本为: git version 2.41.0 其二、如何在虚拟机上安装 git &#xff1a; A、命令 &#xff1a; sudo apt-get install git B、然后再输入虚…

小研究 - 主动式微服务细粒度弹性缩放算法研究(三)

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放&#xff0c;忽略了能够充分利用单台服务器资源的细粒度垂直缩放&#xff0c;从而导致资源浪费。为此&#xff0c;本文设计了主动式微服务细粒度弹性缩放算法…

React 之 Redux - 状态管理

一、前言 1. 纯函数 函数式编程中有一个非常重要的概念叫纯函数&#xff0c;JavaScript符合函数式编程的范式&#xff0c;所以也有纯函数的概念 确定的输入&#xff0c;一定会产生确定的输出 函数在执行过程中&#xff0c;不能产生副作用 2. 副作用 表示在执行一个函数时&a…

Docker实战-关于Docker镜像的相关操作(一)

导语   镜像&#xff0c;Docker中三大核心概念之一&#xff0c;并且在运行Docker容器之前需要本地存储对应的镜像。那么下面我们就来介绍一下在Docker中如何使用镜像。 如何获取镜像&#xff1f; 镜像作为容器运行的前提条件&#xff0c;在Docker Hub上提供了各种各样的开放的…

Edge浏览器安装vue devtools

1. 下载地址 GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 2. 下载后的压缩包解压并打开文件夹&#xff0c;右键选择&#xff1a;git bush here 3. 安装依赖 npm install 4. 成功安装依赖后打包 npm run build

万界星空科技/免费开源MES系统/免费仓库管理

仓库管理&#xff08;仓储管理&#xff09;&#xff0c;指对仓库及仓库内部的物资进行收发、结存等有效控制和管理&#xff0c;确保仓储货物的完好无损&#xff0c;保证生产经营活动的正常进行&#xff0c;在此基础上对货物进行分类记录&#xff0c;通过报表分析展示仓库状态、…

基于opencv的几种图像滤波

一、介绍 盒式滤波、均值滤波、高斯滤波、中值滤波、双边滤波、导向滤波。 boxFilter() blur() GaussianBlur() medianBlur() bilateralFilter() 二、代码 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> …

OpenLayers入门,OpenLayers使用fetch加载并显示TopoJson格式区划边界数据并叠加文字标注,动态创建要素样式

专栏目录: OpenLayers入门教程汇总目录 前言 上一章中已经说明了TopoJson格式数据,《OpenLayers入门,OpenLayers加载TopoJson数据,使用行政区划边界作为示例》,大家应该都已经有所了解。 本章在上一章基础上改用fetch加载TopoJson格式数据,并手动解析数据为Feature要素…

【GITHUB】FlipIt – Windows的开源翻页时钟

FlipIt 是一款免费开源的翻页时钟应用&#xff0c;专为 Windows 平台设计。该应用灵感来源于备受喜爱的老牌翻页时钟应用 Fliqlo&#xff0c;后者被公认为经典的翻页时钟屏保。然而&#xff0c;由于 Fliqlo 是基于 Flash 技术开发的&#xff0c;随着微软最近正式禁用 Flash&…

contact.sh:一款专门用于安全漏洞报告的公开资源情报工具

关于contact.sh contact.sh一款专门用于安全漏洞报告的公开资源情报工具&#xff0c;在该工具的帮助下&#xff0c;广大研究人员可以扫描企业域名并搜索企业中的用户账号&#xff0c;并根据安全威胁等级来发送安全漏洞报告。 工具安装 GNU/Linux 在下载该工具之前&#xff…

多线程之NSOperation

套话 与GCD一样&#xff0c;NSOperation也是我们日常开发中经常用到的多线程技术。本文将会介绍NSOperation的基本使用、添加依赖、 初次使用 NSOperation是个抽象类&#xff0c;依赖于子类NSInvocationOperation、NSBlockOperation去实现 下面是开发者文档上对NSOperation…

macOS 虚拟桌面黑屏(转)

转自&#xff1a;macOS重置虚拟桌面、macOS 虚拟桌面黑屏 有几次出现如图的情况&#xff0c;以为是iTerm的问题&#xff0c;但是在关闭软件&#xff0c;重启之后&#xff0c;依旧无效。 后面经过网友告知&#xff0c;才知道是虚拟桌面的问题。 为了清理这个问题&#xff0c;有以…

ELD透明屏在智能家居中有哪些优点展示?

ELD透明屏是一种新型的显示技术&#xff0c;它能够在不需要背光的情况下显示图像和文字。 ELD透明屏的原理是利用电致发光效应&#xff0c;通过在透明基板上涂覆一层特殊的发光材料&#xff0c;当电流通过时&#xff0c;发光材料会发出光线&#xff0c;从而实现显示效果。 ELD…

论文研读|多媒体自动评论生成发展综述

前言&#xff1a;多媒体自动评论生成旨在通过使用生成模型&#xff0c;对给定上下文生成符合情境的评论&#xff0c;近年来&#xff0c;随着图像描述等跨模态工作取得较大突破&#xff0c;相关研究也逐渐展开。评论作为社交平台互动的重要组成部分&#xff0c;在引导舆论、提升…

python-MySQL数据库建表语句(需要连接数据库)转存为Excel文档-工作小记

将create table XXXXXX 转为指定Excel文档。该脚本适用于数据库表结构本地文档记录 呈现效果 代码 # -*- coding:utf-8 -*- # Time : 2023/8/2 15:14 # Author: 水兵没月 # File : MySQL建表_2_excel.py import reimport mysql.connector import pandas as pd db 库名 mydb …

Linux的基本指令(2)

指令1&#xff1a;man 作用&#xff1a;可以查询linux指令语法内容。 格式&#xff1a; man 指令 安装man指令&#xff1a; yum install -y man-pages 例如&#xff1a; 查询 指令 ls 的语法内容。 man ls 查询 fork 指令的语法内容。 man fork 在man中存在9个手册&…

【腾讯云Cloud Studio实战训练营】使用Cloud Studio迅捷开发一个3D家具个性化定制应用

目录 前言&#xff1a; 一、腾讯云 Cloud Studio介绍&#xff1a; 1、接近本地 IDE 的开发体验 2、多环境可选&#xff0c;或连接到云主机 3、随时分享预览效果 4、兼容 VSCode 插件 5、 AI代码助手 二、腾讯云Cloud Studio项目实践&#xff08;3D家具个性化定制应用&…

Day51 算法记录| 动态规划 18(单调栈)

单调栈 739. 每日温度496.下一个更大元素 I503. 下一个更大元素 II42. 接雨水84. 柱状图中最大的矩形 单调栈&#xff1a;找最近的比他大的值 最近大的值&#xff1a;需要一个单调递减的栈&#xff08;大于栈顶元素就弹出&#xff09; 最近最小值&#xff1a;单调递减栈 方向&a…

idea-常用插件汇总

idea-常用插件汇总 码云插件 这个插件是码云提供的ps-码云是国内的一款类似github的代码托管工具。 Lombok Lombok是一个通用Java类库&#xff0c;能自动插入编辑器并构建工具&#xff0c;简化Java开发。通过添加注解的方式&#xff0c;不需要为类编写getter或setter等方法…

记一次 .NET 某物流API系统 CPU爆高分析

一&#xff1a;背景 1. 讲故事 前段时间有位朋友找到我&#xff0c;说他程序CPU直接被打满了&#xff0c;让我帮忙看下怎么回事&#xff0c;截图如下&#xff1a; 看了下是两个相同的程序&#xff0c;既然被打满了那就抓一个 dump 看看到底咋回事。 二&#xff1a;为什么会打…