重写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方法的调用顺序:放到最后调用。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步