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

(有点问题:文本没有绝对居中,暂时没做处理。)

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

重写TextView,实现圆形背景,文本居中显示的更多相关文章

  1. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  2. 自定义Toast样式-两行文本居中显示

    toast可以设置自定义的view和显示位置.下面是一个简单的例子,复杂些的就是改变其布局文件就可以了. /** * @author BMR * @ClassName: ToastWithTwoTex ...

  3. flex的Accordion组件头部文本居中显示

    flex的Accordion组件头部文本默认是居左的,可以通过设置headerStyleName属性使之居中,另外还可以设置字体的样式等 <?xml version="1.0" ...

  4. ExtJS -- Grid 文本居中显示

    Reference: http://stackoverflow.com/questions/6561120/extjs-4-apply-defaults-to-all-columns-in-a-gri ...

  5. LabelControl文本居中显示

    https://www.devexpress.com/Support/Center/Question/Details/Q94915 If you set the AutoSizeMode to Non ...

  6. CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中

    body {   margin-top:0px; margin-right:0px;   margin-bottom:0px;   margin-left:0px;   background-colo ...

  7. css 单行文本居中显示,多行文本左对齐

    父级元素 text-align:center; 自级元素 text-align:left; display:inline-block;

  8. 【Android】自定义控件让TextView的drawableLeft与文本一起居中显示

    前言 TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢 ...

  9. 让TextView的drawableLeft与文本一起居中显示

     TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢用R ...

随机推荐

  1. 鼠标滚轮(mousewheel)和DOMMouseScroll事件

    IE6.0首先实现了mousewheel事件.此后,Opera.Chrome和Safari也都实现了这个事件.当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时(无论向下还是向上),就会触发mous ...

  2. System.Speech.Synthesis 添加暂停、继续功能

    为了方便调用暂停.继续的方法.要将speech的功能写成一个类.直接附上代码: using System; using System.Collections.Generic; using System ...

  3. Jquery根据字段内容设置字段宽度

    来博客园很久了,初次写文章,新手,请大牛见谅! 前段时间遇到的问题,通过gridview后台动态生成table,列和行数量未知,要求根据每个单元格内容的多少,设置宽度,每一列选择本列最大的宽度. ta ...

  4. PHP学习笔记二十一【全局变量】

    <?PHP //定义全局变量 global $a; $a=9; //给全局变量赋值 function test1() { global $a; $a=45; } test1(); echo $a ...

  5. poj3159 Candies(差分约束)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Candies Time Limit: 1500MS   Memory Limit ...

  6. C++ 查找文件夹下的文件

    #include <string> #include <vector> #include <cstring> #include <cstdio> #in ...

  7. 链表中倒数第K个节点

    问题描述: 找出链表中倒数第K个节点 思路分析: 用两个指针,一前一后,保持k个距离,前面的指针移动到末尾,后面的指针就刚好直到第k个节点, 要考虑到k为0,倒数第k个节点不存在的情况. 参考代码: ...

  8. 两个string数组对应比较

    最近做的array string类型对比.这个可能比较复杂,用的是linq 是请教别人的,我在这里记录一下 jquery 方法里面的数组 function arrtxt() { var arrt= [ ...

  9. CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中

    body {   margin-top:0px; margin-right:0px;   margin-bottom:0px;   margin-left:0px;   background-colo ...

  10. MVC新语法匿名方法

    一.简单匿名方法 1.0匿名方法的写法规则: delegate(编写匿名方法的参数,格式和类型由程序员自己根据业务逻辑来定义){函数的方法体代码} 最下面使用deledate编写匿名方法参数所写    ...