BottomNavigationBar
路是一步一步走出来的,全家桶是一点点吃完的
Android Material Design的底部导航控制,我了解这个控件是因为这几天突然对知乎的底部导航栏感到好奇(知乎的客户端太好用),就通过度娘了解到了这个控件。所以今天就试着去了解它,也希望自己以后的应用可以符合MD设计风格,更规范,更具美感。
果果说:
Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. 底部导航栏让我们可以更轻松的在几个顶层的视图间进行选择和查看
Three to five top-level destinations of similar importance (Alternative: A persistent navigation drawer accessible from anywhere in the app) 推荐使用3 - 5个页面切换
效果展示
使用方法
BottomNavigationBar的下载地址
https://github.com/Ashok-Varma/BottomNavigation
Add Dependencies
方法一:AS下使用
import module
导入module,并add dependencies方法二:在Gradle中直接添加依赖
compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
添加依赖中可能出现的问题
方法一可能出现的问题:
Error:(16, 0) Could not find property 'APP_VERSION_NAME' on project ':bottom-navigation-bar'.
open file后发现libraryVersion = project.APP_VERSION_NAME
中project.APP_VERSION_NAME
这个值并没有被声明,所以我们需要在project的gradle.properties
中声明没有的属性。打开开源项目的gradle.properties
文件,我们发现:复制这段代码到project的
gradle.properties
文件中,并根据项目情况修改特定的值。方其他可能会出现的问题:
Error:(2, 0) Plugin with id 'com.github.dcendents.android-maven' not found
.解决办法:点我
这样我们就可以在项目中使用BottomNavigationBar了。
代码书写
在布局文件中声明一个BottomNavigationBar
并在Activity中获取XML中的BottomNavigationBar
添加BottomNavigationItem
一个添加BottomNavigationItem就是一个底部导航Item:
其中:addItem()参数1表示导航按钮的图片资源,参数2代表导航按钮的名称
添加对Tab的监听
BottomNavigationBar的几种效果
设置导航栏模式:
java: setMode()
:MODE_DEFAULT
,MODE_FIXED
,MODE_SHIFTING
xml属性:bnbMode
:mode_default
,mode_fixed
,mode_shifting
注意,mode需要在添加BottomNavigationItem之前进行设置,否则设置无效
设置导航栏背景样式
java:setBackgroundStyle()
:BACKGROUND_STYLE_DEFAULT
,BACKGROUND_STYLE_STATIC
,BACKGROUND_STYLE_RIPPLE
xml属性:bnbBackgroundStyle
:background_style_default
, background_style_static
,background_style_riple
BottomNavigationBar的颜色
java:
xml属性: bubActvieColor
,bubBackgroundColor
,bnbInactiveColor
Default Color:
Theme’s Primary Color will be active color.
Color.LTGRAY will be in-active color.
Color.WHITE will be background color.
添加Badge
最后更新于