Android仿小米商城底部导航栏(基于BottomNavigationBar)

2023-11-07

简介

现在大多数App都会用到底部导航栏,比如QQ、微信和购物App等等。有了底部导航栏,用户可以随时切换界面,查看不同的内容。Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Google最近添加到Material Design中的底部导航栏BottomNavigationBar。

使用场景

(1)底部导航栏需要有3-5个标签(tab),并且每个tab选择的视图重要性要相似,对于少于3个tab的情况,是不推荐使用Bottom navigation的。
(2)如果标签很多,比如有超过了5个这种情况呢?Google也是不提倡使用Bottom navigation的,可以用Drawer navigation替换。

风格样式

(1)标签Icons和文字的颜色选择是很重要的,一亮一暗才能有对比,用户才很快知道你选择了哪个,如果五颜六色,你是很难分清选择了哪个的。
(2)标签的文字说明要简短而有意义,避免太长的,也不提倡太长了换行和省略的方式。

基本使用

1.  在Android Studio下添加依赖:
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'
2. 在布局文件中,添加布局
<com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>
3. 在代码中为BottomNavigationBar添加Item选项
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. 添加选项卡切换事件监听
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
         @Override
         public void onTabSelected(int position) {//未选中 -> 选中
         }

         @Override
         public void onTabUnselected(int position) {//选中 -> 未选中
         }

         @Override
         public void onTabReselected(int position) {//选中 -> 选中
         }
     });

设置

  1. Mode
    xml:bnbMode
    方法:setMode()
    包含3种Mode:

    • MODE_DEFAULT
      如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式
    • MODE_FIXED
      填充模式,未选中的Item会显示文字,没有换挡动画。
    • MODE_SHIFTING
      换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画
  2. Background Style
    xml: bnbBackgroundStyle
    方法:setBackgroundStyles()
    包含3种Style:

    • BACKGROUND_STYLE_DEFAULT
      如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。

    • BACKGROUND_STYLE_STATIC点击的时候没有水波纹效果

    • BACKGROUND_STYLE_RIPPLE点击的时候有水波纹效果

  3. 设置默认颜色
    xml:bnbActiveColor, bnbInactiveColor, bnbBackgroundColor
    方法:setActiveColor, setInActiveColor, setBarBackgroundColor

    • in-active color表示未选中Item中的图标和文本颜色。默认为 Color.LTGRAY

    • active color :
      BACKGROUND_STYLE_STATIC下,表示选中Item的图标和文本颜色。而
      BACKGROUND_STYLE_RIPPLE下,表示整个容器的背景色。默认Theme’s Primary Color

    • background color :
      BACKGROUND_STYLE_STATIC下,表示整个容器的背景色。而
      BACKGROUND_STYLE_RIPPLE下,表示选中Item的图标和文本颜色。默认 Color.WHITE

  4. 定制Item的选中未选中颜色
    我们可以为每个Item设置选中未选中的颜色,如果没有设置,将继承BottomNavigationBar设置的选中未选中颜色。
    方法:
    BottomNavigationItem.setInActiveColor() 设置Item未选中颜色方法
    BottomNavigationItem.setActiveColor() 设置Item选中颜色方法

  5. Icon的定制
    如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态,可以使用BottomNavigationItem.setInActiveIcon()方法来设置。

  6. 设置自动隐藏与显示
    如果BottomNavigationBar是在CoordinatorLayout布局里,默认设置当向下滑动时会自动隐藏它,当向上滑动时会自动显示它。我们可以通过setAutoHideEnabled(boolean)设置是否允许这种行为,好像这个方法木有啦。

  7. 手动隐藏与显示
    我们可以在任何时间,通过代码隐藏或显示BottomNavigationBar
    方法:

    bottomNavigationBar.hide();//隐藏
    bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画
    bottomNavigationBar.unHide();//显示
    bottomNavigationBar.hide(true);//隐藏是否启动动画,这里并不能自定义动画
  8. 为Item添加Badge

    1. 创建一个BadgeItem

      badge=new BadgeItem()
      //                .setBorderWidth(2)//Badge的Border(边界)宽度
      //                .setBorderColor("#FF0000")//Badge的Border颜色
      //                .setBackgroundColor("#9ACD32")//Badge背景颜色
      //                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默认右上角
            .setText("2")//显示的文本
      //                .setTextColor("#F0F8FF")//文本颜色
      //                .setAnimationDuration(2000)
      //                .setHideOnSelect(true)//当选中状态时消失,非选中状态显示
    2. 为BottomNavigationItem设置BadgeItem

      new BottomNavigationItem(R.mipmap.ic_directions_bike_white_24dp, "骑行").setBadgeItem(badge)

案例实现

GitHub地址:https://github.com/Ashok-Varma/BottomNavigation
Demo:https://github.com/maxliaops/android-exercise/tree/master/MiShop

  1. 布局文件activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/activity_main"
    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="com.rainsong.mishop.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        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. 源码 MainActivity.java
package com.rainsong.mishop;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity implements BottomNavigationBar
        .OnTabSelectedListener {
    BottomNavigationBar bottomNavigationBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        bottomNavigationBar.setTabSelectedListener(this);
        bottomNavigationBar.clearAll();
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.icon_main_home_selected, R.string.home)
                        .setInactiveIconResource(R.drawable.icon_main_home_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_category_selected, R.string.category)
                        .setInactiveIconResource(R.drawable.icon_main_category_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_discover_selected, R.string.discover)
                        .setInactiveIconResource(R.drawable.icon_main_discover_normal)
                        .setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_main_mine_selected, R.string.mine)
                        .setInactiveIconResource(R.drawable.icon_main_mine_normal)
                        .setActiveColorResource(R.color.orange))
                .initialise();
    }

    @Override
    public void onTabSelected(int position) {

    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }
}

效果对比

小米商城

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Android仿小米商城底部导航栏(基于BottomNavigationBar) 的相关文章

随机推荐

  • Qt编写控件属性设计器-用户属性

    一 前言 用户属性是后面新增加的一个功能 自定义控件如果采用的Q PROPERTY修饰的属性 会自动识别到属性栏中 这个一般称为控件属性 在组态设计软件中 光有控件本身的控件属性还是不够的 毕竟这些属性仅仅是以外观为主 并不能表示某个设备的
  • c#监测文件的类---FileSystemWatcher

    本文转载自 http blog csdn net jason ldh article details 9972801 FileSystemWatcher控件主要功能 监控指定文件或目录的文件的创建 删除 改动 重命名等活动 可以动态地定义需
  • 带头结点和尾节点的双向链表的(增删改查,头遍历,尾遍历)java实现

    废话不多说 请看代码 测试输出 代码 package com coderman dataStruct 双链表 Author zhangyukang Date 2020 2 18 19 00 Version 1 0 class DoubleL
  • PyTorch使用LMDB数据库加速文件读取

    PyTorch使用LMDB数据库加速文件读取 文章目录 PyTorch使用LMDB数据库加速文件读取 背景介绍 具体操作 LMDB主要类 lmdb Environment lmdb Transaction Imdb Cursor 操作流程
  • mybatisPlus-wrapper使用

    创建测试类 import com baomidou mybatisplus core conditions query QueryWrapper import com plus mybatis mapper UserMapper impor
  • 思科模拟器静态路由

    网络拓扑图 Router0配置 Router2配置 Multilayer Switch0配置 Switch0配置 Switch2配置 主机PC0配置 202 199 1 2 255 255 255 0 202 199 1 1 主机PC1配置
  • LDAP: error code 32 - No Such Object

    使用spring ldap创建节点的时候报错 LDAP error code 32 No Such Object 是在调用 this ldapTemplate create ldapUser 的时候报的错 找了半天没有发现原因 最后看到一篇
  • JavaScript整理

    第一章 JavaScript概述 1 1 JavaScript简介 JavaScript 简称js 是一种直译式脚本语言 是一种动态类型 弱类型 基于原型的语言 内置支持类型 它的解释器被称为JavaScript引擎 为浏览器的一部分 广泛
  • ajax请求和普通请求的区别

    当浏览器按照window location href index html 进行定期请求时 会清除当前窗口并将服务器响应加载到窗口中 使用ajax请求 当前窗口 文档不受影响 JavaScript代码可以检查请求的结果 并使用这些结果执行所
  • 一些黑科技接口钩子 钉钉,禅道,gitlab,jenkins等

    日常工作中需要做流程的串联 这个时候就需要掌握一些黑科技接口 这些接口甚至是官方文档上并没有提供的 但是我们确实可以使用 进行内部工具开发的一定要记得提供钩子 没有钩子 做不了朋友 钉钉相关 钉钉群中的自定义机器人 curl https o
  • C/C++在线编译器

    一直以来都喜欢用手机看书 尤其是在上班时 看的最多的是编程一类的书 主要是C 看着就想写写代码 可是电脑用不能用 怎么办 于是想到用UC浏览器找找看网上有没有在线的编译器 想什么时候写代码都可以验证 于是就找了几个 各有千秋吧 中文的我没找
  • 在地址栏中输入一段内容,接下来都发生了些什么

    用户发出 URL 请求到页面开始解析的这个过程 就叫做导航 用以定位到新资源 并且将老的资源从页面卸载 一 用户输入 地址栏首先判断输入的内容是搜索内容还是符合url规则的url 如果是搜索内容的话 浏览器会拼接上该搜索内容形成一个新的ur
  • mybatis-plus

    mybatis plus的sql拼接规则 实体对象参数属性有值 那么该属性名会拼接sql语句中 实体对象参数属性为基本属性时 会有默认值 mybatis plus认为是有值 参与sql拼接 mybatis plus与mybatis的对比 m
  • 3d指向检测 ros_3d_pointing_detection

    Introduction The workflow of this project is Detect 2D human joints from color image by Openpose Compute 3D human joints
  • stopPropagation, preventDefault 和 return false 的区别

    http blog csdn net bkq421511585 article details 14166789
  • 使用Docker拉起ES容器和Kibana容器并设置密码Demo

    1 准备条件 安装好docker 在同一台服务器上安装es和kibana 安装docker命令参考 可以按顺序执行如下命令安装 1 sudo yum install y yum utils 2 sudo yum config manager
  • 做擦边网站 服务器放在狗爹,在GoDaddy搭建Prosper202服务器

    记录一下我在GoDaddy搭建Prosper202服务器的过程 1 首先 我购买的是Liunx Deluxe共享虚拟主机 狗爹这个类型的产品可以建多个网站 我有一个域名 www网站已经上线 虽然还没有什么内容 2 为你的Prosper202
  • add_library使用 $<TARGET_OBJECTS:name>

    一 背景 前面介绍了add library的两种格式 今天分享一个实例 Cmake分别生成静态链接库 OBJ链接库 并使用
  • 人人商城小程序消息服务器配置,人人商城小程序订阅消息设置方法和几个坑!...

    操作步骤 第一步 开通订阅消息功能 登录微信小程序官网后台 mp weixin qq com 开通订阅消息 第二步 服务类目 新增 商家自营 gt 服装 鞋 箱包 第三步 添加订阅消息 4个 订阅消息 公共模板库 搜索 订单支付成功通知 编
  • Android仿小米商城底部导航栏(基于BottomNavigationBar)

    简介 现在大多数App都会用到底部导航栏 比如QQ 微信和购物App等等 有了底部导航栏 用户可以随时切换界面 查看不同的内容 Android底部导航栏的实现方式特别多 例如TabHost TabLayout 或者TextView等 都可以