自定義帶邊框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