Android實現小圓點顯示未讀功能

代碼地址如下：
http://www.demodashi.com/demo/13541.html

前言

以前我們實現這個功能都是用 BadgeView.java，大體就是將這個java類復制到自己的項目中，然后在項目中使用，今天講的也是一款BadgeView，我將其封裝稱工具類Badgetor，下面作以講解。

1. “新“BadgeView的優點
2. BadgeView 庫的導入
3. BadgeView的封裝類Badgetor
4. Badgetor在activity中的使用
5. 效果圖和項目結構圖

一. “新“BadgeView的優點

今天要介紹的BadgeView相比於以前的BadgeView有以下優點：

1. 不需要引入大量的代碼，直接引入庫
2. 在設置小圓點相對位置的時候更加簡單

二. BadgeView 庫的導入

需要導入庫,在app的build.gradle中添加依賴：

//小圓點
implementation 'q.rorbin:badgeview:1.1.3'

若以上導入失敗,可能是 implementation 關鍵字的原因，可改成以下代碼重新導入：

//小圓點
compile 'q.rorbin:badgeview:1.1.3'

三. BadgeView的封裝類Badgetor的使用

我將 "新"BadgeView特性封裝稱一個工具類Badgetor，下面對其使用做以講解。

3.1 設置一個顯示數字的小圓點

public void showNumPoint(View targetView, int count, Context context);

其中，targetView為你要設置顯示小圓點的view。count為要顯示的數字。

3.2 獲取小圓點上的數字

public int getPointNum();

3.3 顯示文字小圓點

public void showTextPoint(View targetView, String text, Context context);

3.4 獲取小圓點上的文字

public String getPointText()

3.5 隱藏小圓點

public void hideBadgeView();

3.6 打開拖拽消除模式並設置監聽

注：只有當設置了拖曳監聽才會有拖曳效果

public void setOnDragStateChangedListener(Badge.OnDragStateChangedListener listener);

3.7 設置文字大小

默認文字大小為 8sp

public void setTextSize(float textSize);

3.8 設置文字顏色

默認白色

public void setTextColor(int textColor);

3.9 設置是否顯示精確數值

默認不顯示精確度，即當數字超過100的時候，在小圓點上顯示 99+

public void setExactMode(boolean exactMode);

3.10 設置BadgeView相對view的位置

默認為顯示在tagetView右上角

public void setGravity(int gravity)

3.11 設置外邊距

默認外邊距為 2dp

public void setOffset(float offset)

3.12 設置內邊距

默認內邊距為 2dp

public void setPadding(float padding)

3.13 設置背景色

默認背景色為紅色

public void setBackgroundColor(int backgroundColor)

3.14 設置背景圖片

public void setBackgroundDrawable(Drawable backgroundDrawable)

3.15 設置陰影

public void setShadow(boolean shadow)

3.16 設置描邊屬性

public void setStoke(boolean stoke,int color,int width)

3.17 設置是否開啟隱藏動畫

默認動畫效果開啟

public void setAnimate(boolean animate)

四. Badgetor在activity中的使用

4.1 在MainActivity中的使用樣例

package com.android.testdemo.main;

import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.android.testdemo.R;
import com.android.testdemo.base.BaseActivity;

import butterknife.BindView;
import q.rorbin.badgeview.Badge;

public class MainActivity extends BaseActivity{

    @BindView(R.id.button1)
    Button mBtnText;
    @BindView(R.id.tv_test)
    TextView mTvTest;

    @Override
    protected int getContentViewId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData() {
        //設置文字大小8sp
        Badgetor.getInstance().setTextSize(8);
        //設置文字顏色
        Badgetor.getInstance().setTextColor(Color.parseColor("#ffffff"));
        //設置精確數值,只有設置數字的時候才生效,false時當數字大於99時顯示99+，true時數字大於99時顯示實際數字
        Badgetor.getInstance().setExactMode(true);
        //設置BadgeView相對mTvTest的位置,右上角
        Badgetor.getInstance().setGravity(Gravity.RIGHT|Gravity.TOP);
        //設置外邊距2dp
        Badgetor.getInstance().setOffset(2);
        //設置內邊距2dp
        Badgetor.getInstance().setPadding(2);
        //設置背景色
        Badgetor.getInstance().setBackgroundColor(Color.parseColor("#ff0000"));
        //不設置背景圖片
        Badgetor.getInstance().setBackgroundDrawable(null);
        //開啟動畫效果
        Badgetor.getInstance().setAnimate(true);
        //顯示數字
        Badgetor.getInstance().showNumPoint(mTvTest,190,MainActivity.this);
        //獲取數字
        int count=Badgetor.getInstance().getPointNum();

//        //顯示文字
//        Badgetor.getInstance().showTextPoint(mTvTest, "大家好", MainActivity.this);
//        //獲取文字
//        String message=Badgetor.getInstance().getPointText();
    }

    @Override
    protected void setListener() {
        mBtnText.setOnClickListener(this);

        Badgetor.getInstance().setOnDragStateChangedListener(new Badge.OnDragStateChangedListener() {
            @Override
            public void onDragStateChanged(int dragState, Badge badge, View targetView) {
                //此處處理拖曳結束后的邏輯
                //......
            }
        });

    }


    @Override
    public void onClick(View v) {
        super.onClick(v);
        switch (v.getId()) {
           case R.id.button1:
               //隱藏小圓點
               Badgetor.getInstance().hideBadgeView();
               break;
           default:
               break;
         }
    }

}

4.2 activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.android.testdemo.main.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="測試"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="148dp" />

    <TextView
        android:id="@+id/tv_test"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="30dp"
        android:text="TextView"
        android:gravity="center"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/button1"
        tools:layout_editor_absoluteX="163dp"
        tools:ignore="MissingConstraints" />


</android.support.constraint.ConstraintLayout>

五. 效果圖和項目結構圖

項目運行效果圖

項目結構圖

Android實現小圓點顯示未讀功能

代碼地址如下：
http://www.demodashi.com/demo/13541.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權