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

想了解更多内容，请访问：

创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为龙胜企业提供专业的网站设计、做网站，龙胜网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

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

https://harmonyos.

引言

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

功能介绍

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

1.图片徽章：

2.文字徽章:

3.拖动徽章爆炸:

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

BGABadgeView 使用指南

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

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

Ø 修改配置文件

1. 修改主页面的布局文件：

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

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

在MainAbilitySlince类的onStart函数中，增加如下代码：

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

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

BGABadgeView 开发指南

新建一个Module

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

新建一个RoundRectText类

1.实现自定义RoundRectText绘制

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

 2.生成拖拽事件

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

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

编译HAR包

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

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

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

想了解更多内容，请访问：

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

https://harmonyos.

本文标题：HarmonyOS三方件开发指南(19)-BGABadgeView徽章组件
文章来源：http://www.shufengxianlan.com/qtweb/news17/529917.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

解决方案知识

行业网站建设

成都名片印刷　　 　关键词排名优化　　 　眉山主机托管　　 　网站报价方案　　 　3D立体画　　 　主机租用　　 　成都工装公司　　 　上海济桢教育　　 　遂宁做网站　　 　阿坝网站设计　　 　成都微商城开发　　 　成都服务器托管　　 　服务器托管　　 　LED亮化工程　　 　物流公司网站建设方案　　 　成都移动服务器托管　　 　建站公司　　 　玄科环保　　 　教育培训网站建设方案　　 　绵阳电信服务器托管