實現目標:
消息數量的顯示,如果消息數量是“99+”的時候也必須是圓形
效果圖
遇到的問題:
消息數量是一位數和兩位數時候都可以實現是圓形的,但是一旦是“99+”就變形了
(苦逼啊,真的是在網上找了好多資料啊…),終於找到解決方法了,直接上代碼
public class CircleTextView extends AppCompatTextView {
private Paint circlePaint;
private Paint backPaint;
private Paint textPaint;
private int storkColor = Color.WHITE;
private int circleBackColor = Color.WHITE;
private float storkWidth;
public CircleTextView(Context context, AttributeSet attrs) {
super(context, attrs);
setGravity(Gravity.CENTER);
circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
circlePaint.setStyle(Paint.Style.STROKE);
backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
backPaint.setStyle(Paint.Style.FILL);
textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
storkWidth = 0;
if (attrs != null) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleTextView);
storkColor = typedArray.getColor(R.styleable.CircleTextView_storkColor, storkColor);
circleBackColor = typedArray.getColor(R.styleable.CircleTextView_backColor, circleBackColor);
storkWidth = typedArray.getDimension(R.styleable.CircleTextView_storkWidth, storkWidth);
typedArray.recycle();
}
if (storkWidth != 0) {
circlePaint.setStrokeWidth(storkWidth);
circlePaint.setColor(storkColor);
}
backPaint.setColor(circleBackColor);
textPaint.setColor(getCurrentTextColor());
textPaint.setTextSize(getTextSize());
}
public CircleTextView(Context context) {
this(context, null);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight();
int width = getWidth();
int radius;
int storkRadius;
int textWidth = (int) textPaint.measureText(getText().toString());
if (width > height) {
if (height > textWidth) {
radius = height;
} else {
setHeight(textWidth + getPaddingTop() + getPaddingBottom());
radius = textWidth;
}
} else {
if (width > textWidth) {
radius = width;
} else {
setWidth(textWidth + getPaddingRight() + getPaddingLeft());
radius = textWidth;
}
}
storkRadius= (int) (radius/2-storkWidth);
radius= storkRadius-1;
if (storkWidth != 0)
canvas.drawCircle(getWidth() / 2, getHeight() / 2, storkRadius, circlePaint);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, backPaint);
Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
canvas.drawText(getText().toString(), getWidth() / 2 - textPaint.measureText(getText().toString()) / 2, getHeight() / 2 - fontMetrics.descent + (fontMetrics.bottom - fontMetrics.top) / 2, textPaint);
}
public void setMyStorkColor(@ColorInt int color) {
this.storkColor = color;
circlePaint.setColor(storkColor);
invalidate();
}
public void setBackColor(@ColorInt int color) {
this.circleBackColor = color;
backPaint.setColor(circleBackColor);
invalidate();
}
public void setMyTextColor(@ColorInt int color) {
textPaint.setColor(color);
invalidate();
}
}
<declare-styleable name="CircleTextView">
<attr name="storkColor" format="color"/>
<attr name="backColor" format="color"/>
<attr name="storkWidth" format="dimension"/>
</declare-styleable>
使用
<CircleTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content
android:text="99+"
android:textColor="@color/white"
android:textSize="10sp"
app:backColor="@color/open_red_color" />