返回发烧友论坛
发 帖  

[文章]HarmonyOS实战—实现抖音点赞和取消点赞效果

兮动人
2021-08-13 10:52:22
阅读量0
HarmonyOS鸿蒙OS鸿蒙系统
0
1
1. 双击点赞 和 双击取消点赞
  • 如：在抖音中双击屏幕之后就可以点赞，小红心就会变亮
  • 把白色和红色的心形图片复制到 media 下
  • 需要图片的可以自取，下面白色图片由于没有背景，所以显示的是白色的，下载后鼠标点击就能看见了
  • 因为要双击屏幕才能点赞，所以还要给布局组件id
  • 代码实现：
ability_main
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     ohos:id="$+id:dl"
  4.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  5.     ohos:height="match_parent"
  6.     ohos:width="match_parent"
  7.     ohos:alignment="center"
  8.     ohos:orientation="vertical">

  10.     <Image
  11.         ohos:id="$+id:img"
  12.         ohos:height="match_content"
  13.         ohos:width="match_content"
  14.         ohos:image_src="$media:white"
  15.         ohos:background_element="cyan"
  16.         >

  18.     </Image>



  22. </DirectionalLayout>
复制代码

MainAbilitySlice
  1. package com.xdr630.listenerapplication6.slice;

  3. import com.xdr630.listenerapplication6.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.DirectionalLayout;
  8. import ohos.agp.components.Image;

  10. public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener {

  12.     Image image;

  14.     @Override
  15.     public void onStart(Intent intent) {
  16.         super.onStart(intent);
  17.         super.setUIContent(ResourceTable.Layout_ability_main);

  19.         //1.找到图片组件
  20.         image = (Image) findComponentById(ResourceTable.Id_img);
  21.         //找到铺满屏幕布局的对象
  22.         DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);
  23.         //2.给布局添加双击事件
  24.         dl.setDoubleClickedListener(this);
  25.     }

  27.     @Override
  28.     public void onActive() {
  29.         super.onActive();
  30.     }

  32.     @Override
  33.     public void onForeground(Intent intent) {
  34.         super.onForeground(intent);
  35.     }

  37.     //如果标记为false，表示没有点赞，此时把白色变为红色
  38.     //如果标记为true，表示已经点赞，再次双击后，会把红色变回白色

  40.     boolean flag = false;

  42.     @Override
  43.     public void onDoubleClick(Component component) {
  44.         //修改图片的红星就可以了，只需要用到image就行了，所以把image定为成员变量

  46.         if (flag){
  47.             image.setImageAndDecodeBounds(ResourceTable.Media_white);
  48.             //取消点赞变成白色，也要把flag设置为false
  49.             flag = false;
  50.         }else{
  51.             image.setImageAndDecodeBounds(ResourceTable.Media_red);
  52.             //当启动项目的时候，flag初始值是false，就会走下面的else的代码，变成红色后就要把flag变成true了
  53.             flag = true;
  54.         }
  55.     }
  56. }
复制代码

  • 运行：
  • 双击屏幕点赞：
  • 双击屏幕后取消点赞：

2. 能否按照抖音的业务去实现呢?
业务分析：
  • 双击屏幕之后点赞。（上面已实现），再次双击屏幕之后，不会取消点赞，只有点击后红心之后才能取消点赞。
  • 单击红心也可以点赞，再次单击红心就会取消点赞
实现思路：
  • 给最外层的布局添加双击事件，双击之后点赞，变成红色心。如果已经被点赞，那么还是修改为红色心，相当于不做任何处理。
  • 给图片添加单击事件。如果没有点赞，单击之后，白色心变成红色心。如果已经点赞了，单击之后，红色心变成白色心。
  • 代码实现：上面布局文件不变，MainAbilitySlice 如下：
  • 给布局添加双击事件，因为再次双击不会取消点赞，所以把else代码里设置为红色后就把 flag 取反去掉，就不会出现再次双击取消点赞了。
  • 给图片添加单击事件，因为涉及到点赞后为红色，再取消就变为白色，所以要把 flag 变为相反的操作
  1. package com.xdr630.listenerapplication6.slice;

  3. import com.xdr630.listenerapplication6.ResourceTable;
  4. import ohos.aafwk.ability.AbilitySlice;
  5. import ohos.aafwk.content.Intent;
  6. import ohos.agp.components.Component;
  7. import ohos.agp.components.DirectionalLayout;
  8. import ohos.agp.components.Image;

  10. public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener, Component.ClickedListener {

  12.     Image image;

  14.     @Override
  15.     public void onStart(Intent intent) {
  16.         super.onStart(intent);
  17.         super.setUIContent(ResourceTable.Layout_ability_main);

  19.         //1.找到图片组件
  20.         image = (Image) findComponentById(ResourceTable.Id_img);
  21.         //找到铺满屏幕布局的对象
  22.         DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);
  23.         //2.给布局添加双击事件
  24.         dl.setDoubleClickedListener(this);
  25.         //3.给图片添加单击事件
  26.         image.setClickedListener(this);
  27.     }

  29.     @Override
  30.     public void onActive() {
  31.         super.onActive();
  32.     }

  34.     @Override
  35.     public void onForeground(Intent intent) {
  36.         super.onForeground(intent);
  37.     }

  39.     //如果标记为false，表示没有点赞，此时把白色变为红色
  40.     //如果标记为true，表示已经点赞，再次双击后，会把红色变回白色

  42.     boolean flag = false;


  45.     @Override
  46.     public void onDoubleClick(Component component) {
  47.         //修改图片的红星就可以了，只需要用到image就行了，所以把image定为成员变量

  49.         if (flag){
  50.             image.setImageAndDecodeBounds(ResourceTable.Media_white);
  51.             //取消点赞变成白色，也要把flag设置为false
  52.             flag = false;
  53.         }else{
  54.             image.setImageAndDecodeBounds(ResourceTable.Media_red);
  55.             //当启动项目的时候，flag初始值是false，就会走下面的else的代码，此时设置为红色，把flag去掉，再次双击后就还是红色了
  56.         }
  57.     }

  59.     @Override
  60.     public void onClick(Component component) {
  61.         if (flag){
  62.             image.setImageAndDecodeBounds(ResourceTable.Media_white);
  63.             flag = false;
  64.         }else{
  65.             image.setImageAndDecodeBounds(ResourceTable.Media_red);
  66.             flag = true;
  67.         }
  68.     }
  69. }
复制代码

  • 运行：
  • 单击红心后：
  • 再次单击红心：
  • 双击屏幕后效果如下，再次双击屏幕就不会取消点赞了，只有点击小红心才能取消点赞
  • 【本文正在参与“有奖征文 | HarmonyOS征文大赛”活动】https://bbs.elecfans.com/jishu_2098584_1_1.html

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友