云网牛站
所在位置:首页 > HarmonyOS问题与回答 > 提供一个简单好用的鸿蒙HarmonyOS底部栏(bottom tabbar)

提供一个简单好用的鸿蒙HarmonyOS底部栏(bottom tabbar)

2021-06-21 17:52:16作者:秦城季稿源:HarmonyOS站

问题:能提供一个简单好用的鸿蒙HarmonyOS底部栏(bottom tabbar)吗?

 

回答:

当然能,以下将提供项目的源码地址、软件架构、安装教程及使用说明。

1、介绍

鸿蒙HarmonyOS自定义底部栏tabbar(bottom tabbar for harmonyos)

2、项目源码地址

地址:https://gitee.com/qincji/bottombar

3、软件架构

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

提供一个简单好用的鸿蒙HarmonyOS底部栏(bottom tabbar)

4、安装教程

1].在项目根目录的build.gradle添加中央仓库

repositories {

    //...

    mavenCentral()

}

2].在module(如:entry)的build.gradle引用

dependencies {

    //...

    implementation 'io.gitee.qincji:bottombar:1.0.1'

}

5、使用说明

1].布局中添加

 <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)调用

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].更多配置请自己尝试不同的调用方式(非常简单),或看源码(很简洁)。

 

说明:

该项目是开放源码的,很多配置可以自由调用。

精选文章
热门文章