textview圓形背景

實現目標:
消息數量的顯示,如果消息數量是“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" />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章