Android 简易签名板

一个简单的练习，手写签名后，可以清空，保存，然后再相册进行查看
!简易签名板

有5个知识点，需要注意：

在SignatureView的onTouchEvent()方法中，利用mPath.quadTo()方法，使绘制路径变得圆滑
在SignatureView的save()方法中，将View中的内容保存到一个Bitmap中
在SignatureView的closeStream()方法中，所有的读写流都实现了Closeable接口，可以用来关闭流
在SignatureView的clear()方法中，利用PorterDuff.Mode.CLEAR将Canvas中绘制的内容清空
在MainActivity中，图片保存到本地后，需要向系统发送一个广播，通知相册更新

1. SignatureView 控件

先通过mCanvas利用mPaint将绘制的路径保存进了mBitmap中，再将mBitmap在canvas绘制出来

public class SignatureView extends View {
private Paint mPaint;
private Path mPath;
private Canvas mCanvas;
private Bitmap mBitmap;
private float mLastX, mLastY;//上次的坐标

public SignatureView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

/***
 * 初始化
 */
private void init() {
    //关闭硬件加速
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);

   //画笔
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
    mPaint.setStrokeWidth(5f);
    mPaint.setColor(Color.parseColor("#FF4081"));
    mPaint.setStyle(Paint.Style.STROKE);        
    mPaint.setStrokeJoin(Paint.Join.ROUND);//使画笔更加圆润
    mPaint.setStrokeCap(Paint.Cap.ROUND);//同上
   
    //路径
    mPath = new Path();

    //保存签名的画布
    post(new Runnable() {//拿到控件的宽和高
        @Override
        public void run() {
            mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mBitmap);
        }
    });
}

/**
 * 绘制
 */
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mBitmap != null) {
        canvas.drawColor(Color.WHITE);//绘制背景白色
        drawSignaturePath(); //将路径绘制在mBitmap上
        canvas.drawBitmap(mBitmap, 0, 0, null);//将mBitmap绘制在canvas上
    }
}

/**
 * 清空绘制内容
 */
public void clear() {
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    mCanvas.drawPaint(mPaint);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
    mPath.reset();
    invalidate();
}

/**
* 保存到指定的文件夹中
*/
public boolean save(String filePath) {
if (mBitmap != null && mLastY != 0f) {//没有绘制，就不保存
//从View中得到Bitmap
setDrawingCacheEnabled(true);
buildDrawingCache(true);
Bitmap bitmap = getDrawingCache(true);
//保存图片
File file = new File(filePath);
FileOutputStream fileOutputStream = null;
try {
fileOutputStream = new FileOutputStream(file);
if (bitmap.compress(Bitmap.CompressFormat.PNG, 100, fileOutputStream)) {
fileOutputStream.flush();
return true;
}
} catch (java.io.IOException e) {
e.printStackTrace();
} finally {
closeStream(fileOutputStream);
}
}
return false;
}

/**
 * 关闭流
 */
private void closeStream(Closeable closeable) {
    if (closeable != null) {
        try {
            closeable.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

/**
 * 绘制签名
 */
private void drawSignaturePath() {
    mCanvas.drawPath(mPath, mPaint);
}

/**
 * 触摸事件 触摸绘制
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    float x = event.getX();
    float y = event.getY();
    switch (action) {
        case MotionEvent.ACTION_DOWN:
            mLastX = x;
            mLastY = y;
            mPath.moveTo(mLastX, mLastY);
            break;
        case MotionEvent.ACTION_MOVE:
            float dx = Math.abs(x - mLastX);
            float dy = Math.abs(y - mLastY);
            if (dx >= 3 || dy >= 3) {//绘制的最小距离 3px
                //利用二阶贝塞尔曲线，使绘制路径更加圆滑
                mPath.quadTo(mLastX, mLastY, (mLastX + x) / 2, (mLastY + y) / 2);
            }
            mLastX = x;
            mLastY = y;
            break;
        case MotionEvent.ACTION_UP:
            mPath.reset();
            break;
    }
    invalidate();
    return true;
}

/**
 * 测量
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
    int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
    int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
    int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

    if (wSpecMode == MeasureSpec.EXACTLY && hSpecMode == MeasureSpec.EXACTLY) {
        setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
    } else if (wSpecMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(200, hSpecSize);
    } else if (hSpecMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(wSpecSize, 200);
    }
}

}

关键的地方都有注释
2.Activity 代码

在图片保存成功后，将图片的路径信息利用用广播发送给系统，通知相册更新

public class MainActivity extends AppCompatActivity {
private Button bt_clear,bt_save;
private SignatureView sv;
private final String APP_DIR = “com.signature.view”;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}

/**
 * 初始化
 */
private void init() {
    final String dir = Environment.getExternalStorageDirectory().getAbsolutePath()+ File.separator+APP_DIR+File.separator;
    final File fileDir = new File(dir);
    if (!fileDir.exists()){
        fileDir.mkdirs();
    }

    bt_clear = (Button) findViewById(R.id.bt_clear_main_activity);
    sv = (SignatureView) findViewById(R.id.sv_main_activity);
    bt_clear.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            sv.clear();
        }
    });

    bt_save = (Button) findViewById(R.id.bt_save_main_activity);
    bt_save.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            save(fileDir);
        }
    });
}

/**
 *  保存图片
 */
private void save(File fileDir) {
    final String filePath = getFilePath(fileDir);
    if (sv.save(filePath)){//保存成功
        //发送广播 通知系统相册更新
        Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
        Uri uri = Uri.fromFile(new File(filePath));
        intent.setData(uri);
        sendBroadcast(intent);
        Toast.makeText(MainActivity.this, "保存成功！！！", Toast.LENGTH_SHORT).show();
    }
}

/**
 *   得到图片的路径 以及图片的名字
 */
private String getFilePath(File fileDir) {
    SimpleDateFormat simpleDateFormat = (SimpleDateFormat) DateFormat.getDateTimeInstance();
    final String fileName = simpleDateFormat.format(new Date())+".png";
    Log.e("filename","---"+fileName);
    File file = new File(fileDir,fileName);
    return file.getAbsolutePath();
}

}

DateFormat.getDateTimeInstance()这个方法很方便的拿到手机设置的时间显示格式

布局文件:

<?xml version="1.0" encoding="utf-8"?>

<com.szlk.signatureview.view.SignatureView
    android:id="@+id/sv_main_activity"
    android:layout_width="match_parent"
    android:layout_height="400dp" />

<Button
    android:id="@+id/bt_clear_main_activity"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/sv_main_activity"
    android:layout_marginStart="50dp"
    android:text="清空"/>

<Button
    android:id="@+id/bt_save_main_activity"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/sv_main_activity"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="50dp"
    android:text="保存" />

布局很简陋
3. 最后

主要是练习一下，复习最近一段学习到的一些知识

有一个非常牛的签名板，可以学习一下张明云大神的Android手写优化-更为平滑的签名效果实现

共勉 : )在这里插入图片描述