自定义ZXing Android Embedded扫描框样式

前言:

非常多应用需要集成二维码扫描功能,需要自定义样式的话目前只有自己手动绘制,这里只简单做个例子,个性化需求需要自己再根据需求绘制

compile'com.journeyapps:zxing-android-embedded:3.6.0'

compile'com.google.zxing:core:3.3.0'

eg:


1536935-ff392dfbdd5027b4.jpg
1536935-25a7d73dc5f633a8.jpg

代码:

直接上代码,重点在onDraw方法中,注释比较详细了,没有封装,有兴趣的小伙伴可以封装一下,偷懒的同学可以直接使用。

/**

* Created by Administrator on 2018/3/8.

*/

internal class CustomViewfinderView(context:Context, attrs: AttributeSet) : ViewfinderView(context, attrs) {

/* ****************************************** 边角线相关属性 ************************************************/

    /**

* "边角线长度/扫描边框长度"的占比 (比例越大,线越长)

*/

    var mLineRate =0.05f

    /**

* 边角线厚度 (建议使用dp)

*/

    var mLineDepth =TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2f, resources.displayMetrics)

/**

* 边角线颜色

*/

    var mLineColor = getContext().resources.getColor(R.color.colorAccent)

/* ******************************************* 扫描线相关属性 ************************************************/

    /**

* 扫描线起始位置

*/

    var mScanLinePosition =0

    /**

* 扫描线厚度

*/

    var mScanLineDepth =TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2f, resources.displayMetrics)

/**

* 扫描线每次重绘的移动距离

*/

    var mScanLineDy =TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3f, resources.displayMetrics)

/**

* 线性梯度

*/

    lateinit var mLinearGradient:LinearGradient

    /**

* 线性梯度位置

*/

    var mPositions =floatArrayOf(0f, 0.5f, 1f)

/**

* 线性梯度各个位置对应的颜色值

*/

    lateinit var nowScanRect:Rect

    var buttonRect:RectF? =null

    var laserColor_center = getContext().resources.getColor(R.color.colorAccent)

var laserColor_light = getContext().resources.getColor(R.color.colorAccent_light)

var tip = "tip"

var text_btn = "个性化需求"

var screenWidth =0

    var screenHeight =0

    //扫描线渐变色

    var mScanLineColor =intArrayOf(laserColor_light, laserColor_center, laserColor_light)

init {

val manager = (getContext()as Activity).windowManager

        val outMetrics = DisplayMetrics()

manager.defaultDisplay.getMetrics(outMetrics)

screenWidth = outMetrics.widthPixels

        screenHeight = outMetrics.heightPixels

        var w =screenWidth *3 /5

        var marginL =screenWidth /5

        var marginT =screenHeight /4

        nowScanRect = Rect(marginL, marginT, w + marginL, w + marginT)

}

fun drawText(canvas:Canvas, mScanRect:Rect) {

val mTxetPaint = Paint()

mTxetPaint.apply {

            color =context.resources.getColor(R.color.common_white)

textSize =DisplayUtils.dp2px(context, 14f).toFloat()

style =Paint.Style.FILL

            textAlign =Paint.Align.CENTER

        }

        canvas.drawText(tip, (screenWidth /2).toFloat(), (mScanRect.top -DisplayUtils.dp2px(context, 22f)).toFloat(), mTxetPaint)

}

fun drawButton(canvas:Canvas, mScanRect:Rect) {

val buttonPaint = Paint()

buttonPaint.apply {

            isAntiAlias =true

            color =context.resources.getColor(R.color.common_white)

strokeWidth =1f

            style =Paint.Style.STROKE

        }

        var height =DisplayUtils.dp2px(context, 40f)

var left = mScanRect.left + (mScanRect.right - mScanRect.left) /6

        var top = mScanRect.bottom +DisplayUtils.dp2px(context, 48f)

var right = mScanRect.right - (mScanRect.right - mScanRect.left) /6

        var bottom = mScanRect.bottom +DisplayUtils.dp2px(context, 48f) + height

buttonRect = RectF(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat())

buttonRect?.let {

            canvas.drawRoundRect(it, DisplayUtils.dp2px(context, 20f).toFloat(), DisplayUtils.dp2px(context, 20f).toFloat(), buttonPaint)

}

        buttonPaint.apply {

            color =context.resources.getColor(R.color.common_white)

textSize =DisplayUtils.dp2px(context, 14f).toFloat()

style =Paint.Style.FILL

            textAlign =Paint.Align.CENTER

        }

        var fontMetrics = buttonPaint.fontMetricsInt

        // var baseLine = buttonRect.centerY() + (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent

        buttonRect?.let {

            val baseLine = (it.top +it.bottom - fontMetrics.top - fontMetrics.bottom) /2

            canvas.drawText(text_btn, it.centerX(), baseLine, buttonPaint)

}

    }

@SuppressLint("DrawAllocation")

override fun onDraw(canvas:Canvas) {

refreshSizes()

if (framingRect ==null ||previewFramingRect ==null) {

return

        }

//  framingRect = nowScanRect

        val frame =nowScanRect

        val previewFrame =previewFramingRect

        val width = canvas.width

        val height = canvas.height

        // Draw the exterior (i.e. outside the framing rect) darkened

        paint.color =if (resultBitmap !=null)resultColor else maskColor

        canvas.drawRect(0f, 0f, width.toFloat(), frame.top.toFloat(), paint)

canvas.drawRect(0f, frame.top.toFloat(), frame.left.toFloat(), (frame.bottom +1).toFloat(), paint)

canvas.drawRect((frame.right +1).toFloat(), frame.top.toFloat(), width.toFloat(), (frame.bottom +1).toFloat(), paint)

canvas.drawRect(0f, (frame.bottom +1).toFloat(), width.toFloat(), height.toFloat(), paint)

//  drawText(canvas, frame)

drawButton(canvas, frame)

//绘制4个角

        paint.color =mLineColor

        // 定义画笔的颜色

//左上-横线

        canvas.drawRect(frame.left.toFloat() -mLineDepth,

                frame.top.toFloat() -mLineDepth,

                frame.left + frame.width() *mLineRate,

                frame.top.toFloat(), paint)

//左上-纵线

        canvas.drawRect(frame.left.toFloat() -mLineDepth, frame.top.toFloat(), frame.left.toFloat(), frame.top + frame.height() *mLineRate, paint)

//右上-横线

        canvas.drawRect(frame.right - frame.width() *mLineRate, frame.top.toFloat() -mLineDepth, frame.right.toFloat() +mLineDepth, frame.top.toFloat(), paint)

//右上-纵线

        canvas.drawRect(frame.right.toFloat(), frame.top.toFloat() -mLineDepth, frame.right.toFloat() +mLineDepth, frame.top + frame.height() *mLineRate, paint)

//左下-横线

        canvas.drawRect(frame.left.toFloat() -mLineDepth, frame.bottom.toFloat(), frame.left + frame.width() *mLineRate, frame.bottom.toFloat() +mLineDepth, paint)

//左下-纵线

        canvas.drawRect(frame.left.toFloat() -mLineDepth, frame.bottom - frame.height() *mLineRate, frame.left.toFloat(), frame.bottom.toFloat(), paint)

//右下-横线

        canvas.drawRect(frame.right - frame.width() *mLineRate, frame.bottom.toFloat(), frame.right.toFloat() +mLineDepth, frame.bottom.toFloat() +mLineDepth, paint)

//右下-纵线

        canvas.drawRect(frame.right.toFloat(), frame.bottom - frame.height() *mLineRate, frame.right.toFloat() +mLineDepth, frame.bottom.toFloat() +mLineDepth, paint)

if (resultBitmap !=null) {

// Draw the opaque result bitmap over the scanning rectangle

            paint.alpha =ViewfinderView.CURRENT_POINT_OPACITY

            canvas.drawBitmap(resultBitmap, null, frame, paint)

}else {

//  drawLaserLine(canvas,frame)

// 绘制扫描线

            mScanLinePosition +=mScanLineDy.toInt()

if (mScanLinePosition > frame.height()) {

mScanLinePosition =0

            }

mLinearGradient = LinearGradient(frame.left.toFloat(), (frame.top +mScanLinePosition).toFloat(), frame.right.toFloat(), (frame.top +mScanLinePosition).toFloat(), mScanLineColor, mPositions, Shader.TileMode.CLAMP)

paint.shader =mLinearGradient

            canvas.drawRect(frame.left.toFloat(), (frame.top +mScanLinePosition).toFloat(), frame.right.toFloat(), frame.top.toFloat() +mScanLinePosition.toFloat() +mScanLineDepth, paint)

paint.shader =null

            val scaleX = frame.width() / previewFrame.width().toFloat()

val scaleY = frame.height() / previewFrame.height().toFloat()

val currentPossible =possibleResultPoints

            val currentLast =lastPossibleResultPoints

            val frameLeft = frame.left

            val frameTop = frame.top

            if (currentPossible.isEmpty()) {

lastPossibleResultPoints =null

            }else {

possibleResultPoints = ArrayList(5)

lastPossibleResultPoints = currentPossible

paint.alpha =ViewfinderView.CURRENT_POINT_OPACITY

                paint.color =resultPointColor

                for (pointin currentPossible) {

canvas.drawCircle((frameLeft + (point.x * scaleX).toInt()).toFloat(), (frameTop + (point.y * scaleY).toInt()).toFloat(), ViewfinderView.POINT_SIZE.toFloat(), paint)

}

}

if (currentLast !=null) {

paint.alpha =ViewfinderView.CURRENT_POINT_OPACITY /2

                paint.color =resultPointColor

                val radius =ViewfinderView.POINT_SIZE /2.0f

                for (pointin currentLast) {

canvas.drawCircle((frameLeft + (point.x * scaleX).toInt()).toFloat(), (frameTop + (point.y * scaleY).toInt()).toFloat(), radius, paint)

}

}

}// Request another update at the animation interval, but only repaint the laser line, // not the entire viewfinde

// rmask.

        postInvalidateDelayed(CUSTOME_ANIMATION_DELAY, frame.left, frame.top, frame.right, frame.bottom)

}

    interface InputView {

fun inputClick()

}

var inputView: InputView? =null

    fun setInputView(doInput: () ->Unit) {

this.inputView =object : InputView {

override fun inputClick() {

doInput()

}

}

}

override fun onTouchEvent(event:MotionEvent?):Boolean {

when (event?.action) {

MotionEvent.ACTION_DOWN -> {

val x = event?.x

                val y = event?.y

                buttonRect?.let {

                    if (it.contains(x, y)) {

inputView?.inputClick()

}

}

            }

}

return super.onTouchEvent(event)

}

companion object {

/**

* 重绘时间间隔

*/

        val CUSTOME_ANIMATION_DELAY:Long =16

    }

}

使用:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

<com.journeyapps.barcodescanner.BarcodeView

        android:id="@+id/zxing_barcode_surface"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

<com.young.demo.CustomViewfinderView

        android:id="@+id/zxing_viewfinder_view"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        />

</FrameLayout>

so easy!

展开阅读全文

没有更多推荐了,返回首页