Android自定义类-写字板

目录

1. 属性文件 res/values/attrs.xml

2. 自定义控件类文件 MyClipbroad.class

3. XML布局文件中的使用

4. Java文件中的使用

该写字板可设置画笔颜色、画笔宽度、画布背景，具有导出图像、清空画布功能，可与OnTouchListener配合达到触摸绘画的效果。

1. 属性文件 res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyClipboard">
        <attr name="paintColor" format="color" />
        <attr name="paintWidth" format="integer" />
    </declare-styleable>
</resources>

2. 自定义控件类文件 MyClipbroad.class

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.RelativeLayout;

import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;

public class MyClipboard extends RelativeLayout {
    private int viewHeight,viewWidth;
    private Path path=new Path();
    private int paintColor=R.color.black;
    private int paintWidth=5;
    public MyClipboard(Context context) {
        super(context);
        setLayoutParams(new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT
        ));
    }
    @SuppressLint("ResourceAsColor")
    public MyClipboard(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray =context.obtainStyledAttributes(attrs,R.styleable.MyClipboard);
        paintColor=typedArray.getColor(typedArray.getIndex(R.styleable.MyClipboard_paintColor), ContextCompat.getColor(context,R.color.black));
        paintWidth=typedArray.getInt(typedArray.getIndex(R.styleable.MyClipboard_paintWidth),5);
        typedArray.recycle();
        setLayoutParams(new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT
        ));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewHeight=MeasureSpec.getSize(heightMeasureSpec);
        viewWidth=MeasureSpec.getSize(heightMeasureSpec);
    }

    @SuppressLint("ResourceAsColor")
    protected void onDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        Paint paint=new Paint(paintColor);
        paint.setStrokeWidth(paintWidth);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path,paint);
    }

    /**
     * 绘制直线
     * @param x1
     * @param y1
     * @param x2
     * @param y2
     */
    public void draw(float x1,float y1,float x2,float y2){
        path.moveTo(x1,y1);
        path.lineTo(x2,y2);
        invalidate();
    }

    /**
     * 清空图像
     */
    public void cleanDraw(){
        Log.d("OK","clean");
        path=new Path();
        invalidate();
    }

    /**
     * 导出当前图像
     * @return 位图Bitmap
     */
    public Bitmap getBitmap(){
        Bitmap bitmap=Bitmap.createBitmap(viewWidth,viewHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas=new Canvas(bitmap);
        Paint paint=new Paint(paintColor);
        paint.setStrokeWidth(paintWidth);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path,paint);
        return bitmap;
    }
}

3. XML布局文件中的使用

请注意一定要设置background属性！

<com.example.clipboard.MyClipboard
    android:id="@+id/myc"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:paintColor="@color/teal_200"
    app:paintWidth="5"
    android:background="@color/white"/>

4. Java文件中的使用

//获取控件
 MyClipboard myClipboard=findViewById(R.id.myc);
 //添加监听器
 myClipboard.setOnTouchListener(new View.OnTouchListener() {
    private float oldX=0,oldY=0;
    public boolean onTouch(View view, MotionEvent motionEvent) {
        int action=motionEvent.getAction();
        if(action==MotionEvent.ACTION_DOWN){
            oldX=motionEvent.getX();
            oldY=motionEvent.getY();
            return true;
        }
        else if (action==MotionEvent.ACTION_MOVE) {
            float newX=motionEvent.getX();
            float newY=motionEvent.getY();
            ((MyClipboard)view).draw(oldX,oldY,newX,newY);
            oldX=newX;
            oldY=newY;
            return true;
        }    
        else if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) {
            float newX=motionEvent.getX();
            float newY=motionEvent.getY();
            ((MyClipboard)view).draw(oldX,oldY,newX,newY);
            oldX=0;
            oldY=0;
            return true;
        }
        return false;
    }
});

//清空图像
myClipboard.cleanDraw();

//导出图像
Bitmap bitmap=myClipboard.getBitmap();

tag：画板；手写板