我们在开发的时候,会经常遇到小红点的需求,比如类似微信的聊天信息,新消息的通知这样的需求。如果通过图片来实现,会比较麻烦,一换图片就要多做一张图片。我们有万能的画笔,为什么不画出来呢。
- 效果图展示
- 自定义view源码
- 使用方式
- 源码下载
无图不上源码实现。先上图再说。 -
比如 我的右上角有个小红点
ok 我们底部菜单栏是通过RadioButton来实现的,那么我们现在就开始对RadionButton来进行重写
神马都不说了,直接上源码。
新增一个 TipButton类
package com.yanmoai.ui.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.RadioButton;
import com.yanmoai.R;
public class TipButton extends RadioButton {
private boolean mTipOn = false;
private Dot mDot;
private class Dot {
int color;
int radius;
int marginTop;
int marginRight;
Dot() {
float density = getContext().getResources().getDisplayMetrics().density;
radius = (int) (5 * density);
marginTop = (int) (3 * density);
marginRight = (int) (3 * density);
color = getContext().getResources().getColor(R.color.tip_red);
}
}
public TipButton(Context context) {
super(context);
init();
}
public TipButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public TipButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
mDot = new Dot();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mTipOn) {
float cx = getWidth() - mDot.marginRight - mDot.radius;
float cy = mDot.marginTop + mDot.radius;
Drawable drawableTop = getCompoundDrawables()[1];
if (drawableTop != null) {
int drawableTopWidth = drawableTop.getIntrinsicWidth();
if (drawableTopWidth > 0) {
int dotLeft = getWidth() / 2 + drawableTopWidth / 2;
cx = dotLeft + mDot.radius;
}
}
Paint paint = getPaint();
//save
int tempColor = paint.getColor();
paint.setColor(mDot.color);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(cx, cy, mDot.radius, paint);
//restore
paint.setColor(tempColor);
}
}
public void setTipOn(boolean tip) {
this.mTipOn = tip;
invalidate();
}
public boolean isTipOn() {
return mTipOn;
}
}
定义好之后,我们来调用它,很简单 布局文件中直接声明就行。
布局文件代码实现 上代码
<com.yanmoai.ui.view.TipButton
android:id="@+id/home_user_rb"
style="@style/TabMenuText"
android:drawableTop="@drawable/tab_user_btn"
android:text="@string/home_mine_text"
/>
里面的具体样式,根据你的需求来实现就行。
里面我们还实现了一个是否显示小红点的方法
public void setTipOn(boolean tip) {
this.mTipOn = tip;
invalidate();
}
传入一个布尔值就行。
好了今天博客就写到这里了。欢迎大家在评论区提问,吐槽,和给予好评。