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

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

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

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

具体代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

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

?

1 2 3 4 5 6 7 8 9

<?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了，代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<?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方法的调用顺序：放到最后调用。