Android BGABadgeView：新消息/未接来电/未读消息/新通知圆球红点提示（1）

待我称王封你为后i 2023-10-17 06:19 17阅读 0赞

**Android BGABadgeView：新消息/未接来电/未读消息/新通知圆球红点提示（1）**

现在很多的APP会有新消息/未接来电/未读消息/新通知圆球红点提示，典型的以微信、QQ新消息提示为例，当微信朋友圈有新的朋友更新/发布朋友圈消息后，在微信的底部切换卡上会有一个红色的小圆球红点，表示有新消息，提示用户查看。  
这种红色小圆点小圆球的实现方式很多种，简单期间，一个简单思路：可以用一个Framelayout里面套一个TextView（如果有未读消息数目）或者一个圆形shape显示，以红色为背景。详细请见附录文章1、2。  
另外的就是使用一些第三方的开源项目，则更为通用。比如Android BGABadgeView，Android BGABadgeView在github上的项目主页是：[https://github.com/bingoogolapple/BGABadgeView-Android][https_github.com_bingoogolapple_BGABadgeView-Android]  
BGABadgeView实现了更多类型、更复杂的这类设计开发的需求。如图所示：

![Center][]

但是Android BGABadgeView在其项目主页上给出的项目代码下载后导入我的Android studio出现很多配置问题，我重新把最重要的库调整好，push到一个新的地址：[https://github.com/zhangphil/BGABadgeView][https_github.com_zhangphil_BGABadgeView]  
使用时候，直接将其下载，作为一个库导入到自己的项目中即可。  
基于我整理后的这个库，我写一个简单例子。  
先写布局：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="zhangphil.demo.MainActivity">
    
        <cn.bingoogolapple.badgeview.BGABadgeTextView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_centerInParent="true"
            android:background="@android:color/holo_blue_light"
            android:text="zhang phil @ csdn"
            android:textColor="@android:color/white"
            app:badge_gravity="rightTop"
            app:badge_dragable="true"
            app:badge_padding="6dp" />
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="显示/隐藏小红点"
            android:id="@+id/button"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

Java代码：

package zhangphil.demo;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    
    import cn.bingoogolapple.badgeview.BGABadgeTextView;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            final BGABadgeTextView badgeTextView= (BGABadgeTextView) findViewById(R.id.text);
            badgeTextView.showCirclePointBadge();
    
            findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(badgeTextView.isShowBadge())
                        badgeTextView.hiddenBadge();
                    else
                        badgeTextView.showCirclePointBadge();
                }
            });
        }
    }

代码运行结果：

![Center 1][]

附录文章：  
1，《仿微信、短信、QQ等消息数目右上角红色小圆球气泡显示（基于Android XML布局文件实现）》链接地址：[http://blog.csdn.net/zhangphil/article/details/43702953][http_blog.csdn.net_zhangphil_article_details_43702953]  
2，《仿短信条目右上角的红色小圆球提示气泡》链接地址：[http://blog.csdn.net/zhangphil/article/details/43667727][http_blog.csdn.net_zhangphil_article_details_43667727]

[https_github.com_bingoogolapple_BGABadgeView-Android]: https://github.com/bingoogolapple/BGABadgeView-Android
[Center]: https://img-blog.csdn.net/20160704174046585?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[https_github.com_zhangphil_BGABadgeView]: https://github.com/zhangphil/BGABadgeView
[Center 1]: https://img-blog.csdn.net/20160704174139305?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_43702953]: http://blog.csdn.net/zhangphil/article/details/43702953
[http_blog.csdn.net_zhangphil_article_details_43667727]: http://blog.csdn.net/zhangphil/article/details/43667727