更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com，与华为官方共同打造新消息/未接来电/未读消息/新消息通知球红点提醒，一般以微信和QQ新消息通知为例，当有新朋友在微信朋友圈更新/发布消息时，切换卡片上会有一个小红球和红点底部，表示有新消息，提示用户查看。它在消息传递和通信应用程序中非常有用。功能介绍鸿蒙BGABadgeView徽章组件，主要功能包括：传入图片生成徽章，设置文本生成文字徽章，每个徽章拖动超出范围即可移除，在范围内可以回到原位。模拟器效果图如下1.图片徽章：2.文字徽章：3.拖动徽章爆炸：使用时直接下载，以har包的形式导入到自己的工程中。下面详细介绍BGABadgeView的使用和开发指南。BGABadgeView使用指南?新建工程，添加组件Har包依赖在应用模块中添加HAR，复制verificationcodeview-debug.har到entry\libs目录即可?修改配置文件1.修改主页面布局文件：2.在MainAbilitySlince应用程序onStart中创建MainAbilitySliceUI设置后，您需要生成MainAbilitySlince的公共条目onStart.Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);BAGDragBadgeImagebagDragBadgeImage=(BAGDragBadgeImage)findComponentById(ResourceTable.Id_image1);bagDragBadgeImage.setCornerRadius(bagDragBadgeImage.getWidth()/2);//圆形边框DependentLayoutstackLayout=(DependentLayout)findComponentById(ResourceTable.Id_layout1);Imageimage2=(Image)findComponentById(ResourceTable.Id_image2);image2.setCornerRadius(20);DependentLayout.LayoutConfigconfig=newDependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_PARENT,DependentLayout.LayoutConfig.MATCH_PARENT);RoundRectImageroundRectImage=RoundRectImage.attach2Window(this,stackLayout,image2,config,BGABadgeViewHelper.getPixelMap(this,ResourceTable).Media_avatar_vip));RoundRectTextroundRectText=RoundRectText.attach2Window(this,stackLayout,image3,config);Texttext1=(Text)findComponentById(ResourceTable.Id_text1);RoundRectTextroundText1=RoundRectText.attach2Window(this,stackLayout,text1,config);roundText1.setBadgeText("qqqqqqqq");ListcomponentList=newArrayList<>();componentList.add(roundRectText);componentList.add(roundText1);stackLayout.setTouchEventListener(newComponent.TouchEventListener(){@OverridepublicbooleanonTouchEvent(Componentcomponent,TouchEventevent){switch(event.getAction()){caseTouchEvent.PRIMARY_POINT_DOWN://手指第一次触摸到屏幕intstartX=(int)event.getPointerPosition(event.getIndex()).getX();intstartY=(int)event.getPointerPosition(event.getIndex()).getY();if(startXroundRectImage.getCircleLeft()&&startYroundRectImage.getCircleTop()){roundRectImage.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,roundRectImage);for(Componentcomponent1:componentList){component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null);}}else{roundRectImage.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null);for(Componentcomponent1:componentList){RoundRectTextrectText=(RoundRectText)component1;if(startXrectText.getCircleLeft()&&startYrectText.getCircleTop()){component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,(Component.DraggedListener)component1);}else{component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null);}}}break;);}Copy通过以上两步，一个简单的徽章组件就实现了。接下来我们一起看看badge组件是如何实现的。BGABadgeView开发指南新建Module新建Module，类型选择HarmonyOSLibrary，模块名称为VerificationCodeView，如图：新建RoundRectText类1.实现自定义RoundRectText绘图@OverridepublicvoidonDraw(Componentcomponent,Canvascanvas){length=mBadgeText.length();PaintmTextPain=newPaint();mTextPain.setColor(Color.WHITE);mTextPain.setStyle(Paint.Style.FILL_STYLE);mTextPain.setTextSize(30);mTextPain.setFont(Font.DEFAULT);RecttextBounds=mTextPain.getTextBounds(mBadgeText);PaintmBadgePaint=newPaint();mBadgePaint.setColor(Color.RED);mBadgePaint.setStyle(Paint.Style.FILL_STYLE);mBadgePaint.setStrokeWidth(5);if(mBadgeRectF==null){开关(mBadgeGravity){caseRightTop:intleft=mComponent.getLeft();inttop=mComponent.getTop();circleLeft=mComponent.getWidth()+left-2*radius-15*(length-2);circleTop=top;mBadgeRectF=newRectFloat(circleLeft,circleTop,circleLeft+2*radius+15*(length-2),circleTop+2*radius);break;caseRightCenter:left=mComponent.getLeft();top=mComponent.getTop();circleLeft=mComponent.getWidth()+left-2*radius-15*(length-2);circleTop=top+(float)mComponent.getHeight()/2-radius;mBadgeRectF=newRectFloat(circleLeft,circleTop,circleLeft+2*radius+15*(length-2),circleTop+2*radius);break;caseRightBottom:mBadgeRectF=newRectFloat();left=mComponent.getLeft();top=mComponent.getTop();circleLeft=mComponent.getWidth()+left-2*radius-15*(length-2);circleTop=top+mComponent.getHeight()-2*radius;mBadgeRectF=newRectFloat(circleLeft,circleTop,circleLeft+2*radius+15*(length-2),circleTop+2*radius);break;default:break;}}path=(float)Math.sqrt((mBadgeRectF.left-circleLeft)*(mBadgeRectF.left-circleLeft)+(mBadgeRectF.top-circleTop)*(mBadgeRectF.top-circleTop));isOverPath=路径>overPath;floatoffSet=(float)(textBounds.top+textBounds.bottom)/2;floatboundsX=0;if(15*length<(mBadgeRectF.right-mBadgeRectF.left)){floattemp=mBadgeRectF.right-mBadgeRectF.left-15*length;boundsX=temp/2;}floatroundNum=2*radius/(mBadgeRectF.right-mBadgeRectF.left);canvas.drawRoundRect(mBadgeRectF,roundNum*radius,roundNum*radius,mBadgePaint);canvas.drawText(mTextPain,mBadgeText,mBadgeRectF.left+boundsX,mBadgeRectF.top+radius-offSet);}2.生成拖拽事件@OverridepublicvoidonDragDown(Componentcomponent,DragInfodragInfo){pointX=dragInfo.downPoint.getPointX();pointY=dragInfo.downPoint.getPointY();if(pointX<=circleLeft||pointX>=circleLeft+2*radius+15*(length-2)||pointY<=circleTop||pointY>=circleTop+2*radius){onDragCancel(component,dragInfo);}}@OverridepublicvoidonDragStart(Componentcomponent,DragInfodragInfo){}@OverridepublicvoidonDragUpdate(Componentcomponent,DragInfodragInfo){floatleft=mBadgeRectF.left;floatright=mBadgeRectF.right;floattop=mBadgeRectF.top;floatbottom=mBadgeRectF.bottom;if(pointX<=circleLeft||pointX>=circleLeft+2*radius+15*(length-2)||pointY<=circleTop||pointY>=circleTop+2*radius){onDragCancel(component,dragInfo);}else{mBadgeRectF.left=(float)(left+dragInfo.xOffset);mBadgeRectF.right=(float)(right+dragInfo.xOffset);mBadgeRectF.top=(float)(top+dragInfo.yOffset);mBadgeRectF.bottom=(float)(bottom+dragInfo.yOffset);invalidate();}}@OverridepublicvoidonDragEnd(Componentcomponent,DragInfodragInfo){if(isOverPath){explosionField.explode(component,mBadgeRectF,explosionFieldColor);}else{mBadgeRectF=newRectFloat(circleLeft,circleTop,circleLeft+2*radius+15*(length-2),circleTop+2*radius);invalidate();}}@OverridepublicvoidonDragCancel(Componentcomponent,DragInfodragInfo){mBadgeRectF=newRectFloat(circleLeft,circleTop,circleLeft+2*radius+15*(length-2),circleTop+2*radius);invalidate();}具体代码请下载工程查看和编译HAR包。Gradle可以将HarmonyOSLibrary模块构建成HAR包。构建HAR包的方法如下：在Gradle构建任务中，双击PackageDebugHar或PackageReleaseHar任务，构建一个Debug类型或Release类型的HAR。构建任务完成后，可以在项目目录下的VerificationCodeView>bulid>outputs>har目录下获取生成的HAR包。更多信息请访问：Harmonyos.51cto.com，与华为官方合作打造的鸿蒙技术社区
