HarmonyOS实战—服务卡初体验之天气服务卡片

ZJKJTL 2021-08-07 00:04:21

 博客中所有涉及到的代码都可在Gitee获得,点击到达

服务卡片(以下简称“卡片”),在桌面点击图标向上推动会弹出一个小卡片。弹出卡片后也可将卡片固定在屏幕中作为一个小组件显示。卡片中可以显示自定义的UI,也可以点击产生互动。

先看下完成后的效果。 

 

目录

 

卡片服务基本概念

创建模板

布局文件代码

配置文件


卡片服务基本概念

  • 卡片使用方

        显示卡片内容的宿主应用,控制卡片在宿主中展示的位置。

  • 卡片管理服务

        用于管理系统中所添加卡片的常驻代理服务,包括卡片对象的管理与使用,以及卡片周期性刷新等。

  • 卡片提供方

        提供卡片显示内容的HarmonyOS应用或原子化服务,控制卡片的显示内容、控件布局以及控件点击事件。

运作机制如下:

创建模板

我们可以用DevEco Studio自带的模板。

在工程列表中右键 -> 新建 -> Service Widget

 以基础配置的immersive Pattern 为例,点击下一步。

 设置这个服务小装置设置名称、描述,创建新的实体,类型为Java,支持2*2和5*4两种大小。

点击完成后会自动为我们生成相关配置、类文件与布局文件。

 

假若我们需要写的时天气的服务卡,我们就需要修改两个配置文件。

  • form_immersive_pattern_widget_weather_2_2.xml
  • form_immersive_pattern_widget_weather_2_4.xml

布局文件代码

form_immersive_pattern_widget_weather_2_2.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#0086D4"
    ohos:remote="true">

    <Image
        ohos:height="240"
        ohos:width="240"
        ohos:align_parent_end="true"
        ohos:image_src="$media:100"
        ohos:scale_mode="zoom_center"/>

    <Text
        ohos:id="$+id:title"
        ohos:text="北京"
        ohos:text_size="39px"
        ohos:text_color="#b0c4de"
        ohos:top_margin="42px"
        ohos:left_margin="20px"
        ohos:width="match_content"
        ohos:height="match_content"/>

    <Text
        ohos:id="$+id:temperature"
        ohos:text="35°"
        ohos:text_size="100px"
        ohos:text_color="#FFFFFF"
        ohos:top_margin="70px"
        ohos:left_margin="20px"
        ohos:below="$id:title"
        ohos:width="match_content"
        ohos:height="match_content"/>
    <Text
        ohos:id="$+id:textView4"
        ohos:text="28° ~ 35°"
        ohos:text_size="39px"
        ohos:text_color="#b0c4de"
        ohos:top_margin="10px"
        ohos:left_margin="20px"
        ohos:below="$id:temperature"
        ohos:width="match_content"
        ohos:height="match_content"/>

    <Text
        ohos:id="$+id:textView5"
        ohos:text="晴"
        ohos:text_size="39px"
        ohos:text_color="#b0c4de"
        ohos:top_margin="10px"
        ohos:left_margin="20px"
        ohos:below="$id:textView4"
        ohos:width="match_content"
        ohos:height="match_content"/>
</DependentLayout>

form_immersive_pattern_widget_weather_2_4.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:background_element="#0086D4"
    ohos:height="match_parent"
    ohos:remote="true"
    ohos:width="match_parent">

    <Image
        ohos:align_parent_end="true"
        ohos:height="240"
        ohos:image_src="$media:100"
        ohos:scale_mode="zoom_center"
        ohos:width="240"/>

    <Text
        ohos:height="match_content"
        ohos:id="$+id:title"
        ohos:left_margin="20px"
        ohos:text="北京"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="42px"
        ohos:width="match_content"/>

    <Text
        ohos:below="$id:title"
        ohos:height="match_content"
        ohos:id="$+id:temperature"
        ohos:left_margin="20px"
        ohos:text="35°"
        ohos:text_color="#FFFFFF"
        ohos:text_size="100px"
        ohos:top_margin="70px"
        ohos:width="match_content"/>

    <Text
        ohos:below="$id:temperature"
        ohos:height="match_content"
        ohos:id="$+id:textView4"
        ohos:left_margin="20px"
        ohos:text="28° ~ 35°"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="10px"
        ohos:width="match_content"/>

    <Text
        ohos:below="$id:textView4"
        ohos:height="match_content"
        ohos:id="$+id:textView5"
        ohos:left_margin="20px"
        ohos:text="多云"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="10px"
        ohos:width="match_content"/>

    <Text
        ohos:height="match_content"
        ohos:id="$+id:textView6"
        ohos:left_margin="300px"
        ohos:right_of="$id:title"
        ohos:text="宜洗车"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="80px"
        ohos:width="match_content"/>

    <Text
        ohos:align_left="$id:textView6"
        ohos:below="$id:textView6"
        ohos:height="match_content"
        ohos:id="$+id:textView7"
        ohos:text="紫外线强度:80"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="20px"
        ohos:width="match_content"/>

    <Text
        ohos:align_left="$id:textView6"
        ohos:below="$id:textView7"
        ohos:height="match_content"
        ohos:text="今日运势:你需要应付低迷的运势,意味着要步步为营,千万不能受利益的诱惑。你或许只是充当别人的“绿叶”"
        ohos:text_color="#b0c4de"
        ohos:text_size="39px"
        ohos:top_margin="20px"
        ohos:multiple_lines="true"
        ohos:max_text_lines="4"
        ohos:truncation_mode="ellipsis_at_end"
        ohos:width="500"/>
</DependentLayout>

配置文件

服务卡的配置文件如下:

{
    "name": "com.example.helloharmony.widget.WeatherFomrAbility",
    "icon": "$media:icon",
    "description": "$string:widget_weatherfomrability_description",
    "formsEnabled": true,
    "label": "$string:entry_WeatherFomrAbility",
    "type": "page",
    "forms": [
        {
            "landscapeLayouts": [
                "$layout:form_immersive_pattern_widget_weather_2_2",
                "$layout:form_immersive_pattern_widget_weather_2_4"
            ],
            "isDefault": true,
            "scheduledUpdateTime": "10:30",
            "defaultDimension": "2*2",
            "name": "widget_weather",
            "description": "This is a weather service widget",
            "colorMode": "auto",
            "type": "Java",
            "supportDimensions": [
                "2*2",
                "2*4"
            ],
            "portraitLayouts": [
                "$layout:form_immersive_pattern_widget_weather_2_2",
                "$layout:form_immersive_pattern_widget_weather_2_4"
            ],
            "updateEnabled": true,
            "updateDuration": 1
        }
    ],
    "launchType": "singleton"
}

属性解读

可能比较陌生的是forms中的配置,如果需要了解外部配置请看之前的文章。

属性名称子属性含义
name-表示卡片的类名。
description-表示卡片的描述。取值可以是描述性内容,也可以是对描述性内容的资源索引,以支持多语言。
isDefault-

表示该卡片是否为默认卡片,每个Ability有且只有一个默认卡片。

  • true:默认卡片。
  • false:非默认卡片。
type-

表示卡片的类型。取值范围如下:

  • Java:Java卡片。
  • JS:JS卡片。
colorMode-

表示卡片的主题样式,取值范围如下:

  • auto:自适应。
  • dark:深色主题。
  • light:浅色主题。
supportDimensions-

表示卡片支持的外观规格,取值范围:

  • 1*2:表示1行2列的二宫格。
  • 2*2:表示2行2列的四宫格。
  • 2*4:表示2行4列的八宫格。
  • 4*4:表示4行4列的十六宫格。
defaultDimension-表示卡片的默认外观规格,取值必须在该卡片supportDimensions配置的列表中。
landscapeLayouts-表示卡片外观规格对应的横向布局文件,与supportDimensions中的规格一一对应。
portraitLayouts-表示卡片外观规格对应的竖向布局文件,与supportDimensions中的规格一一对应。
updateEnabled-

表示卡片是否支持周期性刷新,取值范围:

  • true:表示支持周期性刷新,可以在定时刷新(updateDuration)和定点刷新(scheduledUpdateTime)两种方式任选其一,优先选择定时刷新。
  • false:表示不支持周期性刷新。
scheduledUpdateTime-表示卡片的定点刷新的时刻,采用24小时制,精确到分钟。
updateDuration 

表示卡片定时刷新的更新周期,单位为30分钟,取值为自然数。

  • 当取值为0时,表示该参数不生效。
  • 当取值为正整数N时,表示刷新周期为30*N分钟。
formConfigAbility-表示卡片的配置跳转链接,采用URI格式。
metaData-表示卡片的自定义信息,包含customizeData数组标签。
customizeData-表示自定义的卡片信息。
name表示数据项的键名称。
value表示数据项的值。
...全文
1562 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

5,139

社区成员

发帖
与我相关
我的任务
社区描述
HarmonyOS是一款“面向未来”、面向全场景的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终端设备。
分布式学习 企业社区
社区管理员
  • HarmonyOS技术社区
  • Edice
  • BaoWei
加入社区
  • 近7日
  • 近30日
  • 至今

试试用AI创作助手写篇文章吧