HarmonyOS（鸿蒙）——模仿抖音点赞和取消点赞

女爷i 2022-09-06 11:30 337阅读 0赞

**本文已收录于专栏**

[❤️《鸿蒙开发》❤️][Link 1]

**欢迎各位关注、三连博主的文章及专栏，每周定期更新1-5篇基础文章，共勉！**

--------------------

**目录**

一、需求：

二、实现步骤：

2.1 页面布局

2.2 业务实现

--------------------

## 一、需求： ##

本文的需求是模仿抖音的点赞和取消点赞；主要有两个部分，点赞和取消点赞。  
**点赞有两种方式：**

1.  单击为点赞的小爱心
2.  双击屏幕，如果未点赞则为点赞

**取消点赞有一种方式：**

1.  单击已点赞的小爱心

上述点赞和未点赞的状态是根据小爱心的颜色来区分的，未点赞为白色小爱心，点赞之后为红色小爱心

![white - 副本.png][white - _.png]

![red.png][]

## 二、实现步骤： ##

### 2.1 页面布局 ###

这一步中需要使用到一个标签，标签是图片控件，我们可以通过设置标签中图片的改变来标志点赞与取消点赞的状态，此外由于我们需要双击屏幕，这个时候我们需要使用到控件最外层的DirectionalLayout控件，因此我们给DirectionalLayout控件添加ID，便于定位。  
**实现代码：**

<?xml version="1.0" encoding="utf-8"?>
    
    
    <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:height="match_content"
            ohos:width="match_content"
            ohos:id="$+id:img"
            ohos:image_src="$media:white"
            ohos:background_element="#d9d9d9">
        </Image>
    
    </DirectionalLayout>

**启动程序，查看测试的效果：**

![image.png][]

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

**双击屏幕效果**

![image.png][image.png 1]

**单击小爱心效果，已点赞变为未点赞**

![image.png][image.png 2]

**单击小爱心效果，未点赞变为已点赞**

![image.png][image.png 3]

[Link 1]: https://blog.csdn.net/qq_41125219/category_11227374.html
[white - _.png]: /images/20220829/de1721f93319431d9f44db7edd521c2e.png
[red.png]: /images/20220829/fa1de21cd4434f8c966012ad8abc6c1f.png
[image.png]: /images/20220829/84e1bbdf2bb64cfeab5103f98c795f77.png
[image.png 1]: /images/20220829/8ff0647e87cb472590ada92b476ce502.png
[image.png 2]: /images/20220829/93c2db6078bb4b7e9127f6d2f341818a.png
[image.png 3]: /images/20220829/e8b1cf4f33594fa6b60b0b3c6d18bc00.png