Android仿QQ微信未讀消息小紅點(diǎn)BadgeHelper

更新時(shí)間：2021年09月09日 11:58:07 作者：MX東芝

這篇文章主要介紹了Android仿QQ微信未讀消息小紅點(diǎn)的實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Android 小紅點(diǎn) 未讀消息功能 BadgeHelper

因?yàn)樽罱捻?xiàng)目需求,翻遍github上的未讀消息紅點(diǎn)開源庫, 發(fā)現(xiàn)大部分
不能適配不同情況的布局, 所以我寫了一個(gè)能兼容全部的 !
網(wǎng)上的寫法是繼承TextView然后生成一個(gè)小紅點(diǎn)drawable,設(shè)置到背景中去, 然后把目標(biāo)view外層加一層FrameLayout,然后把小紅點(diǎn)添加進(jìn)去
但這樣做的問題來了, 小紅點(diǎn)與目標(biāo)View 會(huì)疊起來!, 擋住文字,!!! 看得我瞎了~~~ 而且他們提供的setOffsetX setpadding 之類的沒卵用,你如果想要偏移小紅點(diǎn)讓它不與下面的View重疊,那是不可能的
所以我的寫法是為了更好的性能,直接繼承View然后畫小紅點(diǎn)背景, 然后把目標(biāo)view外層加一層LinearLayout 讓小紅點(diǎn)View放目標(biāo)的右邊,這樣就不會(huì)重疊
同時(shí) 我也支持設(shè)置重疊模式和非重疊模式

這是效果圖

這里寫圖片描述

由于github賬號(hào)出問題了,沒法上傳, 所以寫到博客上算了

這只是一個(gè)小工具類供大家學(xué)習(xí)下我的思路, 就不多說了, 具體實(shí)現(xiàn)注釋里寫的很清楚,不太清楚的可以回復(fù)問我

#核心類:
##BadgeHelper .java

 
package com.truescend.gofit.views;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.IntDef;
import android.support.design.widget.TabLayout;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.reflect.Field;

/**
 * 作者:東芝(2018/8/23).
 * 支持 重疊目標(biāo)模式 和 放目標(biāo)右上角但不重疊的模式 兩種模式 通過setOverlap 設(shè)置,  默認(rèn)為false=不重疊
 */

public class BadgeHelper extends View {
    private static final String TAG = "BadgeHelper";
    private float density;
    private Paint mTextPaint;
    private Paint mBackgroundPaint;
    private String text = "0";
    private int number;

    @Type
    private int type = Type.TYPE_POINT;
    private boolean isOverlap;
    private final RectF rect = new RectF();
    private int badgeColor = 0xFFD3321B; //默認(rèn)的小紅點(diǎn)顏色
    private int textColor = 0xFFFFFFff;
    private float textSize;
    private int w;
    private int h;
    private boolean isSetup;
    private boolean mIgnoreTargetPadding;
    private boolean isCenterVertical;
    private int leftMargin;
    private int topMargin;
    private int rightMargin;
    private int bottomMargin;

    @IntDef({Type.TYPE_POINT, Type.TYPE_TEXT})
    @Retention(RetentionPolicy.SOURCE)
    public @interface Type {
        int TYPE_POINT = 0;
        int TYPE_TEXT = 1;
    }


    public BadgeHelper(Context context) {
        super(context);

    }


    private void init(@Type int type, boolean isOverlap) {
        this.type = type;
        this.isOverlap = isOverlap;
        density = getResources().getDisplayMetrics().density;

        switch (type) {
            case Type.TYPE_POINT:
                mBackgroundPaint = new Paint();
                mBackgroundPaint.setStyle(Paint.Style.FILL);
                mBackgroundPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
                mBackgroundPaint.setColor(badgeColor);
                //計(jì)算小紅點(diǎn)無文本情況下的小紅點(diǎn)大小,  按屏幕像素計(jì)算, 如果你有你自己認(rèn)為更好的算法, 改這里即可
                w = h = Math.round(density * 7f);
                break;
            case Type.TYPE_TEXT:
                mBackgroundPaint = new Paint();
                mBackgroundPaint.setStyle(Paint.Style.FILL);
                mBackgroundPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
                mBackgroundPaint.setColor(badgeColor);

                mTextPaint = new Paint();
                mTextPaint.setStyle(Paint.Style.FILL);
                mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
                mTextPaint.setColor(textColor);//文本顏色
                if (textSize == 0) {
                    mTextPaint.setTextSize(density * 10);//文本大小按屏幕像素 計(jì)算, 沒寫死是為了適配各種屏幕,  但如果你有你認(rèn)為更合理的計(jì)算方式 你可以改這里
                } else {
                    mTextPaint.setTextSize(textSize);//使用自定義大小
                }

                //計(jì)算小紅點(diǎn)有文本情況下的小紅點(diǎn)大小,  按文本寬高計(jì)算, 如果你有你自己認(rèn)為更好的算法, 改這里即可
                float textWidth = getTextWidth("99", mTextPaint);
                w = h = Math.round(textWidth * 1.4f);//讓背景比文本大一點(diǎn)
                break;
        }
    }

    /**
     * 設(shè)置Margin 可用于做偏移
     * @param left
     * @param top
     * @param right
     * @param bottom
     * @return
     */
    public BadgeHelper setBadgeMargins(int left, int top, int right, int bottom) {
        leftMargin = left;
        topMargin = top;
        rightMargin = right;
        bottomMargin = bottom;
        return this;
    }
    /**
     * 設(shè)置Gravity居中

     * @return
     */
    public BadgeHelper setBadgeCenterVertical(  ) {
        isCenterVertical = true;
        return this;
    }

    /**
     * 設(shè)置小紅點(diǎn)類型
     *
     * @param type
     * @return
     */
    public BadgeHelper setBadgeType(@Type int type) {
        this.type = type;
        return this;
    }

    /**
     * 設(shè)置小紅點(diǎn)大小, 默認(rèn)自動(dòng)適配
     *
     * @param textSize
     * @return
     */
    public BadgeHelper setBadgeTextSize(int textSize) {
        Context c = getContext();
        Resources r;
        if (c == null) {
            r = Resources.getSystem();
        } else {
            r = c.getResources();
        }
        this.textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, textSize, r.getDisplayMetrics());
        return this;
    }


    /**
     * 設(shè)置小紅點(diǎn)文字顏色, 默認(rèn)白
     *
     * @param textColor
     * @return
     */
    public BadgeHelper setBadgeTextColor(int textColor) {
        this.textColor = textColor;
        return this;
    }

    /**
     * 設(shè)置重疊模式, 默認(rèn)是false(不重疊)
     *
     * @param isOverlap 是否把小紅點(diǎn)重疊到目標(biāo)View之上
     * @return
     */
    public BadgeHelper setBadgeOverlap(boolean isOverlap) {
        return setBadgeOverlap(isOverlap, false);
    }

    /**
     * 設(shè)置重疊模式, 默認(rèn)是false(不重疊)
     *
     * @param isOverlap             是否把小紅點(diǎn)重疊到目標(biāo)View之上
     * @param isIgnoreTargetPadding 是否忽略目標(biāo)View的padding
     * @return
     */
    public BadgeHelper setBadgeOverlap(boolean isOverlap, boolean isIgnoreTargetPadding) {
        this.isOverlap = isOverlap;
        this.mIgnoreTargetPadding = isIgnoreTargetPadding;
        if (!isOverlap && isIgnoreTargetPadding) {
            Log.w(TAG, "警告:只有重疊模式isOverlap=true 設(shè)置mIgnoreTargetPadding才有意義");
        }
        return this;
    }

    /**
     * 設(shè)置小紅點(diǎn)顏色
     *
     * @param mBadgeColor
     * @return
     */
    public BadgeHelper setBadgeColor(int mBadgeColor) {
        this.badgeColor = mBadgeColor;
        return this;
    }

    /**
     * 設(shè)置小紅點(diǎn)大小
     *
     * @param w
     * @param h
     * @return
     */
    public BadgeHelper setBadgeSize(int w, int h) {
        this.w = w;
        this.h = h;
        return this;
    }

    /**
     * 是否顯示
     * @param enable
     */
    public void setBadgeEnable(boolean enable) {
       setVisibility(enable?VISIBLE:INVISIBLE);
    }


    /**
     * 設(shè)置小紅點(diǎn)的文字
     *
     * @param number
     */
    public void setBadgeNumber(int number) {
        this.number = number;
        this.text = String.valueOf(number);
        if (isSetup) {
            if(number==0){
                setVisibility(INVISIBLE);
            }else{
                setVisibility(VISIBLE);
            }
            invalidate();
        }
    }

    public void bindToTargetView(TabLayout target, int tabIndex) {
        TabLayout.Tab tab = target.getTabAt(tabIndex);
        View targetView = null;
        View tabView = null;
        try {
            Field viewField = TabLayout.Tab.class.getDeclaredField("mView");
            viewField.setAccessible(true);
            targetView = tabView = (View) viewField.get(tab);

        } catch (Exception e) {
            e.printStackTrace();
        }

        try {
            if (tabView != null) {
                Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");//"mIconView"
                mTextViewField.setAccessible(true);
                targetView = (View) mTextViewField.get(tabView);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (targetView != null) {
            bindToTargetView(targetView);
        }
    }


    /**
     * 綁定小紅點(diǎn)到目標(biāo)View的右上角
     *
     * @param target
     */
    public void bindToTargetView(View target) {
        init(type, isOverlap);
        if (getParent() != null) {
            ((ViewGroup) getParent()).removeView(this);
        }
        if (target == null) {
            return;
        }
        if (target.getParent() instanceof ViewGroup) {
            ViewGroup parent = (ViewGroup) target.getParent();

            int groupIndex = parent.indexOfChild(target);
            parent.removeView(target);

            if (isOverlap) {//[小紅點(diǎn)與目標(biāo)View重疊]模式
                FrameLayout badgeContainer = new FrameLayout(getContext());
                ViewGroup.LayoutParams targetLayoutParams = target.getLayoutParams();
                badgeContainer.setLayoutParams(targetLayoutParams);

                target.setLayoutParams(new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

                parent.addView(badgeContainer, groupIndex, targetLayoutParams);
                badgeContainer.addView(target);
                badgeContainer.addView(this);

                FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) getLayoutParams();
                if(isCenterVertical) {
                    layoutParams.gravity =  Gravity.CENTER_VERTICAL ;
                }else{
                    layoutParams.gravity = Gravity.END | Gravity.TOP;
                }
                if (mIgnoreTargetPadding) {
                    layoutParams.rightMargin = target.getPaddingRight() - w;
                    layoutParams.topMargin = target.getPaddingTop() - h / 2;

                }

                setLayoutParams(layoutParams);


            } else {//[小紅點(diǎn)放右側(cè)]模式
                LinearLayout badgeContainer = new LinearLayout(getContext());
                badgeContainer.setOrientation(LinearLayout.HORIZONTAL);
                ViewGroup.LayoutParams targetLayoutParams = target.getLayoutParams();
                badgeContainer.setLayoutParams(targetLayoutParams);


                target.setLayoutParams(new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

                parent.addView(badgeContainer, groupIndex, targetLayoutParams);
                badgeContainer.addView(target);
                badgeContainer.addView(this);
                if(isCenterVertical) {
                    badgeContainer.setGravity(Gravity.CENTER_VERTICAL);
                }
            }
            boolean hasSetMargin = leftMargin>0||topMargin>0||rightMargin>0||bottomMargin>0;
            if (hasSetMargin&&getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) getLayoutParams();
                p.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
                setLayoutParams(p);
            }
            isSetup = true;
        } else if (target.getParent() == null) {
            throw new IllegalStateException("目標(biāo)View不能沒有父布局!");
        }

        if(number==0){
            setVisibility(INVISIBLE);
        }else{
            setVisibility(VISIBLE);
        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (w > 0 && h > 0) {
            setMeasuredDimension(w, h);
        } else {
            throw new IllegalStateException("如果你自定義了小紅點(diǎn)的寬高,就不能設(shè)置其寬高小于0 ,否則請(qǐng)不要設(shè)置!");
        }
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //這里不用解釋了 很簡(jiǎn)單 就是畫一個(gè)圓形和文字
        rect.left = 0;
        rect.top = 0;
        rect.right = getWidth();
        rect.bottom = getHeight();
        canvas.drawRoundRect(rect, getWidth() / 2, getWidth() / 2, mBackgroundPaint);

        if (type == Type.TYPE_TEXT) {
            float textWidth = getTextWidth(text, mTextPaint);
            float textHeight = getTextHeight(text, mTextPaint);
            canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 2, mTextPaint);
        }
    }

    private float getTextWidth(String text, Paint p) {
        return p.measureText(text, 0, text.length());
    }

    private float getTextHeight(String text, Paint p) {
        Rect rect = new Rect();
        p.getTextBounds(text, 0, text.length(), rect);
        return rect.height();
    }


}

#使用示例:

public class Main2Activity extends AppCompatActivity {

    private TextView mVTypeA;
    private TextView mVTypeB;
    private TextView mVTypeC;
    private TextView mVTypeD;
    private ImageView mVTypeE;
    private TabLayout mTabLayout;

    private void initView() {
        mVTypeA = (TextView) findViewById(R.id.vTypeA);
        mVTypeB = (TextView) findViewById(R.id.vTypeB);
        mVTypeC = (TextView) findViewById(R.id.vTypeC);
        mVTypeD = (TextView) findViewById(R.id.vTypeD);
        mVTypeE = (ImageView) findViewById(R.id.vTypeE);
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        initView();


        //情況A(有margin時(shí))
        new BadgeHelper(this)
                .setBadgeType(BadgeHelper.Type.TYPE_POINT)
                .setBadgeOverlap(false)
                .bindToTargetView(mVTypeA);

        //情況B(有padding時(shí))
        new BadgeHelper(this)
                .setBadgeType(BadgeHelper.Type.TYPE_POINT)
                .setBadgeOverlap(true, true)//重疊模式+忽略目標(biāo)ViewPadding 效果, 什么意思? 你可以把第二個(gè)參數(shù)寫成false看看會(huì)發(fā)生什么
                .bindToTargetView(mVTypeB);

        //情況C(默認(rèn)情況)
        BadgeHelper badgeHelperC = new BadgeHelper(this)
                .setBadgeType(BadgeHelper.Type.TYPE_TEXT)
                .setBadgeOverlap(false);
        badgeHelperC.bindToTargetView(mVTypeC);
        badgeHelperC.setBadgeNumber(6);//數(shù)字模式


        //情況D(有權(quán)重時(shí))
        new BadgeHelper(this)
                .setBadgeColor(0xff0f00ff)//順便演示下 小紅點(diǎn)顏色的設(shè)置
                .setBadgeType(BadgeHelper.Type.TYPE_POINT)
                .setBadgeOverlap(false)
                .bindToTargetView(mVTypeD);


        //情況E(小紅點(diǎn)與圖片重疊)+ 數(shù)字模式
        BadgeHelper badgeHelperE = new BadgeHelper(this)
                .setBadgeType(BadgeHelper.Type.TYPE_TEXT)
                .setBadgeOverlap(true, true);//注意 isIgnoreTargetPadding=true時(shí) 和 setBadgeMargins 不能同時(shí)使用
        //.setBadgeSize(100,100)//設(shè)置小紅點(diǎn)的大小, 如果未設(shè)置則使用默認(rèn)寬高, 一般默認(rèn)就好
        //.setBadgeTextSize(15) //設(shè)置文本大小,  不設(shè)置 則使用默認(rèn), 一般默認(rèn)就好
        badgeHelperE.bindToTargetView(mVTypeE);
        //任意地方可以刷新數(shù)字
        badgeHelperE.setBadgeNumber(58);//數(shù)字


        //情況F(TabLayout兼容)
        BadgeHelper badgeHelperF = new BadgeHelper(this)
                .setBadgeType(BadgeHelper.Type.TYPE_TEXT)
                .setBadgeCenterVertical()//紅點(diǎn)居中
                .setBadgeMargins(10,0,0,0)//偏移一下
                .setBadgeOverlap(false);
        badgeHelperF.bindToTargetView(mTabLayout, 0);
        badgeHelperF.setBadgeNumber(5);

        new BadgeHelper(this)
                .setBadgeType(BadgeHelper.Type.TYPE_POINT)
                .setBadgeCenterVertical()//紅點(diǎn)居中
                .setBadgeMargins(10,0,0,0)//偏移一下
                .setBadgeOverlap(false)
                .bindToTargetView(mTabLayout,1);

    }

}

#布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.mx.test12.Main2Activity">


    <TextView
        android:background="#220000ff"
        android:id="@+id/vTypeA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="情況A(有margin時(shí))" />

    <TextView
        android:background="#2200ff00"
        android:id="@+id/vTypeB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:text="情況B(有padding時(shí))" />

    <TextView
        android:id="@+id/vTypeC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="情況C(默認(rèn)情況)" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:background="#2200ffff"
            android:id="@+id/vTypeD"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="情況D(有權(quán)重時(shí))" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp" />
    </LinearLayout>


    <ImageView
        android:id="@+id/vTypeE"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="情況E(與圖片重疊)"
        android:padding="20dp"
        android:src="@mipmap/ic_launcher" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:layout_scrollFlags="scroll"
        app:tabIndicatorColor="#057523"
        app:tabIndicatorHeight="2.0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#057523"
        app:tabTextColor="#ced0d3">

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="聊天列表" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="好友列表" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="設(shè)置" />

    </android.support.design.widget.TabLayout>

</LinearLayout>

到此這篇關(guān)于Android仿QQ微信未讀消息小紅點(diǎn)BadgeHelper的文章就介紹到這了,更多相關(guān)Android小紅點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: