未读消息-小红点 Android 实现

Hello, 村长 😊

「码不停蹄」

1、更新日志

• 优化代码已知问题
• 新增小红点长按拖动
• 新增小红点位置自定义显示
• 可显示在任意 view 上

2、使用 & 效果

显示文字，无效果

private BadgeView mReadBadgeView;
private TextView mRead;

mReadBadgeView = new BadgeView(getActivity());
mReadBadgeView.showBadgeView("+99", mRead);

小红点 + 自定义显示位置

 mBadgeView = new BadgeView(getActivity(), GravityDirection.DIRECT_BOTTOM_RIGHT);
 mBadgeView.showBadgeView(mHead);

拖动效果 + 自定义位置显示

 mBadgeView = new BadgeView(getActivity(),GravityDirection.DIRECT_BOTTOM_RIGHT,true);
 mBadgeView.showBadgeView(mHead);

具有拖动效果

  mBadgeView = new BadgeView(getActivity(), true);
  mBadgeView.showBadgeView(mHead);

3、代码实现

实现思路：利用 fragment Layout 容器的重叠特性，将小红点 view 添加到目标 view 上方。

3.1 自定义位置

import android.view.Gravity;

import androidx.annotation.IntDef;

@IntDef({
        GravityDirection.DIRECT_TOP_LEFT,
        GravityDirection.DIRECT_TOP_RIGHT,
        GravityDirection.DIRECT_BOTTOM_LEFT,
        GravityDirection.DIRECT_BOTTOM_RIGHT,
        GravityDirection.DIRECT_TOP_CENTER,
        GravityDirection.DIRECT_BOTTOM_CENTER,
        GravityDirection.DIRECT_LEFT_CENTER,
        GravityDirection.DIRECT_RIGHT_CENTER
})
public @interface GravityDirection {
    int DIRECT_TOP_LEFT = Gravity.TOP | Gravity.LEFT;
    int DIRECT_TOP_RIGHT = Gravity.TOP | Gravity.RIGHT;
    int DIRECT_BOTTOM_LEFT = Gravity.BOTTOM | Gravity.LEFT;
    int DIRECT_BOTTOM_RIGHT = Gravity.BOTTOM | Gravity.RIGHT;
    int DIRECT_TOP_CENTER = Gravity.TOP | Gravity.CENTER;
    int DIRECT_BOTTOM_CENTER = Gravity.BOTTOM | Gravity.CENTER;
    int DIRECT_LEFT_CENTER = Gravity.LEFT | Gravity.CENTER;
    int DIRECT_RIGHT_CENTER = Gravity.RIGHT | Gravity.CENTER;
}

3.2 圆形 drawable

import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.ShapeDrawable;

import androidx.annotation.IntRange;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;


public class CircleDrawable extends ShapeDrawable {
    private Paint mPaint;
    private int mRadio;

    public CircleDrawable(int radio, int painColor) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(painColor);
        mRadio = radio;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        canvas.drawCircle(mRadio, mRadio, mRadio, mPaint);
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int i) {
        mPaint.setAlpha(i);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    /***
     * drawable实际宽高，圆形关键
     *
     * @return
     */
    @Override
    public int getIntrinsicWidth() {
        return mRadio * 2;
    }

    @Override
    public int getIntrinsicHeight() {
        return mRadio * 2;
    }
}

3.3 小红点

package com.primer.common.view;

import android.content.ClipData;
import android.content.ClipDescription;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.ShapeDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.view.DragEvent;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.annotation.RequiresApi;

import com.primer.common.constant.GravityDirection;
import com.primer.common.util.LogHelper;
import com.primer.common.view.drawable.CircleDrawable;

public class BadgeView extends TextView {

    private final int DEFAULT_BADGE_RADIO = 15;
    private final int DEFAULT_TEXT_SIZE = 5;
    private final int DEFAULT_TEXT_COLOR = Color.WHITE;
    private final int DEFAULT_BADGE_COLOR = Color.RED;
    private final int DEFAULT_BADGE_GRAVITY = GravityDirection.DIRECT_TOP_RIGHT;

    private int mBadgeColor = DEFAULT_BADGE_COLOR;
    private int mBadgeRadio = DEFAULT_BADGE_RADIO;
    private int mBadgeGravity = DEFAULT_BADGE_GRAVITY;
    private int mTextColor = DEFAULT_TEXT_COLOR;
    private int mTextSize = DEFAULT_TEXT_SIZE;
    private String mText;

    private FrameLayout mFragmentLayout;
    private ViewGroup mTargetViewGroup;
    private Context mContext;
    private boolean mEnableDrag;
    private View mTargetView;
    private int mTargetWidth;
    private int mTargetHeight;

    public BadgeView(Context context) {
        super(context);
        init(context);
    }

    public BadgeView(Context context, @GravityDirection int badgeGravity) {
        super(context);
        init(context);
        customStyle(badgeGravity, false);
    }

    public BadgeView(Context context, boolean enableDrag) {
        super(context);
        init(context);
        customStyle(DEFAULT_BADGE_GRAVITY, enableDrag);
    }

    public BadgeView(Context context, @GravityDirection int badgeGravity, final boolean enableDrag) {
        super(context);
        init(context);
        customStyle(badgeGravity, enableDrag);
    }

    private void customStyle(@GravityDirection int badgeGravity, final boolean enableDrag) {
        mEnableDrag = enableDrag;
        mBadgeGravity = badgeGravity;
        setOnLongClickListener(new OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                if (enableDrag) {
                    processDrag();
                }
                return true;
            }
        });
    }

    public BadgeView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public BadgeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public BadgeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context);
    }

    private void init(Context context) {
        mFragmentLayout = new FrameLayout(context);
        mFragmentLayout.setLayoutParams(new FrameLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        mContext = context;
    }

    private void processDrag() {
        ClipData.Item item = new ClipData.Item("");
        ClipData clipData = new ClipData("", new String[]{ClipDescription.MIMETYPE_TEXT_PLAIN}, item);
        DragShadowBuilder builder = new DragShadowBuilder(this);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            startDragAndDrop(clipData, builder, null, 0);
        } else {
            startDrag(clipData, builder, null, 0);
        }
    }

    /***
     *
     * @param content
     * @param targetView
     * @param textColor
     * @param textSize
     * @param badgeColor
     * @param badgeRadio
     */
    public void showBadgeView(String content, final View targetView, int textColor, int textSize, int badgeColor, int badgeRadio) {
        if (targetView == null) {
            throw new IllegalArgumentException("targetView view must not be null");
        }

        mTargetView = targetView;
        mBadgeRadio = badgeRadio;
        mTargetViewGroup = (ViewGroup) targetView.getParent();
        mTargetViewGroup.removeView(targetView);
        mTargetViewGroup.addView(mFragmentLayout, targetView.getLayoutParams());

        setTextColor(mTextColor);
        setTextSize(mTextSize);
        setGravity(Gravity.CENTER);
        if (content != null && content.length() <= 3) {
            mText = content;
            setText(content);
        }

        //文字和半径之间的适配
        if (content != null) {
            Rect rect = new Rect();
            this.getPaint().getTextBounds(content, 0, content.length(), rect);
            if (content.length() <= 3 && rect.width() >= mBadgeRadio) {
                mBadgeRadio = (rect.width() / 2) + 1;
            }
        }

        setVisibility(INVISIBLE);
        setBackground(getShapeDrawable());
        mFragmentLayout.addView(targetView);
        mFragmentLayout.addView(this);
        //直接获取 view 的宽高得到的数值均为 0 ，需要 post 包裹
        targetView.post(new Runnable() {
            @Override
            public void run() {
                mTargetWidth = targetView.getWidth();
                mTargetHeight = targetView.getHeight();
                setVisibility(VISIBLE);
                processMargin();
            }
        });

        mTargetViewGroup.invalidate();
    }

    private void processMargin() {
        int left = 0, top = 0;
        switch (mBadgeGravity) {
            case GravityDirection.DIRECT_TOP_LEFT:
                //default
                break;
            case GravityDirection.DIRECT_TOP_RIGHT:
                left = mTargetWidth - mBadgeRadio * 2;
                break;
            case GravityDirection.DIRECT_TOP_CENTER:
                left = mTargetWidth * 2 - mBadgeRadio;
                break;
            case GravityDirection.DIRECT_BOTTOM_LEFT:
                top = mTargetHeight - mBadgeRadio * 2;
                break;
            case GravityDirection.DIRECT_BOTTOM_RIGHT:
                top = mTargetHeight - mBadgeRadio * 2;
                left = mTargetWidth - mBadgeRadio * 2;
                break;
            case GravityDirection.DIRECT_BOTTOM_CENTER:
                left = mTargetWidth / 2 - mBadgeRadio;
                top = mTargetHeight - mBadgeRadio * 2;
                break;
            case GravityDirection.DIRECT_LEFT_CENTER:
                top = mTargetHeight / 2 - mBadgeRadio;
                break;
            case GravityDirection.DIRECT_RIGHT_CENTER:
                top = mTargetHeight / 2 - mBadgeRadio;
                left = mTargetWidth - mBadgeRadio * 2;
                break;
            default:
                break;
        }

        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) getLayoutParams();
        layoutParams.setMargins(left, top, 0, 0);
        setLayoutParams(layoutParams);
    }

    private ShapeDrawable getShapeDrawable() {
        CircleDrawable drawable = new CircleDrawable(mBadgeRadio, mBadgeColor);
        return drawable;
    }

    /***
     *
     * @param content
     * @param target
     */
    public void showBadgeView(String content, View target) {
        showBadgeView(content, target,
                DEFAULT_TEXT_COLOR,
                DEFAULT_TEXT_SIZE,
                DEFAULT_BADGE_COLOR,
                DEFAULT_BADGE_RADIO);
    }

    public void showBadgeView(View target) {
        showBadgeView(null, target,
                DEFAULT_TEXT_COLOR,
                DEFAULT_TEXT_SIZE,
                DEFAULT_BADGE_COLOR,
                DEFAULT_BADGE_RADIO);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
    }

    @Override
    public boolean onDragEvent(DragEvent event) {
        if (!mEnableDrag) {
            return false;
        }

        LogHelper.d("drag event = " + event.getAction());
        return super.onDragEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!mEnableDrag) {
            return false;
        }

        LogHelper.d("touch event = " + event.getAction());
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                setVisibility(INVISIBLE);
                break;
            default:
                break;
        }
        return super.onTouchEvent(event);
    }
}

如有缺陷，欢迎评论(*￣︶￣)