问题:能提供一个简单好用的鸿蒙HarmonyOS底部栏(bottom tabbar)吗?
回答: 当然能,以下将提供项目的源码地址、软件架构、安装教程及使用说明。 1、介绍 鸿蒙HarmonyOS自定义底部栏tabbar(bottom tabbar for harmonyos) 2、项目源码地址 地址:https://gitee.com/qincji/bottombar 3、软件架构 多样动态配置tab的大小和颜色等样式。如可以单独设置成只有图标或文字:
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].更多配置请自己尝试不同的调用方式(非常简单),或看源码(很简洁)。
说明: 该项目是开放源码的,很多配置可以自由调用。 |