Android BGABadgeView:新消息/未接来电/未读消息/新通知圆球红点提示(1)
Android BGABadgeView:新消息/未接来电/未读消息/新通知圆球红点提示(1)
现在很多的APP会有新消息/未接来电/未读消息/新通知圆球红点提示,典型的以微信、QQ新消息提示为例,当微信朋友圈有新的朋友更新/发布朋友圈消息后,在微信的底部切换卡上会有一个红色的小圆球红点,表示有新消息,提示用户查看。
这种红色小圆点小圆球的实现方式很多种,简单期间,一个简单思路:可以用一个Framelayout里面套一个TextView(如果有未读消息数目)或者一个圆形shape显示,以红色为背景。详细请见附录文章1、2。
另外的就是使用一些第三方的开源项目,则更为通用。比如Android BGABadgeView,Android BGABadgeView在github上的项目主页是:https://github.com/bingoogolapple/BGABadgeView-Android
BGABadgeView实现了更多类型、更复杂的这类设计开发的需求。如图所示:
但是Android BGABadgeView在其项目主页上给出的项目代码下载后导入我的Android studio出现很多配置问题,我重新把最重要的库调整好,push到一个新的地址: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(); } }); } }
代码运行结果:
附录文章:
1,《仿微信、短信、QQ等消息数目右上角红色小圆球气泡显示(基于Android XML布局文件实现)》链接地址:http://blog.csdn.net/zhangphil/article/details/43702953
2,《仿短信条目右上角的红色小圆球提示气泡》链接地址:http://blog.csdn.net/zhangphil/article/details/43667727