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

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



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

为此，我采取的方式是重写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方法的调用顺序：放到最后调用。