徽章控件(BadgeView),显示效果:气泡提醒消息数量等

作者 : 开心源码 本文共2921个字,预计阅读时间需要8分钟 发布时间: 2022-05-12 共166人阅读

BadgeView

形容:控件实现简单,使用,功能较全面,逻辑简单,大家完全可以拿这用,不用造轮子,假如大家有其余需求也可以给我提。
使用说明:气泡提醒消息数量等。

功能形容: 可以自己设置气泡背景颜色、显示文本(字符串)、边框颜色、边框宽度、在界面中显示的位置

实例图:

使用说明

使用方式一:布局中使用

第一步:布局用BadgeView将目标view进行包裹,并定义相关属性

 <com.chinaway.android.view.BadgeView                        android:id="@+id/tag_process"                        android:layout_width="0dp"                        android:layout_height="match_parent"                        android:layout_weight="1"                        android:paddingTop="4dp"                        app:badgeAnchorPosition="AnchorRightTop"                        app:badgeBgColor="@color/NC10"                        app:badgeBorderColor="@color/white"                        app:badgeBorderWidth="2dp"                        app:badgeMarginHorizon="16dp"                        app:badgeTextColor="@color/white"                        app:badgeTextSize="10sp">                        <TextView                            android:id="@+id/tv_processing"                            android:layout_width="match_parent"                            android:layout_height="match_parent"                            android:drawablePadding="10dp"                            android:drawableTop="@drawable/ic_home_progress"                            android:gravity="center_horizontal"                            android:text="@string/label_processing"                            android:textColor="@color/NC4"                            android:textSize="@dimen/font_size_12_SP" />                    </com.chinaway.android.view.BadgeView>

第二步:使用

//找到BadgeViewBadgeView badgeView = (BadgeView) findViewById(R.id.tag_solve);//设置显示文本        badgeView.setBadgeText("99+");

使用方式二:动态增加徽章控件

 //动态增加        TextView button = findViewById(R.id.button);        final BadgeView badgeV = new BadgeView(this);        badgeV.attach(button)                .setBadgeAnchorPosition(BadgeView.ANCHOR_LEFT_TOP)                .setBadgeBgcolor(getResources().getColor(android.R.color.holo_green_light))                .setBadgeBordercolor(getResources().getColor(android.R.color.white))                .setBorderWidth(2)                .setMarginHorizon(8)                .setMarginVertical(2)                .setBadgeTextcolor(getResources().getColor(android.R.color.holo_red_light))                .setBadgeTextSize(14)                .setPaddingH(12)                .setPaddingV(7)                .showBadge("啦");

控件属性说明

 <declare-styleable name="BadgeView">        <!--显示文本-->        <attr name="badgeText" format="string" />        <!--文本字体大小-->        <attr name="badgeTextSize" format="dimension" />        <!--文本颜色-->        <attr name="badgeTextColor" format="color" />        <!--边框宽度-->        <attr name="badgeBorderWidth" format="dimension" />        <!--边框颜色-->        <attr name="badgeBorderColor" format="color" />        <!--气泡背景色-->        <attr name="badgeBgColor" format="color" />        <!--徽章显示的位置-->        <attr name="badgeAnchorPosition">            <enum name="AnchorLeftTop" value="0" />            <enum name="AnchorLeftBottom" value="1" />            <enum name="AnchorRightTop" value="2" />            <enum name="AnchorRightBottom" value="3" />        </attr>        <!--徽章在水平方向的margin-->        <attr name="badgeMarginHorizon" format="dimension" />        <!--徽章在垂直方向的margin-->        <attr name="badgeMarginVertical" format="dimension" />        <!--徽章内部水平padding-->        <attr name="badgePaddingHorizon" format="dimension" />        <!--徽章内部垂直padding-->        <attr name="badgePaddingVertical" format="dimension" />    </declare-styleable>

特别说明:当只想显示一个气泡,不显示文本内容的时候,badgeText传入空格就好,传入 null则代表不绘制徽章
app:badgeText=" "

badgeAnchorPosition徽章显示位置说明

为了方便计算徽章在布局中的位置

特别提供了:左上、右上、左下、右下 ,四个方位
其次提供:badgeMarginHorizon、badgeMarginVertical 来控制在水平方向和垂直方向的margin,其实就是相对于 badgeAnchorPosition 这个方位值的x、y方向的偏移量 ,这个偏移量并Android坐标上的偏移,二是相对于badgeAnchorPosition的偏移

例如:

        app:badgeAnchorPosition="AnchorRightTop"        app:badgeMarginHorizon="16dp"        app:badgeMarginVertical="2dp"

说明:代表将徽章放到该view的右上角,再距离右边16dp(也就是往左16dp),再往下2dp的位置

源码地址: BadgeView-master

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 徽章控件(BadgeView),显示效果:气泡提醒消息数量等

发表回复