iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android实现未读消息小红点显示实例
  • 788
分享到

Android实现未读消息小红点显示实例

2024-04-02 19:04:59 788人浏览 安东尼
摘要

目录代码实现小红点实现总结使用 fragmentLayout 实现,可以把小红点添加到任意 view 上。 效果 添加小红点到 textview 上 添加小红点到 imagevie

使用 fragmentLayout 实现,可以把小红点添加到任意 view 上。

效果 添加小红点到 textview 上

在这里插入图片描述

添加小红点到 imageview 上

在这里插入图片描述

代码实现

首先定义一个圆形 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;
    }

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

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

小红点实现

思路:
一个容器 fragmentLayout 包含两个 view (小红点view + 文本view 「当然也可以是其他的view」),通过 fragmentLayout 添加 view 重叠的特征实现

当前有待优化点:
1、通过 margin 实现小红点可以添加到任意位置「可以是有 layoutparams margin 实现」
2、其他

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.graphics.drawable.shapes.RoundRectShape;
import android.util.AttributeSet;
import android.util.Printer;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;

import androidx.annotation.Nullable;

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

public class BadgeView extends TextView {

    private final int DEFAULT_BADGE_RADIO = 5;
    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_LEFT;

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

    private FrameLayout mFragmentLayout;
    private ViewGroup mTargetViewGroup;
    private View mTarget;
    private Context mContext;

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

    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);
    }

    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;
    }

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

        mTarget = target;
        mTargetViewGroup = (ViewGroup) target.getParent();
        mTargetViewGroup.removeView(target);
        mTargetViewGroup.addView(mFragmentLayout, target.getLayoutParams());

        setTextColor(mTextColor);
        setTextSize(mTextSize);
        setGravity(Gravity.CENTER);
        if (content != null && content.length() <= 3) {
            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 = (UiHelper.px2dip(mContext, rect.width()) / 2) + 1;
            }
        }

        setBackgroundDrawable(getShapeDrawable());
        mFragmentLayout.addView(target);
        mFragmentLayout.addView(this);
        mTargetViewGroup.invalidate();
    }


    private ShapeDrawable getShapeDrawable() {
        int radio = UiHelper.dip2px(mContext, mBadgeRadio);
        CircleDrawable drawable = new CircleDrawable(radio, mBadgeColor);
        return drawable;
    }

    
    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);
    }
}

使用

    private BadgeView mReadBadgeView;
    private TextView mRead;

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

总结

到此这篇关于Android实现未读消息小红点显示实例的文章就介绍到这了,更多相关Android未读消息小红点内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Android实现未读消息小红点显示实例

本文链接: https://www.lsjlt.com/news/139011.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android实现未读消息小红点显示实例
    目录代码实现小红点实现总结使用 fragmentLayout 实现,可以把小红点添加到任意 view 上。 效果 添加小红点到 textview 上 添加小红点到 imagevie...
    99+
    2022-11-13
  • Android怎么实现未读消息小红点显示
    今天小编给大家分享一下Android怎么实现未读消息小红点显示的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用 fragm...
    99+
    2023-06-29
  • Android 未读消息的红点显示
    在很多APP里面,经常会看到未读消息的小红点,如下图: 这个功能用到的是一个控件,叫做BadgeView。 BadgeView的用法很简单,直接把jar文件导入包中就可以使...
    99+
    2022-06-06
    Android
  • 前端与RabbitMQ实时消息推送未读消息小红点实现示例
    目录引言RabbitMQ 搭建1、开启 mqtt 协议服务端消息发送1、mqtt 客户端依赖包2、消息发送者前端消息订阅测试总结 引言 前几天粉丝群里有个小伙伴问过:web ...
    99+
    2022-11-13
  • Android利用Badge组件实现未读消息小红点
    目录前言Badge 组件实例总结前言 在 App 的运营中,活跃度是一个重要的指标,日活/月活……为了提高活跃度,就发明了小红点,然后让强迫症用户&ldq...
    99+
    2023-01-14
    Android Badge实现消息未读红点 Android 消息未读红点 Android Badge组件
  • Android仿QQ微信未读消息小红点BadgeHelper
    Android 小红点 未读消息功能 BadgeHelper 因为最近的项目需求,翻遍github上的未读消息红点开源库, 发现大部分 不能适配不同情况的布局, 所以我写了一个能兼容...
    99+
    2022-11-12
  • Android实现消息提醒小红点效果
    本人分享一下,自己写的一个消息提醒小红点控件,支持圆、矩形、椭圆、圆角矩形、正方形五种图形样式,可带文字,支持链式操作。先看一下实现效果,随便测了几个控件(TextView、ImageView、RadioButton、LinearLayou...
    99+
    2023-05-30
    android 消息提醒 roi
  • 小程序开发中如何实现显示消息提示框
    这篇“小程序开发中如何实现显示消息提示框”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序开发中如何实现显示消息提示框”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来...
    99+
    2023-06-26
  • 怎么在Android中实现一个未读消息拖动气泡功能
    怎么在Android中实现一个未读消息拖动气泡功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。实现关键:气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲...
    99+
    2023-06-06
  • android怎么实现点击按钮显示文本框信息
    要实现点击按钮显示文本框信息,你可以按照以下步骤进行操作:1. 在你的布局文件(XML文件)中,添加一个按钮和一个文本框(EditT...
    99+
    2023-09-27
    Android
  • Android开发中使用 BadgeView实现一个红点更新信息提示功能
    Android开发中使用 BadgeView实现一个红点更新信息提示功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、BadgeView常用方法介绍:setBadgeCou...
    99+
    2023-05-31
    android badgeview roi
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作