HarmonyOS（鸿蒙）——模仿抖音点赞和取消点赞

Posted 2021-09-08 李子捌

本文已收录于专栏

❤️《鸿蒙开发》❤️

欢迎各位关注、三连博主的文章及专栏，每周定期更新1-5篇基础文章，共勉！

---

目录

一、需求：

二、实现步骤：

2.1 页面布局

2.2 业务实现

---

一、需求：

本文的需求是模仿抖音的点赞和取消点赞；主要有两个部分，点赞和取消点赞。
点赞有两种方式：

1. 单击为点赞的小爱心
2. 双击屏幕，如果未点赞则为点赞

取消点赞有一种方式：

1. 单击已点赞的小爱心

上述点赞和未点赞的状态是根据小爱心的颜色来区分的，未点赞为白色小爱心，点赞之后为红色小爱心

二、实现步骤：

2.1 页面布局

这一步中需要使用到一个标签，标签是图片控件，我们可以通过设置标签中图片的改变来标志点赞与取消点赞的状态，此外由于我们需要双击屏幕，这个时候我们需要使用到控件最外层的DirectionalLayout控件，因此我们给DirectionalLayout控件添加ID，便于定位。
实现代码：

<?xml version="1.0" encoding="utf-8"?>

<!--
    给DirectionalLayout添加id，用于定位控件
    由于此处我们需要使用到双击屏幕来点赞这个效果，此处的屏幕就是最外层这个DirectionalLayout控件
-->
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:dl"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <!--
        Image标签用于承载点赞的爱心图标
        图标初始为白色，表示未点赞ohos:image_src="$media:white"
        点赞后，图标为红色ohos:image_src="$media:red"
        图标白色需要给背景色才能看清楚ohos:background_element="#d9d9d9"
        图标需要id来定位 ohos:id="$+id:img"
    -->
    <Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:id="$+id:img"
        ohos:image_src="$media:white"
        ohos:background_element="#d9d9d9">
    </Image>

</DirectionalLayout>

启动程序，查看测试的效果：

 

2.2 业务实现

这里需要给两个控件注册监听事件，分别是DirectionalLayout控件，这里代表页面的最外层容器，此处可以理解为我们双击的“屏幕”；还有一个是小爱心，也就是图片控件。
二者需要添加的监听事件不一样，DirectionalLayout控件需要注册的是双击事件；图片控件需要注册的是单击事件。
​

实现代码：

package com.liziba.demo.slice;

import com.liziba.demo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;


public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener, Component.DoubleClickedListener {

    /** DirectionalLayout控件 */
    DirectionalLayout directionalLayout;
    /** Image控件 */
    Image image;
    /** 是否点赞  true 代表点赞 false 代表取消点赞 */
    Boolean like = false;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取DirectionalLayout控件
        directionalLayout = (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl);
        // 获取Image控件
        image = (Image) this.findComponentById(ResourceTable.Id_img);

        // 注册双击事件
        directionalLayout.setDoubleClickedListener(this);
        // 注册单击事件
        image.setClickedListener(this);
    }

    /**
     * 单击事件方法
     *
     * @param component
     */
    @Override
    public void onClick(Component component) {
        // 单击修改Image图片
        if (component.getId() == ResourceTable.Id_img) {
            like = !like;
            image.setImageAndDecodeBounds(like ? ResourceTable.Media_red : ResourceTable.Media_white);
        }
    }

    /**
     * 双击事件方法
     *
     * @param component
     */
    @Override
    public void onDoubleClick(Component component) {
        // 双击修改Image图片，如果未点赞，则修改为红色小红心，如果已点赞则不处理
        if (component.getId() == ResourceTable.Id_dl && !like) {
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
        }
    }


    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

双击屏幕效果

单击小爱心效果，已点赞变为未点赞

单击小爱心效果，未点赞变为已点赞