当前位置: 首页 > 科技观察

鸿蒙实战——实现抖音点赞和取消的效果

时间:2023-03-20 01:37:03 科技观察

更多内容请访问:鸿蒙科技社区https://harmonyos.51cto.com,与华为官方共同打造1.双击进入点赞并双击取消点赞。例如:在抖音中双击屏幕后,可以点赞,小红心会亮起。将白色和红色的心形图片复制到媒体上。需要图片的可以自己拍。下面的白色图片没有背景,所以显示为白色。下载后点击鼠标即可查看。因为必须双击屏幕才能点赞,所以还需要实现布局组件的id代码:ability_mainMainAbilitySlicepackagecom.xdr630.listenerapplication6.slice;importcom.xdr630。listenerapplication6.ResourceTable;importohos.aafwk.ability.AbilitySlice;importohos.aafwk.content.Intent;importohos.agp.components.Component;importohos.agp.components.DirectionalLayout;importohos.agp.components.Image;publicclassMainAbilitySliceextendsAbilitySliceimplementsComponent.DoubleClickedListener{Imageimage;@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//1.查找图片组件image=(Image)findComponentById(ResourceTable.Id_img);//查找DirectionalLayoutdl=(DirectionalLayout)findComponentById(ResourceTable.Id_dl);//2.给布局添加双击事件dl.setDoubleClickedListener(this);}@OverridepublicvoidonActive(){super.onActive();}@OverridepublicvoidonForeground(Intentintent){super.onForeground(intent);}//如果标记为false,表示没有喜欢,此时白色会变成红色。//如果标记为真,则表示已被点赞。再次双击后,红色会变回白色booleanflag=false;@OverridepublicvoidonDoubleClick(Componentcomponent){//修改图片的红色星号,直接使用图片即可,所以将图片设置为成员变量if(flag){image.setImageAndDecodeBounds(ResourceTable.Media_white);//把like取消掉变成白色,并设置flag为falseflag=false;}else{image.setImageAndDecodeBounds(ResourceTable.Media_red);//启动项目时,flag的初始值为false,会转到下面的else代码,变红后,flag应该改为trueflag=true;}}}运行:双击屏幕点赞:Double-点击屏幕取消点赞:2.可以是按照抖音的业务执行的吗?业务分析:双击屏幕后点赞(上面实现),再次双击屏幕后点赞不会取消,点红心后才能取消点赞。也可以点红心点赞,再次点红心取消点赞。实现思路:1.在最外层布局中添加双击事件。双击点赞后,变成红心。如果已经被点过赞,还是会改成红心,相当于什么都不做。2.给图片添加点击事件。如果没有点赞,点击后白心会变成红心。如果已经点赞,点击后红心会变成白心。代码实现:上面的布局文件不变,MainAbilitySlice如下:在布局中添加双击事件,因为再次双击不会取消点赞,所以将else代码设置为红色,然后去掉flag,并且不会出现双击取消点赞的情况。为图片添加点击事件,因为点赞后会变成红色,取消后会变成白色,所以flag要改成相反的操作packagecom.xdr630.listenerapplication6.slice;importcom.xdr630.listenerapplication6。资源表;importohos。aafwk.ability.AbilitySlice;importohos.aafwk.content.Intent;importohos.agp.components.Component;importohos.agp.components.DirectionalLayout;importohos.agp.components.Image;publicclassMainAbilitySliceextendsAbilitySliceimplementsComponent.DoubleClickedListener,Component.ClickedListener{Imageimage;@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//1.查找图片组件image=(Image)findComponentById(ResourceTable.Id_img);//查找覆盖屏幕布局的对象DirectionalLayoutdl=(DirectionalLayout)findComponentById(ResourceTable.Id_dl);//2.为布局添加双击事件dl.setDoubleClickedListener(this);//3.为图片添加点击事件image.setClickedListener(this);}@OverridepublicvoidonActive(){super.onActive();}@OverridepublicvoidonForeground(Intentintent){super.onForeground(intent);}//如果标记为false,则意味着没有喜欢,此时,由白变红//如果标记为true,则表示已被点赞,再次双击后,会变红变回白色booleanflag=false;@OverridepublicvoidonDoubleClick(Componentcomponent){//修改图片的红色星号。只需要用到图片,所以把图片设置成成员变量}else{image.setImageAndDecodeBounds(ResourceTable.Media_red);//项目启动时,flag初始值为false,会使用下面的else代码。这时候设置为红色,去掉flag,再次双击,还是红色的}else{image.setImageAndDecodeBounds(ResourceTable.Media_red);flag=true;}}}运行:点击红心之后:再次点击红心:双击屏幕后效果如下,双击再次刷屏不会取消点赞,只有点击小红心才能取消点赞社区https://harmonyos.51cto.com