一、双击点赞 和 双击取消点赞
如：在抖音中双击屏幕之后就可以点赞，小红心就会变亮。
把白色和红色的心形图片复制到 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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
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.
运行：
双击屏幕点赞：
双击屏幕后取消点赞：
二、能否按照抖音的业务去实现呢?
业务分析：
- 双击屏幕之后点赞。(上面已实现)，再次双击屏幕之后，不会取消点赞，只有点击后红心之后才能取消点赞。
- 单击红心也可以点赞，再次单击红心就会取消点赞
实现思路：
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;
}
}
}
- 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.
运行：
单击红心后：
再次单击红心：
双击屏幕后效果如下，再次双击屏幕就不会取消点赞了，只有点击小红心才能取消点赞
