# bottombar

**Repository Path**: wuyiw/bottombar

## Basic Information

- **Project Name**: bottombar
- **Description**: 鸿蒙自定义底部栏tabbar(bottom tabbar for harmonyos)
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-04
- **Last Updated**: 2022-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bottombar

#### 介绍
鸿蒙自定义底部栏tabbar(bottom tabbar for harmonyos)

#### 软件架构
多样动态配置tab的大小和颜色等样式。如：可以单独设置成只有图标或文字。

![截图](screenshop/eg.jpg)


#### 安装教程

1.  在项目根目录的build.gradle添加中央仓库
```groovy
repositories {
    //...
    mavenCentral()
}
```
2.  在module（如：entry）的build.gradle引用
```groovy
dependencies {
    //...
    implementation 'io.gitee.qincji:bottombar:1.0.1'
}
```

#### 使用说明

1.布局中添加
```xml
 <com.qincji.bottombar.TabBar
    ohos:id="$+id:tab_bar"
    ohos:height="56vp"
    ohos:width="match_parent"
    ohos:align_parent_bottom="true"
    ohos:alignment="vertical_center"
    ohos:end_padding="24vp"
    ohos:start_padding="24vp"/>
```

2.代码中（AbilitySlice）调用
```java
TabBar tabBar = (TabBar) findComponentById(ResourceTable.Id_tab_bar);
TabItem homeTab = new TabItem()
        .imgNormalId(ResourceTable.Graphic_tab_home_normal)
        .imgActiveId(ResourceTable.Graphic_tab_home_actived)
        .desc("首页");
TabItem otherTab = new TabItem()//只显示文字;  并且设置该文字控件的属性
        .desc("其他")
        .textActiveColor(new Color(getColor(ResourceTable.Color_tab_other_1)))
        .textSize(TabUtils.vp2px(getContext(), 25));
TabItem myTab = new TabItem()//只显示图片;  并且设置该图片控件的属性
        .imgNormalId(ResourceTable.Graphic_tab_my_normal)
        .imgActiveId(ResourceTable.Graphic_tab_my_actived)
        .imgWidth(TabUtils.vp2px(getContext(), 35))
        .imgHeight(TabUtils.vp2px(getContext(), 35));
tabBar.init(homeTab, otherTab, myTab)//必须调用初始化
        .setOnTabBarClickListener((tab, layout, item) -> {//设置监听
            //txtShow.setText("底部栏:" + tab);
        })//以下为公共属性
        .setTextNormalColor(new Color(getColor(ResourceTable.Color_tab_normal_1)))
        .setTextActiveColor(new Color(getColor(ResourceTable.Color_primary_1)))
        .create();
```

3.更多配置请自己尝试不同的调用方式（非常简单），或看源码（很简洁）。