自定义带边框TextView--边框粗细不一的问题

Posted 2021-01-30 thatme

自定义带边框TextView

给textview加边框
最low的做法、textview外层套一层布局，然后给布局加边框样式（这么弱的做法，不能这么干）

自定义控件

canvas.drawLines

用canvas画四个点

 package com.example.csy.activitypractice;
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.support.annotation.Nullable;
    import android.util.AttributeSet;

    /**
    * @author CSY
    * Created by CSY on 2018/12/3.
    */
    public class BorderTextView extends android.support.v7.widget.AppCompatTextView {

        private int STROKE_WIDTH = 5;

        public BorderTextView(Context context) {
            super(context);
        }

        public BorderTextView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
        }

        public BorderTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            Paint paint = new Paint();
            paint.setColor(Color.BLACK);
            //边框宽度
            paint.setStrokeWidth(STROKE_WIDTH);
            //空心
            paint.setStyle(Paint.Style.STROKE);
            //抗锯齿
            paint.setAntiAlias(true);

            //画线
            float[] points = {
                    0, 0, this.getWidth(), 0,
                    0, 0, 0, this.getHeight(),
                    this.getWidth(), 0, this.getWidth(), this.getHeight(),
                    0, this.getHeight(), this.getWidth(), this.getHeight()};
            canvas.drawLines(points, paint);
        }
    }

canvas.drawRect

canva直接提供了画矩形的方法
drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形

RectF rectF = new RectF(0, 0, this.getWidth(), this.getHeight());
canvas.drawRect(rectF, paint);

canvas.drawRoundRect

之前用Rect画了带矩形边框。现在升级一下画圆角边框

RectF rectF = new RectF(0, 0, this.getWidth(), this.getHeight());
canvas.drawRoundRect(rectF, 20, 20, paint);

如下图

canvas.drawPath

用drawRoundRect出现了粗细不一的边框，怀疑是因为用的裁剪。
所以尝试使用画路径的方法

Path path = new Path();
RectF rectF = new RectF(0, 0, this.getWidth(), this.getHeight());
path.addRoundRect(rectF, 20, 20, Path.Direction.CCW);
canvas.drawPath(path, paint);

但是效果与drawRoundRect一致

边框粗细不一致的问题需要看下自定义view

怀疑是因为边框被裁减了，所以画了两条线，一条从(0,0)开始，另一条从(100,0)开始

    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(50);

    canvas.drawLine(0,0,0,500,paint);
    canvas.drawLine(100,0,100,500,paint);

得到的图片如下图所示：

因此得出

画笔的起始在边框的中间，如若从(0,0)开始画，边框的一半就会被画在画布的外面。

解决

设置padding，减去边框的粗细

    Path path = new Path();
    RectF rectF = new RectF(STROKE_WIDTH / 2, STROKE_WIDTH / 2, this.getWidth() - (STROKE_WIDTH / 2), this.getHeight() - (STROKE_WIDTH / 2));
    path.addRoundRect(rectF, 20, 20, Path.Direction.CCW);
    canvas.drawPath(path, paint);

总结

通过本次自定义View的实践，应用了绘图的基础知识，顺带解决了下边框粗细不一的这个问题。这次的应用才只是自定义View的入门——绘图基础的应用而已。后面还有视图动画和属性动画等知识要掌握，加油！

来源：https://blog.csdn.net/menwaiqingshan/article/details/85157660