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