# ohos-navigation-bar

**Repository Path**: chinasoft4_ohos/ohos-navigation-bar

## Basic Information

- **Project Name**: ohos-navigation-bar
- **Description**: 可定制的导航栏，实现导航栏内容自定义显示，可以添加徽章显示，可以显示或隐藏导航栏
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 3
- **Created**: 2021-06-28
- **Last Updated**: 2022-09-22

## Categories & Tags

**Categories**: harmonyos-menu

**Tags**: None

## README

# ohos-navigation-bar

#### 项目介绍

- 项目名称：ohos-navigation-bar
- 所属系列：openharmony的第三方组件适配移植
- 功能：可定制的导航栏，实现导航栏内容自定义显示，可以添加徽章显示，可以显示或隐藏导航栏。
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本：Release 1.0

#### 效果演示

<img src="gif/navigationbar_demo.gif"></img>

#### 安装教程

1.在项目根目录下的build.gradle文件中，
 ```
 allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
 }
 ```
2.在entry模块的build.gradle文件中，
 ```
 dependencies {
    implementation('com.gitee.chinasoft_ohos:ohos-navigation-bar:1.0.0')
    ......  
 }
 ```

在sdk6，DevEco Studio 2.2 Beta1下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

#### 使用说明

1、在 XML 文件中添加以下代码

```
<com.flarebit.flarebarlib.FlareBar
    ohos:id="$+id:bottomBar"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:align_parent_bottom="true"
    ohos:layout_alignment="bottom"/>
```

2、将代码添加到 java 文件中

为每个选项卡创建 FlareTab 类的对象。创建flaretab对象的arraylist。并调用Flarebar 对象的setTabList(ArrayList)方法。

```
FlareBar bottomBar = (FlareBar) findComponentById(ResourceTable.Id_bottomBar);
    bottomBar.setBarBackgroundColor(Color.getIntColor("#FFFFFFFF"));
    ArrayList<Flaretab> tabs = new ArrayList<>();
    tabs.add(new Flaretab(getElement(ResourceTable.Media_inboxb), "Inbox", "#FFFFECB3"));
    tabs.add(new Flaretab(getElement(ResourceTable.Media_searchb), "Search", "#FF80DEEA"));
    tabs.add(new Flaretab(getElement(ResourceTable.Media_phoneb), "Call Log", "#FFB39DDB"));
    tabs.add(new Flaretab(getElement(ResourceTable.Media_avatarb), "Profile", "#FFEF9A9A", "4"));
    tabs.add(new Flaretab(getElement(ResourceTable.Media_settingsb), "Settings", "#FFB2DFDB"));
    bottomBar.setTabList(tabs);
    bottomBar.attachTabs(getContext());
```
3、侦听器在选项卡更改时收到通知

```
bottomBar.setTabChangedListener(new TabEventObject.TabChangedListener() {
    @Override
    public void onTabChanged(DirectionalLayout selectedTab, int selectedIndex, int oldIndex) {
       // 页面显示操作
    }
});
```
**FlareTab 对象的可用构造函数**

```
Flaretab(Element tabImage, String tabText, String tabColorString)
Flaretab(Element tabImage, String tabText, String tabColorString, String badge)
```
参数说明：

（1）tabImage：显示为标签图标的可绘制文件。

（2）tabText ：在选项卡上显示为文本的字符串。

（3）tabColorString : 选择tab时显示此颜色。

（4）badge：徽章显示的字符串

**FlareTab 对象可用方法：**

```
Element getTabImage() // 获取图标
setTabImage(Element tabImage) // 设置图标
getTabText() // 获取选项卡子串
setTabText( String tabText) // 设置选项卡子串
getTabColorString() // 获取选择tab时颜色
setTabColorString(String tabColorString) // 设置选择tab时颜色
getBadge() // 获取徽章显示的字符串
setBadge(String badge) // 设置徽章显示的字符串
isBadgeGiven() // 是否给定徽章
```
**Flarebar 对象可用方法：**

```
setTabList(ArrayList<Flaretab> tabs) // 设置Flaretab列表
ArrayList<Flaretab> getTabList() // 获取Flaretab列表
setSelectedIndex(int selectedIndex) // 设置选中的选项卡
getSelectedIndex() // 获取选中的选项卡index
attachTabs(Context ctx) // 附加显示选项卡
removeBadge(int tabIndex) // 删除选项卡中徽章
selectTab(int index) // 设置选中的选项卡
setTabChangedListener(TabEventObject.TabChangedListener tabChangedListener) // 设置选项卡监听
setBarBackgroundColor(int color) // 设置bar背景色
getBarBackgroundColor() // 获取bar背景色
hideBar() // 隐藏bar
showBar() // 显示bar
isBarVisible() // bar是否显示
```

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异

#### 版本迭代

- 1.0.0