首页>编程相关>JAVA源码
下载

动画底栏





可定制且易于使用的 BottomBar 导航视图，具有流畅的动画，支持 ViewPager、ViewPager2、NavController 和徽章。

通过乔里·滴珀斯

截图

游乐场应用程序

从 Google Play 下载 Playground 应用程序，通过此应用程序，您可以尝试所有功能，甚至可以使用您选择的配置生成 XML。

内容

  • 入门
  • 管理选项卡
  • 与 ViewPager 一起使用
  • 配置

入门

该库可在 Maven Central 上找到，通过将以下依赖项添加到build.gradle来安装它： 

implementation ' nl.joery.animatedbottombar:library:1.1.0 '

版本 1.0.x 只能与 jCenter 一起使用，版本 1.1.x 及更高版本可以与 Maven Central 一起使用。

使用自定义属性在 XML 布局中定义AnimatedBottomBar 。 

< nl .joery.animatedbottombar.AnimatedBottomBar
    android : id = " @+id/bottom_bar "
    android : background = " #FFF "
    android : layout_width = " match_parent "
    android : layout_height = " wrap_content "
    app : abb_selectedTabType = " text "
    app : abb_indicatorAppearance = " round "
    app : abb_indicatorMargin = " 16dp "
    app : abb_indicatorHeight = " 4dp "
    app : abb_tabs = " @menu/tabs "
    app : abb_selectedIndex = " 1 " />

在res/menu/ resources 文件夹中创建一个名为tabs.xml的文件： 

< menu xmlns : android = " http://schemas.android.com/apk/res/android " >
    < item
        android : id = " @+id/tab_home "
        android : icon = " @drawable/home "
        android : title = " @string/home " />
    < item
        android : id = " @+id/tab_alarm "
        android : icon = " @drawable/alarm "
        android : title = " @string/alarm " />
    < item
        android : id = " @+id/tab_bread "
        android : icon = " @drawable/bread "
        android : title = " @string/bread " />
    < item
        android : id = " @+id/tab_cart "
        android : icon = " @drawable/cart "
        android : title = " @string/cart " />
</ menu >

通过设置回调在选定选项卡发生更改时收到通知： 

bottom_bar.onTabSelected = {
    Log .d( " bottom_bar " , " Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
    Log .d( " bottom_bar " , " Reselected tab: " + it.title)
}

或者如果您需要更详细的信息，请设置侦听器： 

bottom_bar.setOnTabSelectListener( object : AnimatedBottomBar . OnTabSelectListener {
    override fun onTabSelected (
        lastIndex : Int ,
        lastTab : AnimatedBottomBar . Tab ? ,
        newIndex : Int ,
        newTab : AnimatedBottomBar . Tab
    ) {
        Log .d( " bottom_bar " , " Selected index: $newIndex , title: ${newTab.title} " )
    }

    // An optional method that will be fired whenever an already selected tab has been selected again.
    override fun onTabReselected ( index : Int , tab : AnimatedBottomBar . Tab ) {
        Log .d( " bottom_bar " , " Reselected index: $index , title: ${tab.title} " )
    }
})

管理选项卡

关于如何使用代码管理选项卡的简短概述。

创建新选项卡

 // Creating a tab by passing values
val bottomBarTab1 = AnimatedBottomBar .createTab(drawable, " Tab 1 " )

// Creating a tab by passing resources
val bottomBarTab2 = AnimatedBottomBar .createTab( R .drawable.ic_home, R .string.tab_2, R .id.tab_home)

添加新选项卡

 // Adding a tab at the end
AnimatedBottomBar .addTab(bottomBarTab1)

// Add a tab at a specific position
AnimatedBottomBar .addTabAt( 1 , bottomBarTab2)

删除标签

 // Removing a tab by object reference
val tabToRemove = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .removeTab(tabToRemove)

// Removing a tab at a specific position
AnimatedBottomBar .removeTabAt(tabPosition)

// Removing a tab by the given ID resource
AnimatedBottomBar .removeTabById( R .id.tab_home)

选择选项卡

 // Selecting a tab by object reference
val tabToSelect = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .selectTab(tabToSelect)

// Selecting a tab at a specific position
AnimatedBottomBar .selectTabAt( 1 )

// Selecting a tab by the given ID resource
AnimatedBottomBar .selectTabById( R .id.tab_home)

启用/禁用选项卡

 // Disabling a tab by object reference
val tabToDisable = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setTabEnabled(tabToDisable, false ) // Use true for re-enabling the tab

// Disabling a tab at a specific position
AnimatedBottomBar .setTabEnabledAt( 1 , false )

// Disabling a tab by the given ID resource
AnimatedBottomBar .setTabEnabledById( R .id.tab_home, false )

拦截标签

这对于限制对高级区域的访问可能很有用。您可以使用回调或更详细的侦听器： 

bottom_bar.onTabIntercepted = {
    if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
        // e.g. show a dialog
        false
    }
    true
}

详细监听器： 

bottom_bar.setOnTabInterceptListener( object : AnimatedBottomBar . OnTabInterceptListener {
    override fun onTabIntercepted (
        lastIndex : Int ,
        lastTab : AnimatedBottomBar . Tab ? ,
        newIndex : Int ,
        newTab : AnimatedBottomBar . Tab
    ): Boolean {
        if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
            // e.g. show a dialog
            return false
        }
        return true
    }
})

标签徽章

有关如何为选项卡设置徽章的说明，应向 BottomBar 提供AnimatedBottomBar.Badge对象，请注意，也可以添加不带文本的徽章。

添加徽章

 // Adding a badge by tab reference
val tabToAddBadgeAt = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar . Badge ( " 99 " ))

// Adding a badge at a specific position
AnimatedBottomBar .setBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))

// Adding a badge at the given ID resource
AnimatedBottomBar .setBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " ))

移除徽章

 // Removing a badge by tab reference
val tabToRemoveBadgeFrom = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .clearBadgeAtTab(tabToRemoveBadgeFrom)

// Removing a badge at a specific position
AnimatedBottomBar .clearBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))

// removing a badge at the given ID resource
AnimatedBottomBar .clearBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " ))

设计个人徽章

此外，还可以对徽章进行单独设计。 

 AnimatedBottomBar . Badge (
    text = " 99 " ,
    backgroundColor = Color . RED ,
    textColor = Color . GREEN ,
    textSize =  12 .spPx // in pixels
)

与 ViewPager 一起使用

将 BottomBar 与 ViewPager 或 ViewPager2 一起使用很容易，您只需使用setupWithViewPager()方法即可。请注意，选项卡和 ViewPager 页面的数量必须相同才能正常运行。

用法

 // For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager)

// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2)

配置

所有配置选项的概述。所有选项也可以通过其等效名称以编程方式访问和设置。

选项卡

属性描述默认
abb_选项卡选项卡可以在res/menu/ resource 文件夹中的菜单文件（菜单资源）中定义。

图标和标题属性是必需的。默认情况下，所有选项卡均已启用，将android:enabled设置为false以禁用选项卡。 
< menu xmlns : android = " http://schemas.android.com/apk/res/android " >
    < item
        android : id = " @+id/tab_example "
        android : icon = " @drawable/ic_example "
        android : title = " @string/tab_example "
        android : enabled = " true|false " />
    ...etc
</ menu >
abb_selectedIndex 索引定义默认选定的选项卡索引。
abb_selectedTabId通过 ID 定义默认选定的选项卡，例如@id/tab_id

选项卡外观

属性描述默认
abb_selectedTab类型确定选择选项卡时是否应显示图标或文本。

图标

文本

图标
abb_tab颜色未选择选项卡时图标或文本的颜色。 @color/textColorPrimary
abb_tabColor选择选择选项卡时图标或文本的颜色。 @颜色/colorPrimary
abb_tabColorDisabled禁用选项卡时图标或文本的颜色。 @color/textColorSecondary
abb_text外观自定义选项卡中文本的外观和风格，下面是自定义文本外观的示例。

在res/values/styles.xml中定义新样式： 
< style name = " CustomText " >
    < item name = " android:textAllCaps " >true</ item >
    < item name = " android:fontFamily " >serif</ item >
    < item name = " android:textSize " >16sp</ item >
    < item name = " android:textStyle " >italic|bold</ item >
</ style >
abb_textStyle文本的样式（正常、粗体、斜体、粗体|斜体）。

使用bottom_bar.typeface以编程方式设置文本样式。		普通的
abb_textSize文字的大小。建议的文本尺寸类型为“sp”（缩放像素），例如：14sp。 14sp
abb_iconSize增大或减小图标的大小。 24dp
abb_rippleEnabled选择选项卡时启用“波纹”效果。

错误的
abb_rippleColor更改上述波纹效果的颜色。默认主题颜色

徽章

属性描述默认
abb_badge背景颜色徽章的背景颜色。 #ff0c10（红色）
abb_badgeTextColor徽章内文本的文本颜色。 #FFFFFF
abb_badgeTextSize徽章内文本的文本大小。建议的文本尺寸类型为“sp”（缩放像素），例如：14sp。 10sp
abb_badge动画徽章的进入和退出动画类型。

没有任何
规模
褪色
规模
abb_badgeAnimationDuration徽章进入和退出动画的持续时间。 150

动画

属性描述默认
abb_animationDuration所有动画的持续时间，包括指示器动画。 400
abb_tab动画未选中的选项卡的进入和退出动画样式。

没有任何

滑动

褪色

褪色
abb_tab动画选择所选选项卡的进入和退出动画样式。

没有任何

滑动

褪色

滑动
abb_animationInterpolator用于所有动画的插值器。

有关可用插值器的更多信息，请参阅“Android 插值器：视觉指南”。

示例值： @android:anim/overshoot_interpolator
FastOutSlowIn插值器

指标

属性描述默认
abb_indicator颜色指示器的颜色。 @android/colorPrimary
abb_indicator高度指示器的高度。 3dp
abb_indicatorMargin指标的水平边距。这决定了指示器的宽度。 0dp
abb_indicator外观将指示器的形状配置为方形或圆形。

无形的

正方形

圆形的

正方形
abb_indicator位置配置所选选项卡指示器的位置：顶部、底部或不可见。

顶部

底部

顶部
abb_indicator动画更改所选选项卡时指示器的动画类型。

没有任何


滑动

褪色
滑动

精选于

  • Android 周刊：第 404 期
  • Medium：2020 年 25 个最佳 Android 库和项目
  • 媒体：2020 年第一季度最热门的 5 个 Android 库

制作人员

  • 运球：可读标签栏

执照

 MIT License

Copyright (c) 2021 Joery Droppers (https://github.com/Droppers)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
展开
附加信息
相关应用
为您推荐
相关资讯 全部