【牛角书】 HarmonyOS-手把手教你做快手点赞精华

钢铁猛男要你命

发布于 2022-12-13 10:23

浏览

7收藏

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

如：在快手中双击屏幕之后就可以点赞，小红心就会变亮
【牛角书】 HarmonyOS-手把手教你做快手点赞-鸿蒙开发者社区

把白色和红色的心形图片复制到 media 下
因为要双击屏幕才能点赞，所以还要给布局组件id
代码实现：
ability_main

<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>


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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;
        }
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

运行
【牛角书】 HarmonyOS-手把手教你做快手点赞-鸿蒙开发者社区

双击屏幕实现点赞
【牛角书】 HarmonyOS-手把手教你做快手点赞-鸿蒙开发者社区

再从双击实现取消点赞
【牛角书】 HarmonyOS-手把手教你做快手点赞-鸿蒙开发者社区

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;
        }
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.