美文网首页
一个方便简易的 Tabbar 组件

一个方便简易的 Tabbar 组件

作者: kongzue | 来源:发表于2018-09-28 17:54 被阅读167次

Kongzue Tabbar

Kongzue Tabbar是一款简单的底部导航栏组件,仅需要简单配置即可满足绝大多数需要使用导航栏的场景。

Github: https://github.com/kongzue/Tabbar

info

Demo预览图如下:

Tabbar

优势

  • 无需两份图!每个 TabIcon 仅需一份颜色的图即可,Tabbar 会根据您设置的颜色自动叠加颜色!

  • 易于上手,快速创建,满足绝大多数导航栏使用场景。

使用方法

  1. 从 Maven 仓库或 jCenter 引入:
    Maven仓库:
<dependency>
  <groupId>com.kongzue.tabbar</groupId>
  <artifactId>tabbar</artifactId>
  <version>1.0</version>
  <type>pom</type>
</dependency>

Gradle:
在dependencies{}中添加引用:

implementation 'com.kongzue.tabbar:tabbar:1.0'
  1. 从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"/>

其中各属性解释如下:

字段 含义 默认值
focusColor 处于焦点状态的颜色 #3e78ed
normalColor 处于普通状态的颜色 #606060
iconPadding 图标内边距 5dp
textSize 文本字号 12dp
tabPaddingVertical tab按钮上下内边距 5dp

也可通过set方法设置:

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按钮上下内边距
  1. 创建Tab:

首先需要创建一个 List<Tab> 用来存放Tab数据:

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 即可:

tabbar.setTab(tabs);

完成!

额外的说明

  1. Tab 的创建(构造)方式

Tab 支持多种构建方式:

new Tab(this, "首页", R.mipmap.img_maintab_home)      //使用资源文件创建
new Tab("首页", bitmap);                              //使用 Bitmap 位图创建
new Tab("首页", drawable);                            //使用 drawable 创建

Tab 亦支持 get、set 方法,可以通过他们设置属性值。

其次,关于 Tab 字段的说明:

字段 含义 是否必须
name Tab 标签名称
icon Tab 图标
  1. 按钮点击监听

可通过以下代码设置监听

tabbar.setOnTabChangeListener(new OnTabChangeListener() {
    @Override
    public void onTabChanged(int index) {
        Log.i(">>>", "onTabChanged: " + index);
    }
})

其中,index 即当前点击了哪个按钮的索引号。

  1. 设置默认焦点按钮:

可通过以下代码设置设置默认焦点按钮:

tabbar.setNormalFocusIndex(index);

其中,index 即要设置为焦点的按钮的索引号。

开源协议

Copyright Tabbar

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

相关文章

  • 一个方便简易的 Tabbar 组件

    Kongzue Tabbar Kongzue Tabbar是一款简单的底部导航栏组件,仅需要简单配置即可满足绝大多...

  • uniapp自定义tabbar

    App.vue中隐藏系统tabbar 创建tabbar组件 页面引用tabbar组件

  • 小程序-自定义tabbar

    新建组件 tabbar.wxml tabbar.wxss tabbar.js tabbar.json app.js...

  • React项目实战二

    1, 实现tabBar 1,使用步骤1,打开antd-mobile组件中的TabBar组件的文档[https://...

  • 封装tabbar栏

    一共4个tabbar栏这里省略... 子组件: tabbar.vue 子组件可以使用 $emit 触发父组件的自定...

  • 微信小程序自定义tabBar的使用

    微信提供了两个导航组件,一个是Navigation,另外一个是Tabbar。 现在来讲一下Tabbar的自定义组件...

  • 底部TabBar

    组件分解 页面显示组件:Scaffold底部Tabbar组件:BottomNavigationBar底部Tabba...

  • 微信小程序之首页

    1.底部导航栏写法一:组件tabbar tabbar组件api 在app.json文件中加入以下代码,"color...

  • npm 打包组件库

    为了方便代码公用,打造简易组件库,下面写的教大家打包到发布,基于react 初始化项目 mkdir compone...

  • tabBar组件

    一. 全局配置 我们可以通过对项目根目录下的app.json文件实现对微信小程序的全局配置,该文件的内容是一个Js...

网友评论

      本文标题:一个方便简易的 Tabbar 组件

      本文链接:https://www.haomeiwen.com/subject/xwgpoftx.html