鸿蒙开发自定义tabbar,带中间凸起按钮

这篇具有很好参考价值的文章主要介绍了鸿蒙开发自定义tabbar,带中间凸起按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天要分享的是开发一个自定义tabbar,因为签了保密协议的缘故,所以本项目还是基于鸿蒙4.0。

先看效果图:

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

自己做的图标不太美观,大家见谅哈哈哈。

这种带中间凸起的tabbar在项目中非常常见,但是我研究了一下系统的tabbar是不支持这样设置的,所以我们就自己开发一个。

首先给每个tabbar的item定义一个class:

export class YLTabClass{
  //选中图标
  selectImage:Resource
  //默认图标
  defaultImage:Resource
  //中间是否凸起
  middleMode:boolean
  //标题
  title:string
  //是否选中
  isSelected:boolean = false

  constructor(selectImage:Resource,defaultImage:Resource,title:string,middleMode = false) {
    this.selectImage = selectImage
    this.defaultImage = defaultImage
    this.title = title
    this.middleMode = middleMode
  }
}

然后创建一个tabbar Item:

import {YLTabClass} from './YLTabCLass'
@Component
export struct YLTabbarItem{
  tabItem:YLTabClass
  @Prop isSelected:boolean
  build(){
    Column(){
      //根据isSelected字段设置图标,如果isSelected为true设置选中图标,否则为默认图标
      Image(this.isSelected ? this.tabItem.selectImage : this.tabItem.defaultImage)
        //如果是中间凸起按钮图片尺寸为45,否则是42
        .size({width:this.tabItem.middleMode ? 45 : 22,height:this.tabItem.middleMode ? 45 : 22})

      //为中间按钮外的其他按钮设置标题
      if(!this.tabItem.middleMode){
        Text(this.tabItem.title)
          .fontSize(12)
          .margin({top:6})
          .fontColor(this.isSelected ? '#3C8DFF' : '#B7B7B7')
      }
    }
    .width("100%")
    .height(56)
    .justifyContent(FlexAlign.Center)
  }
}

接下来,为tabbar创建5个按钮,记得把中间按钮的位置做调整:

import {YLTabClass} from './YLTabCLass'
import {YLTabbarItem} from './YLTabbarItem'

@Component
export  struct YLTabbar {

  tabItemClick:(index)=>void

  @State currentIndex:number = 0
  tab:YLTabClass[] = [
    new YLTabClass($r('app.media.tb01'),$r('app.media.tb00'),'首页'),
    new YLTabClass($r('app.media.tb11'),$r('app.media.tb10'),'行程'),
    new YLTabClass($r('app.media.tab_add'),$r('app.media.tab_add'),'',true),
    new YLTabClass($r('app.media.tb21'),$r('app.media.tb20'),'发现'),
    new YLTabClass($r('app.media.tb31'),$r('app.media.tb30'),'我的'),
  ]

  build() {
    Flex(){
      ForEach(this.tab,(item,index:number)=>{
        YLTabbarItem({tabItem:item,isSelected:this.currentIndex === index})
          .offset({x:item.x,y:item.middleMode ? -25:0})
          .onClick(()=>{
            if(index != 2){
              this.currentIndex = index
            }
            console.log(index+ "" + this.currentIndex);
            this.tabItemClick(index);

          })
      })
    }
  }
}

这样一个自定义的tabbar就完成啦,不过我们还有一些工作要做。就是如何用它控制页面的切换,幽蓝君的思路是在页面上再放一个Tabs,将tabbar高度设为0,大致代码如下,供大家参考:

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
        TabContent() {
          home()
        }
        TabContent() {
          goals()
        }
        TabContent() {
          reccuring()
        }
        TabContent() {
          more()
        }
      }
      .vertical(false)
      .backgroundColor('#F1F3F5')
      .barHeight(0)
 
 TLTabbar()

‘鸿蒙tab’获取本文源码,请移步至文章尾部

最后,有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(Harmony NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(Harmony NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(Harmony NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员,可以直接领取这份资料

 获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙(Harmony NEXT)最新学习路线

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

  •  HarmonOS基础技能

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

  • HarmonOS就业必备技能 鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙
  •  HarmonOS多媒体技术

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

  • 鸿蒙NaPi组件进阶

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

  • HarmonOS高级技能

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

  • 初识HarmonOS内核 鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙
  • 实战就业级设备开发

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

 有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

《鸿蒙生态应用开发V2.0白皮书》

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

鸿蒙arkts自定义view,鸿蒙项目,鸿蒙,harmonyos,华为,android,鸿蒙系统,鸿蒙文章来源地址https://www.toymoban.com/news/detail-853875.html

到了这里,关于鸿蒙开发自定义tabbar,带中间凸起按钮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp自定义tabbar(支持中间凸起,角标,动态隐藏tab,全端适用)

    在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,无法通过一套代码来做通用平台的适配。比如说中间按钮凸起,动态隐藏某个tab(不同角色展示不同功能),使用字体图标,数字角标等,这些功能不是所有平台都支持

    2024年02月02日
    浏览(42)
  • uniapp开发小程序-实现中间凸起的 tabbar

    1.首先在 pages.json 文件中进行tabbar的样式和列表配置,代码如下: 2.在components文件中封装一个Tabbar 组件,命名为 TabBar.vue 代码如下: 3.在 mian.js 全局注册组件 4.在页面中使用组件

    2024年02月14日
    浏览(37)
  • uniapp自定义tabbar——中间特殊按钮

    pages.json 样式覆盖 App.vue 消息设置角标 在三个主页面分别引入组件 传入对于的索引即可

    2024年02月10日
    浏览(38)
  • uniapp - [ H5 网页 / App ] 高性能 tabbar 底部菜单凸起效果,原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面(底部菜单中间自定义一个图片并悬浮起来)

    网上有很多自定义 tabbar 底部菜单的教程,但终归是组件形式,避免不了切换页面卡顿、闪屏闪烁、各平台不兼容等一系列问题。 本文 基于 uniapp 系统原生 tabbar 底部菜单,植入一个向上凸起的 “图片” 菜单,并支持点击触发事件, 您可以直接复制代码,换个中间凸起的菜

    2024年02月21日
    浏览(55)
  • 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

    自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上移动到原导航栏的位置,可以再app.json配置成全局沉浸式导航栏,以及在单页面配置沉浸式导航栏。 方式二 使用组件 这里使用

    2024年02月02日
    浏览(55)
  • 鸿蒙开发已解决-ArkTS开发webview,html页面中的input和按钮等操作均无响应

    在鸿蒙开发过程遇到的问题: 问题 ArkTS API9 使用webview加载的html,页面中的按钮和input等操作均无响应 是有相关API设置webview是否可以touch或者,webview的层级问题来解决? ArkTS API9 使用webview加载的html,页面中的按钮和input等操作均无响应,是有相关API设置webview是否可以touch或者

    2024年02月03日
    浏览(46)
  • 鸿蒙tabbar ArkTS

    做了仿照现在应用的做了一个tabbar。 官方文档地址 参考文档 其中有个比较重要的点是,对image资源的引用问题。 资源相关说明 图片是resources目录下的base目录下的。 media目录下的图片的资源不能添加文件夹,只能是文件,而且文件的命名规则是只能包含字母大小写和下划线

    2024年02月08日
    浏览(39)
  • ArkTS开发webview,html页面中的input和按钮等操作均无响应 【Bug已解决-鸿蒙开发】

    在鸿蒙开发过程遇到的问题: 问题 ArkTS API9 使用webview加载的html,页面中的按钮和input等操作均无响应 是有相关API设置webview是否可以touch或者,webview的层级问题来解决? ArkTS API9 使用webview加载的html,页面中的按钮和input等操作均无响应,是有相关API设置webview是否可以touch或者

    2024年02月04日
    浏览(52)
  • iOS开发-实现自定义Tabbar及tabbar按钮动画效果

    iOS开发-实现自定义Tabbar及tabbar按钮动画效果 之前整理了一个继承UITabbarController的Tabbar效果 查看 https://blog.csdn.net/gloryFlow/article/details/132012628 这里是继承与UIViewController的INSysTabbarViewController实现及点击tabbar按钮动画效果。 INSysTabbar继承UIView,实现tabbarButton效果 INSysTabbar.h INSys

    2024年02月14日
    浏览(42)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(自定义事件分发)

    ArkUI在处理触屏事件时,会在触屏事件触发前进行按压点和组件区域的触摸测试,来收集需要响应触屏事件的组件,再基于触摸测试结果分发相应的触屏事件。在父节点,开发者可以通过onChildTouchTest决定如何让子节点去做触摸测试,影响子组件的触摸测试,最终影响后续的触

    2024年04月14日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包