【Material-BottomNavigation】Android炫酷的底部切换效果V3

如果本文帮助到你,本人不胜荣幸,如果浪费了你的时间,本人深感抱歉。 希望用最简单的大白话来帮助那些像我一样的人。如果有什么错误,请一定指出,以免误导大家、也误导我。 本文来自:https://lylyl.cn/ 感谢您的关注。

之前的 BottomBar 两个版本作者都不维护了,然而又出现了一个新的库,效果也是跟之前一样的。 再来看看怎么集成。

先看效果:

4个移动项目菜单3个固定项目菜单
Video 1Video 2
4项不改变背景平板电脑模式
Video 3Tablet Mode

使用说明:

添加依赖

compile 'it.sephiroth.android.library.bottomnavigation:bottom-navigation:3.0.0'

用法

添加布局:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CoordinatorLayout01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    ...your content...

    <it.sephiroth.android.library.bottomnavigation.BottomNavigation
        android:id="@+id/BottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:bbn_entries="@menu/bottombar_menu_4items"
        app:bbn_scrollEnabled="true"
        app:bbn_badgeProvider="@string/bbn_badgeProvider"
        app:layout_behavior="@string/bbn_phone_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

所有菜单都定义在menu资源文件中,在 res 目录下创建一个 menu/menu_main.xml,这里是一个定义了4个菜单元素的例子:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/black"
    app:bbn_badgeColor="#FFFF0000"
    app:bbn_rippleColor="#33ffffff">
    <item
        android:id="@+id/bbn_item1"
        android:color="@color/colorPrimary"
        android:icon="@drawable/ic_cloud_off_white_24dp"
        android:title="Cloud Sync" />
    <item
        android:id="@+id/bbn_item2"
        android:color="@android:color/holo_green_dark"
        android:icon="@drawable/ic_cast_connected_white_24dp"
        android:title="Chromecast" />
    <item
        android:id="@+id/bbn_item3"
        android:color="@android:color/holo_orange_dark"
        android:icon="@drawable/ic_mail_white_24dp"
        android:title="Mail" />
    <item
        android:id="@+id/action4"
        android:color="#FF5252"
        android:icon="@drawable/ic_format_list_numbered_white_24dp"
        android:title="List" />
</menu>

平板模式

支持平板模式,要启用平板模式,需要这样设置:

<it.sephiroth.android.library.bottomnavigation.BottomNavigation
    android:id="@+id/BottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    app:bbn_entries="@menu/bottombar_menu_3items"
    app:bbn_badgeProvider="@string/bbn_badgeProvider"
    app:layout_behavior="@string/bbn_tablet_view_behavior" />

样式设置

xml menu支持如下属性:

<declare-styleable name="BottomNavigationMenu">
    <!-- 菜单默认背景颜色 -->
    <attr name="android:background" />
    
    <!-- 默认徽章颜色 -->
    <attr name="bbn_badgeColor" format="color" />

    <!-- 菜单项的动画持续时间 -->
    <attr name="bbn_itemAnimationDuration" format="integer" />

    <!-- 纹波选择器颜色 -->
    <attr name="bbn_rippleColor" format="color" />

    <!-- 菜单项有效颜色 -->
    <attr name="bbn_itemColorActive" format="color" />

    <!-- 菜单项无效颜色 -->
    <attr name="bbn_itemColorInactive" format="color" />

    <!-- 菜单项禁用颜色 -->
    <attr name="bbn_itemColorDisabled" format="color" />

    <!-- 强制修复行为并始终显示项目标签 -->
    <!-- 默认实现为false,标签为 仅在菜单中少于4个项目时显示 -->
    <attr name="bbn_alwaysShowLabels" format="boolean" />
</declare-styleable>

注意:默认情况下,当有4个或5个元素时,只有选定的项目会显示标签。为了强制所有项目始终显示其标签,请bbn_alwaysShowLabels在菜单xml中使用。

Badges 小红点设置

默认有对badges的基本支持。我为了在BottomNavigation上显示badge,你只需:

final BadgeProvider provider = bottomNavigationView.getBadgeProvider();
provider.show(R.id.bbn_item3);

这段代码将在id为"bbn_item3"的菜单上显示一个圆形badge。

你可以在menu xml中定义默认的badge颜色:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:bbn_badgeColor="#FFFF0000">
    
    <item
        android:id="@+id/bbn_item1"
        android:color="@color/colorPrimary"
        android:icon="@drawable/ic_cloud_off_white_24dp"
        android:title="Cloud Sync" />
        
    ...
</menu>

要隐藏badge,使用:

bottomNavigation.getBadgeProvider().remove(R.id.bbn_item3);
Badge自定义

你可以通过继承BadgeProvider类来使用自己的Drawable 。一旦设置好了这个类你就可以告诉BottomNavigation通过在xml中指定"bbn_badgeProvider" 属性的值来使用这个类。

<it.sephiroth.android.library.bottomnavigation.BottomNavigation
    android:id="@id/BottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="bottom"
    app:bbn_badgeProvider="my.custom.BadgeProviderCustom"
    app:bbn_entries="@menu/bottombar_menu_4items"
    app:layout_behavior="@string/bbn_phone_view_behavior" />

这让你的 my.custom.BadgeProviderCustom成为默认的BadgeProvider。

0评论