HarmonyOS实战—实现抖音点赞和取消点赞效果

举报
兮动人 发表于 2021/08/02 17:56:32 2021/08/02
【摘要】 HarmonyOS实战—实现抖音点赞和取消点赞效果

1. 双击点赞 和 双击取消点赞

  • 如:在抖音中双击屏幕之后就可以点赞,小红心就会变亮
    在这里插入图片描述
  • 把白色和红色的心形图片复制到 media
    在这里插入图片描述
    在这里插入图片描述
  • 需要图片的可以自取,下面白色图片由于没有背景,所以显示的是白色的,下载后鼠标点击就能看见了
    请添加图片描述
    请添加图片描述
  • 因为要双击屏幕才能点赞,所以还要给布局组件id
  • 代码实现:

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    ohos:id="$+id:dl"
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Image
        ohos:id="$+id:img"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:white"
        ohos:background_element="cyan"
        >

    </Image>



</DirectionalLayout>

MainAbilitySlice

package com.xdr630.listenerapplication6.slice;

import com.xdr630.listenerapplication6.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.DoubleClickedListener {

    Image image;

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

        //1.找到图片组件
        image = (Image) findComponentById(ResourceTable.Id_img);
        //找到铺满屏幕布局的对象
        DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);
        //2.给布局添加双击事件
        dl.setDoubleClickedListener(this);
    }

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

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

    //如果标记为false,表示没有点赞,此时把白色变为红色
    //如果标记为true,表示已经点赞,再次双击后,会把红色变回白色

    boolean flag = false;

    @Override
    public void onDoubleClick(Component component) {
        //修改图片的红星就可以了,只需要用到image就行了,所以把image定为成员变量

        if (flag){
            image.setImageAndDecodeBounds(ResourceTable.Media_white);
            //取消点赞变成白色,也要把flag设置为false
            flag = false;
        }else{
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
            //当启动项目的时候,flag初始值是false,就会走下面的else的代码,变成红色后就要把flag变成true了
            flag = true;
        }
    }
}
  • 运行:
    在这里插入图片描述
  • 双击屏幕点赞:
    在这里插入图片描述
  • 双击屏幕后取消点赞:
    在这里插入图片描述

2. 能否按照抖音的业务去实现呢?

业务分析:

  • 双击屏幕之后点赞。(上面已实现),再次双击屏幕之后,不会取消点赞,只有点击后红心之后才能取消点赞。
  • 单击红心也可以点赞,再次单击红心就会取消点赞

实现思路:

  1. 给最外层的布局添加双击事件,双击之后点赞,变成红色心。
    如果已经被点赞,那么还是修改为红色心,相当于不做任何处理。
  2. 给图片添加单击事件。
    如果没有点赞,单击之后,白色心变成红色心。
    如果已经点赞了,单击之后,红色心变成白色心。
  • 代码实现:
    上面布局文件不变,MainAbilitySlice 如下:
  • 给布局添加双击事件,因为再次双击不会取消点赞,所以把else代码里设置为红色后就把 flag 取反去掉,就不会出现再次双击取消点赞了。
  • 给图片添加单击事件,因为涉及到点赞后为红色,再取消就变为白色,所以要把 flag 变为相反的操作
package com.xdr630.listenerapplication6.slice;

import com.xdr630.listenerapplication6.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.DoubleClickedListener, Component.ClickedListener {

    Image image;

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

        //1.找到图片组件
        image = (Image) findComponentById(ResourceTable.Id_img);
        //找到铺满屏幕布局的对象
        DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);
        //2.给布局添加双击事件
        dl.setDoubleClickedListener(this);
        //3.给图片添加单击事件
        image.setClickedListener(this);
    }

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

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

    //如果标记为false,表示没有点赞,此时把白色变为红色
    //如果标记为true,表示已经点赞,再次双击后,会把红色变回白色

    boolean flag = false;


    @Override
    public void onDoubleClick(Component component) {
        //修改图片的红星就可以了,只需要用到image就行了,所以把image定为成员变量

        if (flag){
            image.setImageAndDecodeBounds(ResourceTable.Media_white);
            //取消点赞变成白色,也要把flag设置为false
            flag = false;
        }else{
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
            //当启动项目的时候,flag初始值是false,就会走下面的else的代码,此时设置为红色,把flag去掉,再次双击后就还是红色了
        }
    }

    @Override
    public void onClick(Component component) {
        if (flag){
            image.setImageAndDecodeBounds(ResourceTable.Media_white);
            flag = false;
        }else{
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
            flag = true;
        }
    }
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。