HarmonyOS NEXT应用开发案例——自定义TabBar

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

介绍

本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示,并有一小段动画效果。

效果图预览

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件

使用说明

  1. 依次点击tabBar页面,除了社区图标之外,其它图标往上移动一小段距离。

实现思路

场景1:TabBar中间页面实现有一圈圆弧外轮廓

将Image组件外层包裹一层容器组件,通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。 这里borderRadius的值设置为容器组件宽度的一半,margin的top值根据开发者的ux效果设置合适的值即可。 具体代码可参考TabView.ets

Column() {
   Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon)
     .size({ width: $r('app.integer.community_image_size'), height: $r('app.integer.community_image_size') })
}
.width($r('app.integer.community_image_container_size'))
.height($r('app.integer.community_image_container_size'))
// TODO:知识点:通过设置borderRadius以及margin的top值实现圆弧外轮廓效果。
.borderRadius(this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX ? $r('app.integer.community_image_container_border_radius_size') : $r('app.integer.common_size_0'))
.margin({ top: this.tabBarIndex === COMMUNITY_TAB_BAR_INDEX ? -15 : $r('app.integer.common_size_0') })
.backgroundColor(Color.White)
.justifyContent(FlexAlign.Center)

场景2:TabBar页签点击之后会改变图标显示,并有一小段动画效果

改变图标显示功能可以先声明一个变量selectedIndex,此变量代表被选定的tabBar下标,点击的时候将当前tabBar的下标值进行赋值。 通过当前被选中的tabBar下标值和tabBar自己的下标值进行判断来达到点击之后改变图标显示的效果。 动画效果可以将Image添加一个offset属性和animation属性, offset属性可以控制组件的横向和纵向偏移量; animation在组件的某些通用 属性变化时,可以通过属性动画animation实现过 渡效果。 点击TabBar页签,改变offset的属性值,自动触发animation属性动画。 具体代码可参考TabView.ets

Column() {
   // 通过被选中的tabBar下标值和tabBar的默认下标值来改变图片显示
   Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon)
     .size(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ?
        { width: $r('app.integer.community_image_size'), height: $r('app.integer.community_image_size') } :
        { width: $r('app.integer.tab_bar_image_size'), height: $r('app.integer.tab_bar_image_size') })
     // TODO:知识点:通过offset控制图片的纵向偏移。
     .offset({ y: (this.selectedIndex === this.tabBarIndex && this.selectedIndex !== COMMUNITY_TAB_BAR_INDEX) ?
                   this.iconOffset : $r('app.integer.common_size_0') })
      // TODO:知识点:组件的某些通用属性变化时,可以通过属性动画animation实现过渡效果。本示例的动画效果是tabBar的图片向上偏移一小段距离
      .animation({
         duration: 400,
         curve: Curve.Linear,
         iterations: 1,
         playMode: PlayMode.Normal
      })
}
.width(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ?
$r('app.integer.community_image_size') : $r('app.integer.tab_bar_image_container_size'))
.height(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ?
$r('app.integer.community_image_size') : $r('app.integer.tab_bar_image_container_size'))
.justifyContent(FlexAlign.Center)

高性能知识点

不涉及。

工程结构&模块类型

customtabbar                                    // har类型
|---model
|   |---DataType.ets                            // 模型层-Tabbar数据类型
|   |---TabBarData.ets                          // 数据模型层-TabBar数据
|---view
|   |---TabView.ets                             // 视图层-自定义TabBar页面

模块依赖

不涉及。

参考资料

属性动画(animation)

Tabs组件

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:https://qr21.cn/FV7h05

入门必看:https://qr21.cn/FV7h05
1.  应用开发导读(ArkTS)
2.  ……

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件

HarmonyOS 概念:https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件

如何快速入门:https://qr21.cn/FV7h05
1.  基本概念
2.  构建第一个ArkTS应用
3.  构建第一个JS应用
4.  ……

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件

开发基础知识:https://qr21.cn/FV7h05
1.  应用基础知识
2.  配置文件
3.  应用数据管理
4.  应用安全管理
5.  应用隐私保护
6.  三方应用调用管控机制
7.  资源分类与访问
8.  学习ArkTS语言
9.  ……

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件

基于ArkTS 开发:https://qr21.cn/FV7h05
1.  Ability开发
2.  UI开发
3.  公共事件与通知
4.  窗口管理
5.  媒体
6.  安全
7.  网络与链接
8.  电话服务
9.  数据管理
10.  后台任务(Background Task)管理
11.  设备管理
12.  设备使用信息统计
13.  DFX
14.  国际化开发
15.  折叠屏系列
16.  ……

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件

鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05

鸿蒙 f自定义tabbar,鸿蒙,OpenHarmony,Harmony OS,harmonyos,华为,鸿蒙开发,移动开发,前端,自定义组件文章来源地址https://www.toymoban.com/news/detail-839759.html

到了这里,关于HarmonyOS NEXT应用开发案例——自定义TabBar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • HarmonyOS 实战开发案例-仿抖音短视频应用

    前段时间看到一篇文章,但是没有源码,是一个仿写抖音的文章,最近也在看这块,顺便写个简单的短视频小应用。 技术点拆分 1、http请求数据; 2、measure计算文本宽度; 3、video播放视频; 4、onTouch上滑/下拉切换视频; 5、List实现滚动加载; 效果展示 http请求数据 通过对

    2024年02月22日
    浏览(73)
  • HarmonyOS Next 自定义安全键盘案例_鸿蒙next 自定义键盘(1)

    // 切换大写字母键盘 this.curKeyboardType = EKeyboardType.UPPERCASE; this.items = upperCaseKeyData; } else { // 切换小写字母键盘 this.curKeyboardType = EKeyboardType.LOWERCASE; this.items = lowerCaseKeyData; } break; // 切换特殊字符键盘 case EKeyType.SPECIAL: if (this.curKeyboardType !== EKeyboardType.SPECIAL) { this.curKeyboardType =

    2024年04月17日
    浏览(60)
  • HarmonyOS Next 自定义安全键盘案例

    介绍 金融类应用在密码输入时,一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景,主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。 效果图预览 实现思路 1. 使用TextInput的customKeyboard的属性方法来设置自

    2024年04月13日
    浏览(56)
  • HarmonyOS 应用开发之@Builder装饰器:自定义构建函数_harmony 构件函数

    @Builder function overBuilder( KaTeX parse error: Can\\\'t use function \\\'$\\\' in math mode at position 49: …`overBuilder===$̲{ .paramA1}`) HelloComponent({message: $$.paramA1}) } } } @Component struct HelloComponent { @Link message: string; build() { Row() { Text( HelloComponent===${this.message} ) } } } @Entry @Component struct Parent { @State label: string =

    2024年04月25日
    浏览(40)
  • 【HarmonyOS开发】HarmonyOS-应用开发入门

    1. 【判断题】 10/10 在Windows系统下载安装DevEco Studio工具时,安装路径可以包含中文名。 错误(False)   2. 【判断题】 10/10 某开发者在使用远程真机运行应用时,不需要对应用进行签名;但使用本地真机运行应用时,必须需要对应用进行签名。 错误(False)   3. 【判断题】 10/10 在

    2024年02月04日
    浏览(44)
  • 【HarmonyOS应用开发】云开发(十九)

    HarmonyOS 云开发是 DevEco Studio 新推出的功能,可以让您在一个项目工程中,使用一种语言完成端侧和云侧功能的开发。 基于 AppGallery Connect Serverless 构建的云侧能力,让您无需构建和管理云端资源,随需使用,大大提高构建应用/元服务的效率。 认证服务: 可以为应用快速构建

    2024年02月21日
    浏览(38)
  • HarmonyOS 应用开发入门

    DevEco Studio Release版本为:DevEco Studio 3.1.1。 Compile SDK Release版本为:3.1.0(API 9)。 构建方式为 HVigor,而非 Gradle。 最新版本已不再支持 (”Java、JavaScript” 、“类Web开发范式” 和 “FA 模型” )用于应用开发,因此大部分举例都以 (“ArkTS声明式范式” 和 “Stage 模型”)最

    2024年01月19日
    浏览(45)
  • 鸿蒙(HarmonyOS)应用开发指南

    1.1 简介 鸿蒙 (即 HarmonyOS ,开发代号 Ark ,正式名称为华为终端鸿蒙智能设备操作系统软件)是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的 分布式操作系统 。该系统利用“分布式”技术将 手机、电脑、平板、电视、汽车和智能穿戴 等多款设备

    2024年02月02日
    浏览(104)
  • 【HarmonyOS】HarmonyOS应用开发者高级认证题库

    注:HarmonyOS应用开发者高级认证考试50道题,答对40及格,此题库有部分不清楚的选项,欢迎补充 1、HarmonyOS应用可以兼容OpenHarmony生态 正确(True) 2、云函数打包完成后,需要到AppGallery Connect创建对应函数的触发器才可以在端侧中调用 错误(False) 3、Ability是系统调度应用的最小单

    2024年02月03日
    浏览(67)
  • 鸿蒙应用开发尝鲜:初识HarmonyOS

    来源:华为官方网站 : https://developer.huawei.com/ 相信大家对鸿蒙应用开发也不在陌生,很多身处互联网行业或者不了解的人们现在也一定都听说过华为鸿蒙.这里我将不再说废话,直接步入正题 HarmonyOS应用开发采用的是ArkTS语言,ArkTS是在TypeScript(简称TS)基础上的拓展,而TS又是JavaScrip

    2024年02月02日
    浏览(65)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包