现在很多的 APP 会有新消息/未接来电/未读消息/新通知圆球红点提示，典型的以微信、QQ 新消息提示为例。

③拖动徽章爆炸：

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

02BGABadgeView 使用指南

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

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

②修改配置文件

修改主页面的布局文件：

修改 MainAbilitySlice 中的 UI 加载代码，在 MainAbilitySlince 类的 onStart 函数中，增加如下代码：

@Overridepublic void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); BAGDragBadgeImage bagDragBadgeImage = (BAGDragBadgeImage) findComponentById(ResourceTable.Id_image1); bagDragBadgeImage.setCornerRadius(bagDragBadgeImage.getWidth() / 2); // 圆形边框 DependentLayout stackLayout = (DependentLayout) findComponentById(ResourceTable.Id_layout1); Image image2 = (Image) findComponentById(ResourceTable.Id_image2); image2.setCornerRadius(20); DependentLayout.LayoutConfig config = new DependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_PARENT, DependentLayout.LayoutConfig.MATCH_PARENT); RoundRectImage roundRectImage = RoundRectImage.attach2Window(this, stackLayout, image2, config, BGABadgeViewHelper.getPixelMap(this, ResourceTable.Media_avatar_vip)); RoundRectText roundRectText = RoundRectText.attach2Window(this, stackLayout, image3, config); Text text1 = (Text) findComponentById(ResourceTable.Id_text1); RoundRectText roundText1 = RoundRectText.attach2Window(this, stackLayout, text1, config); roundText1.setBadgeText("qqqqqqqq"); List componentList = new ArrayList(); componentList.add(roundRectText); componentList.add(roundText1); stackLayout.setTouchEventListener(new Component.TouchEventListener() { @Override public boolean onTouchEvent(Component component, TouchEvent event) { switch (event.getAction()) { case TouchEvent.PRIMARY_POINT_DOWN:// 手指第一次触摸到屏幕 int startX = (int) event.getPointerPosition(event.getIndex()).getX(); int startY = (int) event.getPointerPosition(event.getIndex()).getY(); if (startX roundRectImage.getCircleLeft() && startY roundRectImage.getCircleTop()) { roundRectImage.setDraggedListener(DRAG_HORIZONTAL_VERTICAL, roundRectImage ); for (Component component1 : componentList) { component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null); } } else { roundRectImage.setDraggedListener(DRAG_HORIZONTAL_VERTICAL, null ); for (Component component1 : componentList) { RoundRectText rectText = (RoundRectText) component1; if (startX rectText.getCircleLeft() && startY rectText.getCircleTop()) { component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL, (Component.DraggedListener) component1); } else { component1.setDraggedListener(DRAG_HORIZONTAL_VERTICAL,null); } } } break; case TouchEvent.PRIMARY_POINT_UP: case TouchEvent.POINT_MOVE: default: break; } return true; } });}

03BGABadgeView 开发指南

①新建一个 Module

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

②新建一个 RoundRectText 类

@Overridepublic void onDraw(Component component, Canvas canvas){ length = mBadgeText.length(); Paint mTextPain = new Paint(); mTextPain.setColor(Color.WHITE); mTextPain.setStyle(Paint.Style.FILL_STYLE); mTextPain.setTextSize(30); mTextPain.setFont(Font.DEFAULT); Rect textBounds = mTextPain.getTextBounds(mBadgeText); Paint mBadgePaint = new Paint(); mBadgePaint.setColor(Color.RED); mBadgePaint.setStyle(Paint.Style.FILL_STYLE); mBadgePaint.setStrokeWidth(5); if (mBadgeRectF == null) { switch (mBadgeGravity) { case RightTop: int left = mComponent.getLeft(); int top = mComponent.getTop(); circleLeft = mComponent.getWidth() left - 2 * radius - 15 * (length - 2); circleTop = top; mBadgeRectF = new RectFloat( circleLeft, circleTop, circleLeft 2 * radius 15 * (length - 2) , circleTop 2 * radius); break; case RightCenter: left = mComponent.getLeft(); top = mComponent.getTop(); circleLeft = mComponent.getWidth() left - 2 * radius - 15 * (length - 2); circleTop = top (float)mComponent.getHeight() / 2 - radius; mBadgeRectF = new RectFloat( circleLeft, circleTop, circleLeft 2 * radius 15 * (length - 2) , circleTop 2 * radius); break; case RightBottom: mBadgeRectF = new RectFloat(); left = mComponent.getLeft(); top = mComponent.getTop(); circleLeft = mComponent.getWidth() left - 2 * radius - 15 * (length - 2) ; circleTop = top mComponent.getHeight() - 2 * radius; mBadgeRectF = new RectFloat( 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 = path > overPath; float offSet = (float) (textBounds.top textBounds.bottom) / 2; float boundsX = 0 ; if( 15 * length < (mBadgeRectF.right - mBadgeRectF.left)){ float temp = mBadgeRectF.right - mBadgeRectF.left - 15 * length; boundsX = temp / 2; } float roundNum = 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);}

生成拖拽事件：

@Overridepublic void onDragDown(Component component, DragInfo dragInfo) { pointX = dragInfo.downPoint.getPointX(); pointY = dragInfo.downPoint.getPointY(); if (pointX = circleLeft 2 * radius 15 * (length - 2) || pointY = circleTop 2 * radius) { onDragCancel(component, dragInfo); }}@Overridepublic void onDragStart(Component component, DragInfo dragInfo) {}@Overridepublic void onDragUpdate(Component component, DragInfo dragInfo) { float left = mBadgeRectF.left; float right = mBadgeRectF.right; float top = mBadgeRectF.top; float bottom = mBadgeRectF.bottom; if (pointX = circleLeft 2 * radius 15 * (length - 2) || 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(); }}@Overridepublic void onDragEnd(Component component, DragInfo dragInfo) { if (isOverPath) { explosionField.explode(component, mBadgeRectF, explosionFieldColor); } else { mBadgeRectF = new RectFloat(circleLeft, circleTop , circleLeft 2 * radius 15 * (length - 2), circleTop 2 * radius); invalidate(); }}@Overridepublic void onDragCancel(Component component, DragInfo dragInfo) { mBadgeRectF = new RectFloat(circleLeft, circleTop , circleLeft 2 * radius 15 * (length - 2), circleTop 2 * radius); invalidate();}

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

③编译 HAR 包

利用 Gradle 可以将 HarmonyOS Library 库模块构建为 HAR 包。

构建 HAR 包的方法如下：

更多原创，请关注软通动力 HarmonyOS 学院：

https://harmonyos.51cto.com/column/30

作者：软通田可辉

原文链接：https://mp.weixin.qq.com/s/CFFito-ic2VA9k9BL8cg2A

花粉社群VIP加油站