本文已收录于专栏
欢迎各位关注、三连博主的文章及专栏，每周定期更新1-5篇基础文章，共勉！
目录
一、需求：
本文的需求是模仿抖音的点赞和取消点赞；主要有两个部分，点赞和取消点赞。
点赞有两种方式：
- 单击为点赞的小爱心
- 双击屏幕，如果未点赞则为点赞
取消点赞有一种方式：
- 单击已点赞的小爱心
上述点赞和未点赞的状态是根据小爱心的颜色来区分的，未点赞为白色小爱心，点赞之后为红色小爱心
二、实现步骤：
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);
????}
}
双击屏幕效果
单击小爱心效果，已点赞变为未点赞
单击小爱心效果，未点赞变为已点赞
