android TextView描边

前言

上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。

这一边讲一个进阶功能，实现textView的描边效果。

上效果图。

上代码：

代码语言：javascript复制

public class StrokeTextView extends TextView {

    private TextView backGroundText = null;//用于描边的TextView

    public StrokeTextView(Context context) {
        this(context, null);
    }

    public StrokeTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StrokeTextView(Context context, AttributeSet attrs,
                          int defStyle) {
        super(context, attrs, defStyle);
        backGroundText = new TextView(context, attrs, defStyle);
    }

    @Override
    public void setLayoutParams(ViewGroup.LayoutParams params) {
        //同步布局参数
        backGroundText.setLayoutParams(params);
        super.setLayoutParams(params);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        CharSequence tt = backGroundText.getText();
        //两个TextView上的文字必须一致
        if (tt == null || !tt.equals(this.getText())) {
            backGroundText.setText(getText());
            this.postInvalidate();
        }
        backGroundText.measure(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        backGroundText.layout(left, top, right, bottom);
        super.onLayout(changed, left, top, right, bottom);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //其他地方，backGroundText和super的先后顺序影响不会很大，但是此处必须要先绘制backGroundText，
        init();
        backGroundText.draw(canvas);
        super.onDraw(canvas);
    }

    public void init() {
        TextPaint tp1 = backGroundText.getPaint();
        //设置描边宽度
        tp1.setStrokeWidth(2);
        //背景描边并填充全部
        tp1.setStyle(Paint.Style.FILL_AND_STROKE);
        //设置描边颜色
        backGroundText.setTextColor(Color.parseColor("#1E90FF"));
        //将背景的文字对齐方式做同步
        backGroundText.setGravity(getGravity());
    }

}

原理讲解：

效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通过上一篇博客知道，设置描边属性的textview，会比没有设置描边属性的textview粗一点

所以我们可以通过自定义两个Textview，其中一个有描边的作为背景TextView，另外一个没有描边的细一点的textview作为内容。这样两个textview合并在一起，就给人一种有描边的感觉。

知识点讲解：

1、对于需要修改、或者需要封装自定义控件的小伙伴，可以只针对init进行修改。在里面设置strokewidth宽度，还有textColor就可以了。

2、如果在init方法中，paint的style设置为stroke属性，则可以这样写

代码语言：javascript复制

    @Override
    protected void onDraw(Canvas canvas) {
        //其他地方，backGroundText和super的先后顺序影响不会很大，但是此处必须要先绘制backGroundText，
        super.onDraw(canvas);
        init();
        backGroundText.draw(canvas);
    }

当设置paint的style属性为stroke时，两种写法的区别是，第二种写法效果的描边更粗一点。

拓展：文字发光效果

private TextView txt_name;

txt_name.setShadowLayer(12,0,0, Color.WHITE);

– 参数详解 – setShadowLayer(float radius, float dx, float dy, int color) 1.radius：模糊半径，越大越模糊 2.dx：x轴偏移量，阴影离开文字的x横向距离 3.dy：y轴偏移量，阴影离开文字的Y横向距离 4.color：阴影颜色

textview android

0 人点赞