HarmonyOS服务卡片—残奥会卡片

开发 前端 OpenHarmony
本APP旨在为用户打造一款能够快速了解残奥会动态和相关知识的应用,让更多人关注到残奥会,关注这群同样为国家争取荣誉的运动员们。

[[423875]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

引言

2021年7月23日,东京奥运会开幕,中国国歌响彻东京,最终拿下38枚金牌、88枚奖牌。

2021年8月24日,东京残奥会开幕,中国残疾运动员出征东京,精彩正在继续…

需求分析

奥运会是国民最关注的体育赛事,无论是稳扎稳打的乒乓球,还是独占鳌头的跳水,我们对体育赛事和参赛选手都如数家珍,然而十几天后的残奥会却鲜为人知。本APP旨在为用户打造一款能够快速了解残奥会动态和相关知识的应用,让更多人关注到残奥会,关注这群同样为国家争取荣誉的运动员们。

主要功能介绍

长按残奥会服务卡片应用,点击服务卡片选项,即可显示已开发的服务卡片。根据三种不同规格尺寸的服务卡片,可以分别查看残奥会奖牌榜、残奥会赛事、以及残奥会的中国运动员信息。具体如下:

1、服务卡片(2×2)

2×2的卡片样式为东京残奥会会标,效果如下图1所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图1 2×2卡片样式

点击该卡片即可跳转至奖牌榜页面,查看各国奖牌数量。如图2所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图2 奖牌榜

2、服务卡片(2×4)

在2×4的卡片中,左边对东京残奥会吉祥物进行展示;右边选取了四个东京残奥会赛事图片进行展示,效果如图3所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图3 2×4卡片样式

点击卡片即可进入应用的主界面查看具体项目,主界面如图4所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图4 主界面

点击主界面中的任意一个赛事图标即可进入赛事的详情界面,如图5所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图5 赛事项目简介

3、服务卡片(4×4)

在4×4的卡片中,上方展示的是东京残奥会吉祥物,下方展示的是我们选取的参加本次残奥会的中国运动员图片。点击卡片即可进入主界面查看各位中国运动员的详细信息。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图6 4×4卡片样式

技术实现

一.创建工程

打开DevEco Studio,点击File→New→New Project;选择Empty Ability(Java);点击”Next“按钮;即可进入项目配置界面。在此界面中,Project Name项目名称可自定义,此处命名为ParalympicGamesCard;Project Type项目类型选择应用Application;Package Name包名会根据前面的信息自动生成;Save Location存储路径可自行设置;Compatible API Version可兼容的API版本此处选择版本4;Device Type设备类型选择Phone。在完成配置信息设置后,点击”Finish“按钮,即可成功创建项目。具体配置信息可参考图7。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图7 配置项目

二.残奥会服务卡片实现

1.卡片生成

1)在项目包名上点击右键,选择New→Service Widget。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图8 创建卡片

2)选择服务卡片种类,用户可以选择Template下任意一种模板,选中后点击Next。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图9 选择模板

3)配置服务卡片信息。其中Service Widget Name卡片名称可以自定义;Description详细信息用户也可以自定义;Ability默认会使用MainAbility;Type类型可以根据实际开发情况选择JAVA或者JS语言;Support Dimensions支持的样式可以勾选后两个,这样就可以得到22、24、4*4三种尺寸的服务卡片。点击”Finish“按钮即可完成服务卡片的创建。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图10 配置服务卡片

2.卡片布局

本APP中三种卡片的布局分别在下图红框的xml文件中进行配置,文件名的尾数如”2_2“表示的是2*2服务卡片的布局文件,其余两个尾数分别为”2_4“和”4_4“的xml文件同理。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图11 xml文件

下面以2*2服务卡片为例讲解布局的实现。界面包含一张Image图片和一个Text文本框,将Text的文字设置为“残奥会奖牌榜”,并通过height、width、margin等设置两个控件的高度、宽度、间隔等属性。

  1. <DependentLayout 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.     ohos:height="match_parent" 
  4.     ohos:width="match_parent" 
  5.     ohos:id="$+id:layout_2x2" 
  6.     ohos:background_element="#FFFFFF" 
  7.     ohos:remote="true"
  8.    <Image//用于显示残奥会logo 
  9.        ohos:height="100vp" 
  10.        ohos:width="100vp" 
  11.        ohos:image_src="$media:aoyunhui" 
  12.        ohos:horizontal_center="true" 
  13.        ohos:scale_mode="zoom_start" 
  14.        ohos:start_margin="12vp" 
  15.        ohos:top_margin="25vp"/> 
  16.    <DirectionalLayout 
  17.        ohos:height="match_content" 
  18.        ohos:width="match_parent" 
  19.        ohos:align_parent_bottom="true" 
  20.        ohos:bottom_margin="15vp" 
  21.        ohos:end_margin="15vp" 
  22.        ohos:orientation="vertical" 
  23.        ohos:start_margin="12vp"
  24.       <Text//用于显示提示性文字 
  25.            ohos:id="$+id:title" 
  26.            ohos:height="match_content" 
  27.            ohos:width="match_parent" 
  28.            ohos:text="残奥会奖牌榜" 
  29.            ohos:text_color="#130c0e" 
  30.            ohos:text_size="20fp" 
  31.            ohos:text_weight="500" 
  32.            ohos:top_margin="0vp" 
  33.            ohos:truncation_mode="ellipsis_at_end"/> 
  34.     </DirectionalLayout> 
  35. </DependentLayout> 

3.卡片信息创建、更新、删除

对卡片进行操作时,需要对创建的卡片信息进行持久化操作,以便再次获取或更新卡片实例时能够直接使用,即需要存储卡片信息。主要采用对象关系型数据库来实现,需要重写如下几个函数:表示创建卡片的回调函数onCreateForm()、表示更新卡片信息的onUpdataForm()、以及表示销毁卡片和删除卡片信息onDeleteForm()。卡片需要的存储信息包括:卡片ID、卡片名称、卡片尺寸大小(22、24、4*4),这些回调函数在创建服务卡片时即可自动生成。回调函数代码如下:

  1. //创建卡片 
  2. @Override 
  3. protected ProviderFormInfo onCreateForm(Intent intent) { 
  4.     HiLog.info(TAG, "onCreateForm"); 
  5.     long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID); 
  6.     String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY); 
  7.     int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2); 
  8.     HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName); 
  9.     FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
  10.     FormController formController = formControllerManager.getController(formId); 
  11.     formController = (formController == null) ? formControllerManager.createFormController(formId, 
  12.             formName, dimension) : formController; 
  13.     if (formController == null) { 
  14.         HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName); 
  15.         return null
  16.     } 
  17.     return formController.bindFormData(); 
  18.  
  19. //更新卡片 
  20. @Override 
  21. protected void onUpdateForm(long formId) { 
  22.     HiLog.info(TAG, "onUpdateForm"); 
  23.     super.onUpdateForm(formId); 
  24.     FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
  25.     FormController formController = formControllerManager.getController(formId); 
  26.     formController.updateFormData(formId); 
  27.  
  28. //删除卡片 
  29. @Override 
  30. protected void onDeleteForm(long formId) { 
  31.     HiLog.info(TAG, "onDeleteForm: formId=" + formId); 
  32.     super.onDeleteForm(formId); 
  33.     FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
  34.     formControllerManager.deleteFormController(formId); 

4.将卡片在桌面上创建快捷方式

下面我们讲解如何在桌面上创建三种不同尺寸卡片的快捷方式。

第一步:长按APP图标,点击服务卡片。如图12所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图12 点击服务卡片

第二步:用户将喜爱的卡片选择“添加到桌面”,如图13所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图13 添加到桌面

第三步:用户选择喜欢的卡片添加到桌面上,则桌面会出现对应的服务卡片。如图14所示:

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图14 添加桌面效果

5.卡片的点击跳转

点击 22服务卡片后默认跳转至奖牌榜显示页面,24服务卡片默认跳转至主界面,再点击主界面的各赛事图标按钮进入赛事项目详情页面。下面详细介绍一下如何实现上述提到的页面跳转功能。

1)AoyunhuiwidgetImpl文件设置

在widght文件下的AoyunhuiwidgetImpl卡片设置文件中,需要重写bindFormData()方法。通过switch…case…方式控制跳转的具体指向,当卡片尺寸为22时,跳转指向的Ability名称为MainAbility2;当卡片尺寸为24时,跳转指向的Ability名称为MainAbility。

HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图15AoyunhuiwidgetImpl文件位置

  1. @Override 
  2. public ProviderFormInfo bindFormData() { 
  3.     ...... 
  4.     switch (dimension){//用于控制跳转的具体指向 
  5.         case DEFAULT_DIMENSION_2X2: 
  6.             abilityName= "MainAbility2";//跳转指向页面的Ability名称 
  7.             componentProvider=new ComponentProvider();//2*2尺寸 
  8.     componentProvider.setIntentAgent(ResourceTable.Id_layout_2x2,startAbilityIntentAgent(abilityName)); 
  9.             break; 
  10.         case DIMENSION_2X4: 
  11.             abilityName="MainAbility";//跳转指向页面的Ability名称 
  12.             componentProvider=new ComponentProvider();//2*4尺寸   componentProvider.setIntentAgent(ResourceTable.Id_layout_2x4,startAbilityIntentAgent(abilityName)); 
  13.     break; 
  14.     } 

2)MainAbility2Slice文件设置

在MainAbility2Slice文件中,调用webview()方法,将url地址作为入参传入方法中,完成设置需要跳转的奖牌榜网页url地址,实现点击2*2卡片后跳转至奖牌榜显示页面的效果。

  1. public void onStart(Intent intent) { 
  2.     ... 
  3. super.setUIContent(ResourceTable.Layout_ability_main2); 
  4.     String url="https://www.baidu.com/s?ie=utf-8&fr=bks0000&wd=%E5%A5%A5%E8%BF%90%E4%BC%9A%E5%A5%96%E7%89%8C%E6%A6%9C";//跳转至奖牌榜 
  5.     ... 
  6.     webview(url); 

3)MainAbilitySlice文件设置

第一步:主界面布局

APP的主界面布局定义在ability_main.xml文件中,界面包含7个Image图片和6个Text文本框。其中,7个Image图片包括一个首页装饰图和六个赛事项目图标;6个Text文本框用于显示赛事项目的名称。在设置好各控件的相关属性之后,通过setUIContent()方法将ability_main.xml文件设置为APP的主界面布局。代码如下,布局效果可参考图16。

  1. super.setUIContent(ResourceTable.Layout_ability_main); 
HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图16 主界面布局

第二步:主界面跳转至赛事项目详情界面

在MainAbilitySlice文件的onStart()方法中,通过findComponentById()的方法,实现上面1)AoyunhuiwidgetImpl文件设置小节中提到的赛事项目的定位。以举重项目为例,在主界面中,获取“举重”项目的图片控件,并为其设置onClick()点击跳转事件,将跳转指向的Ability名称withAbilityName()设置为举重页面的Ability,即WeightliftingAbility,实现点击举重图片后跳转至举重项目详情页面的效果,具体代码如下:

  1. public void onStart(Intent intent) { 
  2.     ... 
  3.     findComponentById(ResourceTable.Id_juzhong).setClickedListener(new Component.ClickedListener() {//获取举重项目的图片控件 
  4.         @Override 
  5.         public void onClick(Component component) {//为举重图片设置点击事件 
  6.             Intent secondIntent = new Intent(); 
  7.             secondIntent.setOperation(new Intent.OperationBuilder() 
  8.                     .withBundleName("com.huawei.ParalympicGamesCard"
  9.                     .withAbilityName("com.huawei.ParalympicGamesCard.WeightliftingAbility")//将跳转指向的Ability名称设置为举重的Ability 
  10.                     .build()); 
  11.             startAbility(secondIntent); 
  12.         } 
  13.     }); 

第三步:举重项目详情界面WeightliftingAbilitySlice

WeightliftingAbilitySlice举重项目详情界面实现原理和第一步主界面实现原理相似。在ability_weightlifting.xml文件中界面包含Image图片和Text文本框控件,其中图片用来存放举重比赛照片,Text文字用来存放举重项目的文字介绍。在完成设置各控件属性后,通过setUIContent()方法将ability_weightlifting.xml文件设置为举重项目详情界面布局。举重项目详情界面效果可参考图17。

  1. super.setUIContent(ResourceTable.Layout_ability_weightlifting); 
HarmonyOS服务卡片——残奥会卡片-鸿蒙HarmonyOS技术社区

图17 举重项目详情界面

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-07-22 08:45:47

鸿蒙HarmonyOS应用

2022-04-24 15:26:38

服务卡鸿蒙

2023-11-16 09:47:55

ArkTS鸿蒙

2022-05-09 11:52:38

Java卡片服务卡片

2021-08-23 10:12:41

鸿蒙HarmonyOS应用

2021-08-18 10:06:33

鸿蒙HarmonyOS应用

2021-07-20 09:58:16

鸿蒙HarmonyOS应用

2021-09-18 09:57:20

鸿蒙HarmonyOS应用

2021-06-21 15:21:52

鸿蒙HarmonyOS应用开发

2021-08-20 14:23:14

鸿蒙HarmonyOS应用

2023-08-04 17:24:43

2021-08-23 11:03:54

鸿蒙HarmonyOS应用

2021-07-28 14:59:08

鸿蒙HarmonyOS应用

2023-06-20 15:45:15

服务卡片鸿蒙

2023-09-18 15:12:47

服务卡片ArkTS

2021-06-24 14:41:16

鸿蒙HarmonyOS应用

2021-06-23 16:05:05

鸿蒙HarmonyOS应用

2021-09-09 15:07:36

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号