----邮箱验证没有收到邮件?注意:在您的邮箱的垃圾箱或垃圾邮件内找到邮件!!!(验证成功可使用邮箱登录)点击查看详情----
----温馨提醒:请及时验证邮箱以便于忘记密码时找回!!!----

查看: 417|回复: 3

[Android代码分享] Kongzue Tabbar 一款简单的底部导航栏组件

[复制链接]

3190

主题

3661

帖子

5万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
57657

热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 2019-7-9 15:35:48 | 显示全部楼层 |阅读模式
Kongzue Tabbar
Kongzue Tabbar是一款简单的底部导航栏组件,仅需要简单配置即可满足绝大多数需要使用导航栏的场景。

Demo预览图如下:
优势
  • 无需两份图!每个 TabIcon 仅需一份颜色的图即可,Tabbar 会根据您设置的颜色自动叠加颜色!
  • 易于上手,快速创建,满足绝大多数导航栏使用场景。
  • 简单的方式就可以实现未读角标提醒。


使用方法
  • 从 Maven 仓库或 jCenter 引入: Maven仓库:
[HTML] 纯文本查看 复制代码
<dependency>
  <groupId>com.kongzue.tabbar</groupId>
  <artifactId>tabbar</artifactId>
  <version>1.5.4</version>
  <type>pom</type>
</dependency>
Gradle: 在dependencies{}中添加引用:
[Java] 纯文本查看 复制代码
implementation 'com.kongzue.tabbar:tabbar:1.5.4'
  • 从XML布局文件创建:
[XML] 纯文本查看 复制代码
<com.kongzue.tabbar.TabBarView xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tabbar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    app:focusColor="#3e78ed"
    app:iconPadding="2dp"
    app:normalColor="#606060"
    app:textSize="12dp"
    app:tabPaddingVertical="5dp"
    app:paddingNavigationBar="false"/>
其中各属性解释如下:
字段含义默认值
focusColor处于焦点状态的颜色#3e78ed
normalColor处于普通状态的颜色#606060
iconPadding图标内边距5dp
textSize文本字号12dp
tabPaddingVerticaltab按钮上下内边距5dp
tabClickBackgroundtab按钮按下效果ripple
paddingNavigationBar是否开启底部导航栏沉浸式false
noDyeing禁止染色false
noSelect禁止选择false
splitLine分隔线resId
unreadBackground未读消息小红点背景resId
也可通过set方法设置:
[Java] 纯文本查看 复制代码
tabbar = findViewById(R.id.tabbar);

tabbar.setFocusColor(Color.rgb(62, 120, 238));                              //处于焦点状态的颜色
tabbar.setNormalColor(Color.rgb(96, 96, 96));                               //处于普通状态的颜色
tabbar.setTextSize(dp2px(12));                                              //文本字号
tabbar.setIconPadding(dp2px(5));                                            //图标内边距
tabbar.setTabPaddingVertical(dp2px(5));                                     //tab按钮上下内边距
tabbar.setTabClickBackground(TabBarView.TabClickBackgroundValue.RIPPLE);    //tab按钮按下效果

//从 1.4 版本起,新增两个新的选项:
tabbar.setNoSelect(false);                                                  //是否禁止选择效果
tabbar.setNoDyeing(false);                                                  //是否禁止颜色渲染
  • 创建Tab:
首先需要创建一个 List 用来存放Tab数据:
[Java] 纯文本查看 复制代码
List<Tab> tabs = new ArrayList<>();
tabs.add(new Tab(this, "首页", R.mipmap.img_maintab_home));
tabs.add(new Tab(this, "联系人", R.mipmap.img_maintab_contacts));
tabs.add(new Tab(this, "我的", R.mipmap.img_maintab_me));
然后将它们设置到 Tabbar 即可:
[Java] 纯文本查看 复制代码
tabbar.setTab(tabs);
完成!
额外的说明Tab 的创建(构造)方式
Tab 支持多种构建方式:
[Java] 纯文本查看 复制代码
new Tab(this, "首页", R.mipmap.img_maintab_home)      //使用资源文件创建
new Tab("首页", bitmap);                              //使用 Bitmap 位图创建
new Tab("首页", drawable);                            //使用 drawable 创建
Tab 亦支持 get、set 方法,可以通过他们设置属性值。
其次,关于 Tab 字段的说明:
字段含义是否必须
nameTab 标签名称
iconTab 图标
按钮点击监听
可通过以下代码设置监听
[Java] 纯文本查看 复制代码
tabbar.setOnTabChangeListener(new OnTabChangeListener() {
    @Override
    public void onTabChanged(int index) {
        Log.i(">>>", "onTabChanged: " + index);
    }
})
其中,index 即当前点击了哪个按钮的索引号。
设置默认焦点按钮:
可通过以下代码设置设置默认焦点按钮:
[Java] 纯文本查看 复制代码
tabbar.setNormalFocusIndex(index);
其中,index 即要设置为焦点的按钮的索引号。
当前提供三种 Tab 按钮按下效果:
字段含义是否默认
ripple默认矩形水波纹效果
rippleOutside外弧形水波纹效果
gray纯灰色
具体表现效果如下:
关于沉浸式
当您设置开启沉浸式时可能会出现 Tabbar 被底部按键导航栏(NavigationBar)遮挡的问题,此时开启 paddingNavigationBar 即可解决此问题。设置方法为:
在XML布局中:
[XML] 纯文本查看 复制代码
app:paddingNavigationBar = "true"
开启后,Tabbar会自动设置一段 paddingBottom 边距以适应底栏高度。
启用未读角标
在您创建一个Tab的时候,可以为其设置角标。
例如:
[Java] 纯文本查看 复制代码
new Tab(this, "联系人", R.mipmap.img_maintab_contacts).setUnreadNum(123).setMaxUnreadNum(99);
其中,UnreadNum 为角标数字,值为 0 时隐藏角标,为负数时不显示数字只显示一个红点,当 UnreadNum 超过 MaxUnreadNum 的值时会显示为 MaxUnreadNum+,例如上边的示例会显示为“99+”
也可通过代码动态设置未读数量角标:
[Java] 纯文本查看 复制代码
//参数:(第几个Tab, 未读数量)
tabbar.setUnreadNum(2, 123);
//备注:可通过设置未读数量为 0 来清除角标。
禁用选择和禁用染色
1.4 版本起,新增了禁止选择(noSelect)和禁止颜色渲染(noDyeing)的选项,其目的是使 Tabbar 能够有更为广泛的应用场景,其中典型的场景为电商的分类选择,如下图所示:
您可以通过 XML 布局文件中直接设置这些属性:
[XML] 纯文本查看 复制代码
<com.kongzue.tabbar.TabBarView
    android:id="@+id/selectTabbar"
    android:layout_width="match_parent"
    android:layout_height="65dp"
    app:iconPadding="2dp"
    app:noDyeing="true"
    app:noSelect="true"
    app:normalColor="#606060"
    app:paddingNavigationBar="false"
    app:tabClickBackground="empty"
    app:tabPaddingVertical="5dp"
    app:textSize="12dp" />
也可以通过代码设置:
[Java] 纯文本查看 复制代码
tabbar.setNoSelect(false);
tabbar.setNoDyeing(false);
二套图支持
若您的设计师提供了两套完全不一样的 Tab 图标,即选中状态下显示的图标和非选中时显示的图标完全不同,不可以通过一套图染色的方式实现,可参考本章节提供的方法:
首先,在 XML 中创造布局:
[XML] 纯文本查看 复制代码
<com.kongzue.tabbar.TabBarView
    android:id="@+id/tabTwoType"
    android:layout_width="match_parent"
    android:layout_height="58dp"
    app:focusColor="#f14961"                        ← 此处为选中时文字的颜色
    app:iconPadding="2dp"
    app:normalColor="#a2a2a2"                       ← 此处为非选中时文字的颜色
    android:background="#fff"
    app:noDyeing="true"                             ← 设置为图标非染色模式
    app:paddingNavigationBar="false"
    app:tabClickBackground="ripple"
    app:tabPaddingVertical="3dp"
    app:textSize="12dp" />
接下来在代码中为 Tabbar 添加内容:
[Java] 纯文本查看 复制代码
List<Tab> tabs2 = new ArrayList<>();
tabs2.add(new Tab(this, "首页", R.mipmap.tab2_home_off).setFocusIcon(this,R.mipmap.tab2_home_on));            //使用 setFocusIcon(bitmap/drawable/resId) 来添加选中时的第二套图标
tabs2.add(new Tab(this, "消息", R.mipmap.tab2_message_off).setFocusIcon(this,R.mipmap.tab2_message_on);
tabs2.add(new Tab(this, "我的", R.mipmap.tab2_me_off).setFocusIcon(this,R.mipmap.tab2_me_on));
tabTwoType.setTab(tabs2);
完成!
分隔线
从 1.5.3 版本起支持了分割线功能,可设置属性来启用:
[XML] 纯文本查看 复制代码
app:splitLine="@drawable/split_line"
如果只需要颜色来填充分隔线,可以在属性中引用您的颜色,注意不可以设置16进制的颜色值,只能引用属性设置:
[XML] 纯文本查看 复制代码
app:splitLine="@color/colorAccent"
若您需要制作一个上下有间距的分隔线,可以创建一个 drawable 的 XML 文件,以下是范例 split_line.xml:
[XML] 纯文本查看 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetTop="5dp"
    android:insetBottom="5dp"
    android:drawable="@color/colorAccent">
</inset>
完成效果如图所示:

项目代码:
1.下载zip包:
2.项目地址:
游客,如果您要查看本帖隐藏内容请回复
3.项目下载:
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名称: 一款简单的底部导航栏组件  

下载次数:0    下载所需积分:0 秀币
下载权限: 新手上路 以上或 [VIP会员]   [购买VIP]   [会员等级]  [免费领秀币]


关注 秀源码 微信公众号 !!

每日不间断的 推送好的文章与源码!

彩蛋:关注后回复“面试资料”,将获得价值399元的BAT大牛面试解密资料


Android秀源码  做最大移动免费社区-郭杰
回复

使用道具 举报

0

主题

11

帖子

43

积分

新手上路

Rank: 1

积分
43
发表于 2019-7-24 12:31:56 | 显示全部楼层
支持秀源码、支持楼主ing……
回复 支持 反对

使用道具 举报

0

主题

35

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2019-7-30 11:52:48 | 显示全部楼层
门童网.www.mentongwang.com,免费各种源码下载  只是探讨学习,QQ群972275425   也可以帮助解决个中小问题 搭建不同源码
回复 支持 反对

使用道具 举报

0

主题

35

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2019-7-30 11:56:00 | 显示全部楼层
门童网.www.mentongwang.com,免费各种源码下载  只是探讨学习,QQ群972275425   也可以帮助解决个中小问题 搭建不同源码
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 欢迎注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表