重写TextView，实现圆形背景，文本居中显示

Posted 2020-08-21 ha_cjy

最近，在做考试试题排版，产品提出题号希望显示成圆形背景，序号文本居中显示。

（有点问题：文本没有绝对居中，暂时没做处理。）

为此，我采取的方式是重写TextView的onDraw方法，绘制一个圆形背景。

具体代码如下：

package com.example.myapp;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.*;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * 自定义形状的TextView 圆形 椭圆形
 * Created by cjy on 16/11/30.
 */
public class CustomShapTextView extends TextView{
    private Context mContext;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 画笔颜色 默认灰色
     */
    private int mPaintNormalColor = 0xFFDCDCDC;
    /**
     * 画笔颜色 选中时的颜色,默认灰色
     */
    private int mPaintSelectColor = 0xFFDCDCDC;
    /**
     * 是否填充颜色
     */
    private boolean isFillColor = false;

    public CustomShapTextView(Context context) {
        super(context);
    }

    public CustomShapTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint(context,attrs);
    }

    public CustomShapTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initPaint(context,attrs);
    }

    /**
     * 初始化画笔和自定义属性
     * @param context
     * @param attrs
     */
    private void initPaint(Context context,AttributeSet attrs){
        mContext = context;
        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.CustomShapTextView);
        mPaintNormalColor = typeArray.getColor(R.styleable.CustomShapTextView_paintNormalColor,mPaintNormalColor);
        mPaintSelectColor = typeArray.getColor(R.styleable.CustomShapTextView_paintSelectColor,mPaintSelectColor);
        mPaint = new Paint();
    }

    /**
     * 调用onDraw绘制边框
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        //抗锯齿
        mPaint.setAntiAlias(true);
        if (isFillColor) {
            //画笔颜色
            mPaint.setColor(mPaintSelectColor);
            mPaint.setStyle(Paint.Style.FILL);
        }else{
            //画笔颜色
            mPaint.setColor(mPaintNormalColor);
            //画笔样式:空心
            mPaint.setStyle(Paint.Style.STROKE);
        }

        //创建一个区域,限制圆弧范围
        RectF rectF = new RectF();
        //设置半径,比较长宽,取最大值
        int radius = getMeasuredWidth() > getMeasuredHeight() ? getMeasuredWidth() : getMeasuredHeight();
        //设置Padding 不一致,绘制出的是椭圆;一致的是圆形
        rectF.set(getPaddingLeft(),getPaddingTop(),radius-getPaddingRight(),radius-getPaddingBottom());
        //绘制圆弧
        canvas.drawArc(rectF,0,360,false,mPaint);

        //最后调用super方法,解决文本被所绘制的圆圈背景锁覆盖的问题
        super.onDraw(canvas);
    }

    /**
     * 设置是否填充颜色
     * @param isFill
     */
    public void setFillColor(boolean isFill){
        this.isFillColor = isFill;
        invalidate();
    }
}

为了颜色设置的灵活性，颜色属性自定义attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomShapTextView">
        <!-- Default Paint Color (color). -->
        <attr name="paintNormalColor" format="reference|color"/>
        <!-- Selected Paint Color (color). -->
        <attr name="paintSelectColor" format="reference|color"/>
    </declare-styleable>
</resources>

这样子，我们就可以直接在xml中使用自定义的TextView了，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"               xmlns:app="http://schemas.android.com/apk/res/com.example.myapp"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white"
                android:paddingTop="15dp"
                android:paddingBottom="15dp"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
>

    <com.example.myapp.CustomShapTextView
            android:id="@+id/circle_tv_view"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:text="A"
            android:textSize="16sp"
            android:textColor="@drawable/tv_view_color"
            android:gravity="center"
            android:paddingLeft="12dp"
            android:paddingTop="12dp"
            android:paddingRight="12dp"
            android:paddingBottom="12dp"
            app:paintNormalColor="@color/gray"
            app:paintSelectColor="@color/blue"
    />

</RelativeLayout>

现在效果是出来，但是发现圆角虽然画上了，但是文字被覆盖了。

猜测是我们绘制的图层覆盖了文字。

因为自己要画的东西是在下面的，所以要先画上去，然后在让父类(TextView)画他的文字。

所以调整了super.onDraw方法的调用顺序：放到最后调用。