HarmonyOS原子化卡片云端通讯录的实践 原创

鸿蒙时代
发布于 2021-7-9 17:12
浏览
0收藏

一、需求创意
网络的发展,所有的事物都在不断变化。很多看似恒定的事物,都在不断被变革,比如微信取代了短信。
在我们手机中,几波大的变化中,通讯录一直在保持原样,我们尝试通过HarmonyOS原子化服务卡片的方式,来尝试重塑新一代的通讯录工具方式。
我们希望通过原子化卡片服务的方式将传统的手机本地通讯录转化为云端形式,让其更加便捷、友好、可以通过多种方式来进行管理和具备分享、多种唤起方等更多的可能性。

二、技术相关
项目名称: List_card
项目语言: JAVA
使用模板:List
工具:deveco studio

三、效果如下
图片
HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区

四、开发过程
新建一个java的应用项目
然后构建完成项目后在jltf_template下new->module
HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区

HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区

选择的空的 java模板

HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区

选择项目的empty,新建Service Widget
HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区
选择image and information模板,点击下一步
HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区
选择卡片类型,我选择的是24和44的模板,点击finish
HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区
登录你的账号然后启动模拟器即可实现效果

五、项目结构介绍
HarmonyOS原子化卡片云端通讯录的实践-鸿蒙开发者社区
六、关键代码(2*4页面代码)
<?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=“#FFFFFFFF”
ohos:remote=“true”>

<Image
    ohos:height="24vp"
    ohos:width="24vp"
    ohos:image_src="$media:form_list_pattern_widget_default_app_icon"
    ohos:scale_mode="zoom_center"
    ohos:start_margin="12vp"
    ohos:top_margin="12vp"/>

<Text
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:end_margin="12vp"
    ohos:start_margin="44vp"
    ohos:text="$string:widget_app_name"
    ohos:text_color="#E5000000"
    ohos:text_size="16fp"
    ohos:text_weight="500"
    ohos:top_margin="12vp"/>

<DirectionalLayout
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:align_parent_bottom="true"
    ohos:bottom_margin="12vp"
    ohos:end_margin="12vp"
    ohos:orientation="vertical"
    ohos:start_margin="12vp">

    <DirectionalLayout
        ohos:height="48vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:layout_alignment="vertical_center"
            ohos:orientation="vertical">

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="张某"
                ohos:text_color="#E5000000"
                ohos:text_size="14fp"
                ohos:text_weight="500"
                ohos:truncation_mode="ellipsis_at_end"/>

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="17800000000"
                ohos:text_color="#99000000"
                ohos:text_size="10fp"
                ohos:text_weight="400"
                ohos:top_margin="2vp"
                ohos:truncation_mode="ellipsis_at_end"/>
        </DirectionalLayout>
    </DirectionalLayout>

    <Image
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:image_src="$graphic:form_list_pattern_widget_default_divide_line"
        ohos:scale_mode="zoom_center"/>

    <DirectionalLayout
        ohos:height="48vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">

        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:layout_alignment="vertical_center"
            ohos:orientation="vertical">

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="赵某"
                ohos:text_color="#E5000000"
                ohos:text_size="14fp"
                ohos:text_weight="500"
                ohos:truncation_mode="ellipsis_at_end"/>

            <Text
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text="13000000000"
                ohos:text_color="#99000000"
                ohos:text_size="10fp"
                ohos:text_weight="400"
                ohos:top_margin="2vp"
                ohos:truncation_mode="ellipsis_at_end"/>
        </DirectionalLayout>
    </DirectionalLayout>
</DirectionalLayout>

</DependentLayout>

六、完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/list_cart
本文已经投稿51CTO征文活动

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
HarmonyOS原子化卡片云端通讯录的实践.zip 2.05M 32次下载
已于2021-7-9 17:32:13修改
2
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
鸿蒙时代
鸿蒙时代
回复
2021-7-10 08:38:45
回复
    相关推荐