07. 案例2 双击点赞双击取消+小作业

实现效果

说明：

这里需要用到图片，图片要放在在media文件中（不能随意更改位置）

需要的文件（两张）：

 

代码实现 

ability_main.xml

<?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"
        />



</DirectionalLayout>

MainAbilitySlice.java 

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.OnClickListener;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.*;
import ohos.javax.xml.stream.events.EndElement;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;

import static com.example.myapplication.ResourceTable.Media_red;
import static com.example.myapplication.ResourceTable.Media_white;

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) {
        //修改为图片为红星

        if (flag) {
            image.setImageAndDecodeBounds(Media_white);
            flag = false;
        }
        else {
            image.setImageAndDecodeBounds(Media_red);
            flag = true;
        }
    }
}

 小作业

按照抖音业务来实现点赞和取消（双击屏幕进行点赞；取消双击需要单击红星才可以）

代码实现

ability_main.xml

<?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"
        />



</DirectionalLayout>

MainAbilitySlice.java 

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.ability.OnClickListener;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.*;
import ohos.javax.xml.stream.events.EndElement;
import ohos.multimodalinput.event.MmiPoint;
import ohos.multimodalinput.event.TouchEvent;

import static com.example.myapplication.ResourceTable.Media_red;
import static com.example.myapplication.ResourceTable.Media_white;

public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener {
    Image image;
    DirectionalLayout dl;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

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


    @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) {
        //修改为图片为红星

        if (flag) {
            image.setImageAndDecodeBounds(Media_white);
            if (component == dl) {
                flag = false;
            }
        }
        else {
            image.setImageAndDecodeBounds(Media_red);
            if(component == image) {
                flag = true;
            }
        }
    }
}

思路

为图片设置一个单击事件，如果单击到了图片就设置flag为true，否则flag永远为false。（取消双击需要单击红星的操作）。

再为背景设置一个双击事件（与图片事件区分开，也可不加，无伤大雅），如果双击到了背景就设置flag为false，否则flag永远为true。（双击屏幕进行点赞的操作）