文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HarmonyOS三方件开发指南(19)-BGABadgeView徽章组件

2024-12-03 05:08

关注

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

引言

现在很多的APP会有新消息/未接来电/未读消息/新通知圆球红点提示,典型的以微信、QQ新消息提示为例,当微信朋友圈有新的朋友更新/发布朋友圈消息后,在微信的底部切换卡上会有一个红色的小圆球红点,表示有新消息,提示用户查看。在消息通讯类的app中十分实用。

功能介绍

鸿蒙BGABadgeView 徽章组件,主要功能包括:传入图片生成徽章,设置文本生成文本徽章,并且每个徽章都具有拖拽超范围即可消除,范围内即可回到原位置。模拟机效果图如下

图片徽章:


文字徽章:

拖动徽章爆炸:

使用时候,直接将其下载,作为一个har包导入到自己的项目中即可。下面则详细介绍BGABadgeView 的使用以及开发指南。

BGABadgeView 使用指南

Ø 新建工程, 添加组件Har包依赖

在应用模块中添加HAR,只需要将verificationcodeview-debug.har复制到entry\libs目录下即可

Ø 修改配置文件

修改主页面的布局文件:

  1. "1.0" encoding="utf-8"?> 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.     ohos:height="match_parent" 
  4.     ohos:width="match_parent" 
  5.     ohos:id="$+id:layout1" 
  6.     ohos:orientation="vertical"
  7.     
  8.         ohos:id="$+id:dependent1" 
  9.         ohos:height="200vp" 
  10.         ohos:width="match_parent"
  11.  
  12.         
  13.             ohos:top_margin="15vp" 
  14.             ohos:right_margin="10vp" 
  15.             ohos:bottom_margin="10vp" 
  16.             ohos:height="80vp" 
  17.             ohos:width="80vp" 
  18.             ohos:scale_mode="zoom_center" 
  19.             ohos:image_src="$media:avator" 
  20.             ohos:id="$+id:image1" 
  21.             ohos:below="$id:title" 
  22.             ohos:left_margin="30vp"/> 
  23.         
  24.             ohos:top_margin="15vp" 
  25.             ohos:right_margin="10vp" 
  26.             ohos:bottom_margin="10vp" 
  27.             ohos:height="80vp" 
  28.             ohos:width="80vp" 
  29.             ohos:scale_mode="zoom_center" 
  30.             ohos:image_src="$media:avator" 
  31.             ohos:id="$+id:image2" 
  32.             ohos:end_of="$id:image1" 
  33.             ohos:below="$id:title" 
  34.             ohos:left_margin="10vp"/> 
  35.             
  36.         
  37.             ohos:left_margin="30vp" 
  38.             ohos:id="$+id:text1" 
  39.             ohos:top_margin="10vp" 
  40.             ohos:right_margin="15vp" 
  41.             ohos:bottom_margin="10vp" 
  42.             ohos:height="40vp" 
  43.             ohos:width="match_parent" 
  44.             ohos:text="测试1" 
  45.             ohos:below="$id:dependent1" 
  46.             ohos:text_size="20vp"/> 
  47.  

 2.修改MainAbilitySlice中的UI加载代码

在MainAbilitySlince类的onStart函数中,增加如下代码:

  1. @Override 
  2. public void onStart(Intent intent) { 
  3.     super.onStart(intent); 
  4.     super.setUIContent(ResourceTable.Layout_ability_main); 
  5.  
  6.     BAGDragBadgeImage bagDragBadgeImage = (BAGDragBadgeImage) findComponentById(ResourceTable.Id_image1); 
  7.     bagDragBadgeImage.setCornerRadius(bagDragBadgeImage.getWidth() / 2); // 圆形边框 
  8.     DependentLayout stackLayout = (DependentLayout) findComponentById(ResourceTable.Id_layout1); 
  9.  
  10.     Image image2 = (Image) findComponentById(ResourceTable.Id_image2); 
  11.     image2.setCornerRadius(20); 
  12.  
  13.     DependentLayout.LayoutConfig config = new DependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_PARENT, DependentLayout.LayoutConfig.MATCH_PARENT); 
  14.  
  15.     RoundRectImage roundRectImage = RoundRectImage.attach2Window(this, stackLayout, image2, config, BGABadgeViewHelper.getPixelMap(this, ResourceTable.Media_avatar_vip)); 
  16.  
  17.     RoundRectText roundRectText = RoundRectText.attach2Window(this, stackLayout, image3, config); 
  18.  
  19.     Text text1  = (Text) findComponentById(ResourceTable.Id_text1); 
  20.     RoundRectText roundText1 = RoundRectText.attach2Window(this, stackLayout, text1, config); 
  21.     roundText1.setBadgeText("qqqqqqqq"); 
  22.     List componentList = new ArrayList<>(); 
  23.     componentList.add(roundRectText); 
  24.     componentList.add(roundText1); 
  25.  
  26.     stackLayout.setTouchEventListener(new Component.TouchEventListener() { 
  27.         @Override 
  28.         public boolean onTouchEvent(Component component, TouchEvent event) { 
  29.  
  30.             switch (event.getAction()) { 
  31.                 case TouchEvent.PRIMARY_POINT_DOWN:// 手指第一次触摸到屏幕 
  32.                     int startX = (int) event.getPointerPosition(event.getIndex()).getX(); 
  33.                     int startY = (int) event.getPointerPosition(event.getIndex()).getY(); 
  34.                    if (startX < roundRectImage.getCircleLeft() + 2 * roundRectImage.getCircleRadius() 
  35.                            && startX > roundRectImage.getCircleLeft() 
  36.                            && startY < roundRectImage.getCircleTop() + 2 * roundRectImage.getCircleRadius() 
  37.                            && startY > roundRectImage.getCircleTop()) { 
  38.                        roundRectImage.setDraggedListener(DRAG_HORIZONTAL_VERTICAL, roundRectImage ); 
  39.  
  40.                        for (Component component1 : componentList) { 
  41.                            component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null); 
  42.                        } 
  43.                    } else { 
  44.                        roundRectImage.setDraggedListener(DRAG_HORIZONTAL_VERTICAL, null ); 
  45.  
  46.                        for (Component component1 : componentList) { 
  47.                            RoundRectText rectText = (RoundRectText) component1; 
  48.                            if (startX < rectText.getCircleLeft() + 2 * rectText.getRadius() 
  49.                                    && startX > rectText.getCircleLeft() 
  50.                                    && startY < rectText.getCircleTop() + 2 * rectText.getRadius() 
  51.                                    && startY > rectText.getCircleTop()) { 
  52.                                component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL, (Component.DraggedListener) component1); 
  53.                            } else { 
  54.                                component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null); 
  55.                            } 
  56.                        } 
  57.                    } 
  58.  
  59.                     break; 
  60.                 case TouchEvent.PRIMARY_POINT_UP: 
  61.                 case TouchEvent.POINT_MOVE: 
  62.                 default
  63.                     break; 
  64.             } 
  65.             return true
  66.         } 
  67.     }); 

 复制通过以上两个步骤,就实现了简单的徽章组件,接下来在一起看下徽章组件是如何实现的。

BGABadgeView 开发指南

新建一个Module

新建一个Module,类型选择HarmonyOS Library,模块名为VerificationCodeView,如图:

新建一个RoundRectText类

实现自定义RoundRectText绘制

  1. @Override 
  2. public void onDraw(Component component, Canvas canvas){ 
  3.     length = mBadgeText.length(); 
  4.     Paint mTextPain = new Paint(); 
  5.     mTextPain.setColor(Color.WHITE); 
  6.     mTextPain.setStyle(Paint.Style.FILL_STYLE); 
  7.     mTextPain.setTextSize(30); 
  8.     mTextPain.setFont(Font.DEFAULT); 
  9.     Rect textBounds = mTextPain.getTextBounds(mBadgeText); 
  10.  
  11.     Paint mBadgePaint = new Paint(); 
  12.     mBadgePaint.setColor(Color.RED); 
  13.     mBadgePaint.setStyle(Paint.Style.FILL_STYLE); 
  14.     mBadgePaint.setStrokeWidth(5); 
  15.     if (mBadgeRectF == null) { 
  16.         switch (mBadgeGravity) { 
  17.             case RightTop: 
  18.                 int left = mComponent.getLeft(); 
  19.                 int top = mComponent.getTop(); 
  20.                 circleLeft = mComponent.getWidth() + left - 2 * radius - 15 * (length - 2); 
  21.                 circleTop = top
  22.                 mBadgeRectF = new RectFloat( circleLeft, circleTop, circleLeft + 2 * radius + 15 * (length - 2)  , circleTop + 2 * radius); 
  23.                 break; 
  24.             case RightCenter: 
  25.                 left = mComponent.getLeft(); 
  26.                 top = mComponent.getTop(); 
  27.                 circleLeft = mComponent.getWidth() + left - 2 * radius - 15 * (length - 2); 
  28.                 circleTop = top + (float)mComponent.getHeight() / 2 - radius; 
  29.                 mBadgeRectF = new RectFloat( circleLeft, circleTop, circleLeft + 2 * radius + 15 * (length - 2) , circleTop + 2 * radius); 
  30.  
  31.                 break; 
  32.             case RightBottom: 
  33.                 mBadgeRectF = new RectFloat(); 
  34.                 left = mComponent.getLeft(); 
  35.                 top = mComponent.getTop(); 
  36.                 circleLeft = mComponent.getWidth() + left - 2 * radius - 15 * (length - 2) ; 
  37.                 circleTop = top + mComponent.getHeight() - 2 * radius; 
  38.                 mBadgeRectF = new RectFloat( circleLeft, circleTop, circleLeft + 2 * radius + 15 * (length - 2) , circleTop + 2 * radius); 
  39.  
  40.                 break; 
  41.             default
  42.                 break; 
  43.         } 
  44.     } 
  45.     path = (float) Math.sqrt((mBadgeRectF.left - circleLeft) * (mBadgeRectF.left - circleLeft) + (mBadgeRectF.top - circleTop) * (mBadgeRectF.top - circleTop)); 
  46.     isOverPath = path > overPath; 
  47.     float offSet = (float) (textBounds.top + textBounds.bottom) / 2; 
  48.     float boundsX = 0 ; 
  49.     if( 15 * length < (mBadgeRectF.right - mBadgeRectF.left)){ 
  50.        float temp =  mBadgeRectF.right - mBadgeRectF.left - 15 * length; 
  51.         boundsX = temp / 2; 
  52.     } 
  53.    float roundNum = 2 * radius / (mBadgeRectF.right - mBadgeRectF.left) ; 
  54.     canvas.drawRoundRect(mBadgeRectF,roundNum * radius ,roundNum * radius, mBadgePaint); 
  55.     canvas.drawText(mTextPain, mBadgeText, mBadgeRectF.left + boundsX, mBadgeRectF.top + radius - offSet); 

 2.生成拖拽事件

  1. @Override 
  2. public void onDragDown(Component component, DragInfo dragInfo) { 
  3.      pointX = dragInfo.downPoint.getPointX(); 
  4.      pointY = dragInfo.downPoint.getPointY(); 
  5.     if (pointX <= circleLeft || pointX >= circleLeft + 2 * radius + 15 * (length - 2) 
  6.             || pointY <= circleTop || pointY >= circleTop + 2 * radius) { 
  7.         onDragCancel(component, dragInfo); 
  8.     } 
  9.  
  10. @Override 
  11. public void onDragStart(Component component, DragInfo dragInfo) { 
  12. @Override 
  13. public void onDragUpdate(Component component, DragInfo dragInfo) { 
  14.  
  15.     float left = mBadgeRectF.left
  16.     float right = mBadgeRectF.right
  17.     float top = mBadgeRectF.top
  18.     float bottom = mBadgeRectF.bottom; 
  19.  
  20.     if (pointX <= circleLeft || pointX >= circleLeft + 2 * radius + 15 * (length - 2) 
  21.             || pointY <= circleTop || pointY >= circleTop + 2 * radius) { 
  22.         onDragCancel(component, dragInfo); 
  23.     } else { 
  24.         mBadgeRectF.left = (float) (left + dragInfo.xOffset); 
  25.         mBadgeRectF.right = (float) (right + dragInfo.xOffset); 
  26.         mBadgeRectF.top = (float) (top + dragInfo.yOffset); 
  27.         mBadgeRectF.bottom = (float) (bottom + dragInfo.yOffset); 
  28.         invalidate(); 
  29.     } 
  30.  
  31. @Override 
  32. public void onDragEnd(Component component, DragInfo dragInfo) { 
  33.     if (isOverPath) { 
  34.         explosionField.explode(component, mBadgeRectF, explosionFieldColor); 
  35.     } else { 
  36.         mBadgeRectF = new RectFloat(circleLeft, circleTop , circleLeft + 2 * radius + 15 * (length - 2), circleTop + 2 * radius); 
  37.         invalidate(); 
  38.     } 
  39. @Override 
  40. public void onDragCancel(Component component, DragInfo dragInfo) { 
  41.     mBadgeRectF = new RectFloat(circleLeft, circleTop , circleLeft + 2 * radius + 15 * (length - 2), circleTop + 2 * radius); 
  42.     invalidate(); 

 具体代码请下载项目查看。

编译HAR包

利用Gradle可以将HarmonyOS Library库模块构建为HAR包,构建HAR包的方法如下:

在Gradle构建任务中,双击PackageDebugHar或PackageReleaseHar任务,构建Debug类型或Release类型的HAR。

待构建任务完成后,可以在工程目录中的VerificationCodeView> bulid > outputs > har目录中,获取生成的HAR包。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯