Android 自定義View:手寫簽名

最近項目中有個新的需求，就是要實現用戶手寫簽名，然后展示再上傳到服務器。看到效果圖后，先是面對百度編程搜了一下，很多實現方法，主要就是自定義View實現的，為了記錄其中的坑，并提升自己的自定義View的能力，還是寫出來記錄一下。

主要代碼如下(用的Kotlin寫的)：

import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.view.View import java.io.ByteArrayOutputStream import java.io.File import java.io.FileOutputStream import java.io.IOException/*** Created by yuan7016 on 2019/07/02. <br/>* desc : 簽名View*/ class SignView : View {/*** 畫筆*/private var paint : Paint? = nullprivate var path : Path? = nullprivate lateinit var cacheCanvas : Canvas/*** 簽名畫布*/private lateinit var signBitmap: Bitmap//畫筆顏色private var paintColor : Int = Color.BLACK//畫筆寬度private var paintWidth = 15fprivate var xAlixs : Float = 0.0fprivate var yAlixs : Float = 0.0f/*** 背景色（指最終簽名結果文件的背景顏色,這里我設置為白色）* 你也可以設置為透明的*/private var mBackColor = Color.WHITE//是否已經簽名private var isSigned : Boolean = falseconstructor(context: Context?) : super(context){init(context)}constructor(context: Context?,attributeSet: AttributeSet?) : super(context,attributeSet){init(context)}constructor(context: Context?,attributeSet: AttributeSet,defStyleAttr : Int) : super(context,attributeSet,defStyleAttr){init(context)}fun init(context: Context?){paint = Paint()path = Path()//setBackgroundColor(Color.WHITE)paint?.color = paintColor//設置簽名顏色paint?.style = Paint.Style.STROKE //設置填充樣式paint?.isAntiAlias = true //抗鋸齒功能paint?.strokeWidth = paintWidth//設置畫筆寬度}override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {super.onSizeChanged(w, h, oldw, oldh)//創建跟view一樣大的bitmap，用來保存簽名signBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)cacheCanvas = Canvas(signBitmap)cacheCanvas.drawColor(mBackColor)isSigned = false}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)//畫此次筆畫之前的簽名canvas.drawBitmap(signBitmap, 0f, 0f, paint)// 通過畫布繪制多點形成的圖形canvas.drawPath(path,paint)}override fun onTouchEvent(event: MotionEvent): Boolean {//記錄每次 X ， Y軸的坐標xAlixs = event.xyAlixs = event.ywhen (event.action) {MotionEvent.ACTION_DOWN -> {path?.reset()path?.moveTo(xAlixs, yAlixs)}MotionEvent.ACTION_MOVE -> {path?.lineTo(xAlixs, yAlixs)isSigned = true}MotionEvent.ACTION_UP -> {//將路徑畫到bitmap中，即一次筆畫完成才去更新bitmap，而手勢軌跡是實時顯示在畫板上的。cacheCanvas.drawPath(path, paint)path?.reset()}else -> AppLog.e("otherwise")}// 更新繪制invalidate()return true}/*** 清除畫板*/public fun clear(){isSigned = falsepath?.reset()paint?.color = paintColorcacheCanvas.drawColor(mBackColor, PorterDuff.Mode.CLEAR)invalidate()}/*** 保存畫板** @param path 保存到路徑*/@Throws(IOException::class)fun save(path: String) {val bitmap = signBitmap// 如果圖片過大的話，需要壓縮圖片，不過在我測試手機上最大才50多kbval bos = ByteArrayOutputStream()bitmap.compress(Bitmap.CompressFormat.PNG, 100, bos)val buffer = bos.toByteArray()if (buffer != null) {val file = File(path)if (file.exists()) {file.delete()}val outputStream = FileOutputStream(file)outputStream.write(buffer)outputStream.close()}}//TODO 這里可以擴展一些setter方法/*** 是否有簽名** @return isSigned*/public fun getHasSigned() : Boolean{return isSigned}}

在布局中引用：

<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/ll_bottom"android:layout_marginBottom="15dp"android:background="@drawable/bg_shape_white_round_4"android:padding="10dp"><com.yuan.demo.view.SignViewandroid:id="@+id/signView"android:layout_width="match_parent"android:layout_height="match_parent" /><ImageViewandroid:id="@+id/ivBack"android:layout_width="30dp"android:layout_height="38dp"android:padding="8dp"android:background="?attr/selectableItemBackground"android:src="@mipmap/icon_back_gray" /></RelativeLayout>

?

在Activity中保存簽名:

/*** 保存簽名*/private fun saveSignBitmap(){//保存路徑val path : String = getExternalFilesDir(Environment.DIRECTORY_PICTURES).path + File.separator + "order_sign_" + System.currentTimeMillis() + ".png"if (signView.getHasSigned()){try {signView.save(path)ToastUtil.showToast("保存成功!")SharedPreferencesUtil.setPreferStr(AppConstant.KEY_SIGN_PATH,path)finish()}catch ( ex: Exception){ToastUtil.showToast("簽名保存失敗!")}}else{ToastUtil.showToast("您還沒有簽名，請簽名!")}}

? 主要代碼及邏輯如上所示。

? 效果圖如下：

?

總結

以上是生活随笔為你收集整理的Android 自定义View手写签名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。