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

目录：

1、引言

2、功能介绍

3、BGABadgeView 使用指南

4、BGABadgeView 开发指南

5、《HarmonyOS三方件开发指南》系列文章合集

 

引言

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

功能介绍

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

1.图片徽章：

2.文字徽章:

3.拖动徽章爆炸:

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

BGABadgeView 使用指南

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

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

Ø 修改配置文件

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

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:id="$+id:layout1"
    ohos:orientation="vertical">
    <DependentLayout
        ohos:id="$+id:dependent1"
        ohos:height="200vp"
        ohos:width="match_parent">

        <com.example.bgabadgecomp_library.BAGDragBadgeImage
            ohos:top_margin="15vp"
            ohos:right_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:scale_mode="zoom_center"
            ohos:image_src="$media:avator"
            ohos:id="$+id:image1"
            ohos:below="$id:title"
            ohos:left_margin="30vp"/>
        <Image
            ohos:top_margin="15vp"
            ohos:right_margin="10vp"
            ohos:bottom_margin="10vp"
            ohos:height="80vp"
            ohos:width="80vp"
            ohos:scale_mode="zoom_center"
            ohos:image_src="$media:avator"
            ohos:id="$+id:image2"
            ohos:end_of="$id:image1"
            ohos:below="$id:title"
            ohos:left_margin="10vp"/>
           </DependentLayout>
        <Text
            ohos:left_margin="30vp"
            ohos:id="$+id:text1"
            ohos:top_margin="10vp"
            ohos:right_margin="15vp"
            ohos:bottom_margin="10vp"
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:text="测试1"