Android自定义未读消息提示View
来源:互联网 发布:燕十八php教程2016 编辑:程序博客网 时间:2024/05/21 08:48
微信的小红点不知道逼死了多少人的强迫症,今天我们就来实现一个带有小红点的View,先上效果图:
读者须知:
虽然我会在文末给出源码,但是我的源码只是按照我的需求编写的,希望读者能够理解整个思路然后结合自己的实际需求编写自己需要的代码,其实这个View并不难,踏实下来,多花点时间一定能看懂。
思路
这个未读消息提示View总共包含三个部分,头像部分(可以看成一个正方形),圆圈部分(就是红色的部分),文字部分(里面会标明消息的数量,如果大于99就显示“99+”,如果为0那么就不显示圆圈部分和文字部分),注意文字部分是在圆圈部分里面,所以文字不能超过圆圈部分的边界
让我们通过一张图看懂整个布局:
1 整个View包括圆和正方形,所以宽度和高度为4而不是OA
2 我的情况是把圆心放在了正方形的顶点处,如果你们靠近正方形或者远离正方形可以自己新建坐标轴
3 圆和正方形(或者说是Bitmap)都好画但是如果文字画出来要是超过了圆的范围该怎么办呢?可以缩小文字的textSize或者增加圆的长度(我是采用了后者)
源码仅供参考:
package com.test.view;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import com.test.R;/** * @Description: 仿微信未读消息View * @Author: Liangchaojie * @Create On 2017/12/14 10:22 */public class MessageView extends View{ private Paint mPiant=null; private Paint mTextPiant=null;//画文字的笔 private int rate=6;//圆和正方形的比例 private int square_color;//正方形的颜色 private int circle_color; private int text_color; private boolean isShow;//是否显示圆圈消息 private String text; public MessageView(Context context) { this(context,null); } public MessageView(Context context, @Nullable AttributeSet attrs) { this(context, attrs,0); } public MessageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } public synchronized void setText(String text) { this.text = text; init(); invalidate(); } public synchronized void setShow(boolean show) { isShow = show; init(); invalidate(); } private void init() { mPiant = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPiant = new Paint(Paint.ANTI_ALIAS_FLAG); square_color = getResources().getColor(R.color.yellow); circle_color = getResources().getColor(R.color.red); text_color = getResources().getColor(R.color.white); } @Override protected synchronized void onDraw(Canvas canvas) { super.onDraw(canvas); int w = Math.min(getWidth(),getHeight()); int h = Math.min(getWidth(),getHeight()); //获取文字的宽度和高度 Rect rect1=new Rect(); mTextPiant.setColor(text_color); mTextPiant.setTextSize(30); mTextPiant.setFakeBoldText(true); mTextPiant.getTextBounds(text,0,text.length(),rect1); //获取指定图片 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.ion); //已知图片的尺寸,根据比例获取圆的半径 int r = bitmap.getWidth() / rate;//圆的半径 int c = bitmap.getWidth();//正方形周长 //判断文字和圆的半径的大小关系,如果文字长度比圆半径大,那么就需要改变圆的半径 int x_diff = rect1.centerX() - r; int y_diff = rect1.centerY() - r; if(x_diff>0||y_diff>0){ r = (int) Math.sqrt(rect1.centerX()*rect1.centerX()+rect1.centerY()*rect1.centerY()); } //画图形 canvas.drawBitmap(bitmap,0,r,mPiant); if(isShow){//如果需要展示图标 drawCircle(canvas, r, c);//画圆圈 drawText(canvas, r, c,rect1);//画文本 } } private void drawText(Canvas canvas,int r, int c,Rect rect1) { int x = c-rect1.centerX(); int y = r - rect1.centerY(); canvas.drawText(text,x,y, mTextPiant); } private void drawCircle(Canvas canvas, int r, int c) { mPiant.setColor(circle_color); canvas.drawCircle(c,r,r,mPiant); }}
阅读全文
0 0
- Android自定义未读消息提示View
- 自定义view实现未读消息提示(小红点)
- 自定义未读消息提示
- Android 自定义View之消息提示控件
- [Android开发] 自定义View之消息数量提示View-TipView
- Android设置未读消息提示,BadgeView
- android底部菜单栏demo(未读消息提示)
- Android中的BGABadgeView未读消息提示小红点
- 仿微信消息数目提示的自定义view
- Android自定义小红点消息提示
- Android自定义小红点消息提示
- Android 自定义View 之 触摸消息派发
- Android BGABadgeView:新消息/未接来电/未读消息/新通知圆球红点提示(1)
- Android自定义Toast弹出消息提示
- 安卓Toast显示提示消息(自定义view,根据子线程消息显示提示)
- Android之给应用程序的icon添加未读消息个数提示(红圈内数字)
- wing带你玩转自定义view系列(2) 简单模仿qq未读消息去除效果
- Android自定义控件:类QQ未读消息拖拽效果
- WIN10系统文件加密(纯手工技巧,非代码类)
- 可能用到的第三方库
- 数据传输
- 关于mysql存储过程的definer的问题
- JAVAWEB第六天sax方式解析xml
- Android自定义未读消息提示View
- 制作unity小工具 获取FBX模型里面的AnimationClip片段
- 全网最新:Netty源码剖析&NIO+Netty5各种RPC架构实战路线
- addTextChangedListener(TextWatcher watcher)
- spring中使用@Scheduled注解时corn表达式、fixedRate、fixedDelay的区别
- UDP
- UDP网络编程
- 如果getParameter()的参数不存在 将返回什么
- [kuangbin带你飞]专题1 简单搜索 D