快速集成扫码功能(定制扫描框)

扫码功能在我们的app中已经很常见了,提到二维码扫描,大家首先会想到著名的开源库ZXing。ZXing固然好,功能也很强大,但是我们在集成ZXing这个开源库的时候需要将其精简化,抽离出只与Android相关的部分。还好GitHub上一些开源作者已经帮我们进行了精简处理,在Android Studio中我们只需要添加相关的依赖即可,有没有很简单哈哈,在这里我们要感谢开源作者我们做出的贡献。在这里我选取了zxing-android-embedded这个开源库,下面我们一起学习下如何在我们的项目中快速集成扫码功能。

  1. 添加依赖
    compile('com.journeyapps:zxing-android-embedded:3.6.0') { transitive = false }
    compile 'com.google.zxing:core:3.3.0'
  1. 支持硬件加速
    根据GitHub上面的文档,“Hardware accelation is required since TextureView is used.”意思就是说自从使用TextureView之后,硬件加速是有需要的。在manifest文件的application节点下添加:android:hardwareAccelerated="true"。

这样子我们就可以在代码中使用扫码功能了,关于扫码的API我在这里就不介绍了,大家可以点击GitHub文档进行查看,当然我们也可以将这个开源库的代码下载到本地,上面有一些常用sample。代码运行后我们会发现,扫码界面是不是有些“简陋”了点,这样子UI小姐姐肯定不会放过我们的,下面我们一起学习下怎么定制扫描框。

相信你在查看sample的时候会发现在布局文件中会出现DecoratedBarcodeView:

    
    

what???这是个什么东西,充满好奇心的我们肯定要点进去看一下:

/**
 * Encapsulates BarcodeView, ViewfinderView and status text.
 *
 * To customize the UI, use BarcodeView and ViewfinderView directly.
 */
public class DecoratedBarcodeView extends FrameLayout {
    private BarcodeView barcodeView;
    private ViewfinderView viewFinder;
    private TextView statusView;

看下上面的注释我们就明白了,原来DecoratedBarcodeView相当于将BarcodeView、ViewfinderView进行包装了一下,方便我们进行操作,作者建议我们:如果想要定制UI显示效果,直接使用BarcodeView、ViewfinderView就好。在这里我先说下,ViewfinderView就是我们定制扫码界面所使用到的。下面我们一起来尝试下:

  1. 新建BarcodeScanActivity作为扫码Activity,根据作者给出的sample,在该activity的布局文件中将BarcodeView和ViewfinderView添加进来,然后在activity中获得控件即可,BarcodeScanActivity中的关键代码如下:
        mBarcodeView = findViewById(R.id.mBarcodeView);          //取得控件
        mFinderView = findViewById(R.id.mFinderView);

        mFinderView.setCameraPreview(mBarcodeView);              //将BarcodeView和ViewfinderView关联起来
        mBarcodeView.decodeContinuous(callback);                 //设置扫码回调

然后我们就可以运行了(注意添加照相机权限!!!),运行完毕你会发现和作者给出的sample效果完全一样,下面我们就要自己定制扫码界面了。

  1. 定制扫码界面
    定制扫码界面其实就是一个简单的自定义效果,我们自己“绘制”出来自己想要的界面。
    新建CustomFinderView继承自ViewfinderView。以主流的扫码框为例,我们自定义属性的时候需要考虑到:扫码界面背景颜色、矩形框颜色、矩形框外侧四个“L”颜色、“L”高度等等。然后就需要我们重写onDraw方法来进行绘制了。下面贴出CustomFinderView代码,相信大家都能理解。
public class CustomFinderView extends ViewfinderView{

    private static final int DEFAULT_MASK_COLOR = 0X80000000;
    private static final int DEFAULT_RECT_COLOR = 0XFFFFFFFF;
    private static final int DEFAULT_CORNER_COLOR = 0XFF339933;
    private static final int DEFAULT_CORNER_WIDTH = 4;
    private static final int DEFAULT_CORNER_HEIGHT = 16;

    private int mMaskColor;

    private int mRectColor;

    private int mCornerColor;

    private int mCornerWidth;

    private int mCornerHeight;

    private int mScanLineResId;
    private Paint mRectPaint;
    private Paint cornerPaint;
    private Bitmap mLineBitmap;

    private int mScanTop = -1;

    public CustomFinderView(Context context, AttributeSet attrs) {
        super(context, attrs);

        initializeAttributes(attrs);

        initPaint();
    }

    private void initializeAttributes(AttributeSet attrs){
        TypedArray attributes = getContext().obtainStyledAttributes(attrs,R.styleable.CustomFinderView);

        this.mMaskColor = attributes.getColor(R.styleable.CustomFinderView_color_scan_mask,
                DEFAULT_MASK_COLOR);
        this.mRectColor = attributes.getColor(R.styleable.CustomFinderView_color_scan_rect,
                DEFAULT_RECT_COLOR);
        this.mCornerColor = attributes.getColor(R.styleable.CustomFinderView_color_scan_corner,
                DEFAULT_CORNER_COLOR);
        this.mCornerWidth = (int) attributes.getDimension(
                        R.styleable.CustomFinderView_width_scan_corner, dp2px(DEFAULT_CORNER_WIDTH));
        this.mCornerHeight = (int) attributes.getDimension(
                R.styleable.CustomFinderView_height_scan_corner, dp2px(DEFAULT_CORNER_HEIGHT));
        this.mScanLineResId = attributes.getResourceId(R.styleable.CustomFinderView_line_center_drawable,-1);

        attributes.recycle();
    }

    private void initPaint(){
        mRectPaint = new Paint();
        mRectPaint.setAntiAlias(true);
        mRectPaint.setColor(mRectColor);
        mRectPaint.setStrokeWidth(dp2px(1));
        mRectPaint.setStyle(Paint.Style.STROKE);

        cornerPaint = new Paint();
        cornerPaint.setAntiAlias(true);
        cornerPaint.setColor(mCornerColor);
        cornerPaint.setStrokeWidth(mCornerWidth);

        if (mScanLineResId != -1) {
            mLineBitmap = BitmapFactory.decodeResource(getResources(), mScanLineResId);
        }
    }

    @Override
    public void onDraw(Canvas canvas) {
        refreshSizes();

        if (framingRect == null || previewFramingRect == null) {
            return;
        }

        final Rect frame = framingRect;

        final int width = canvas.getWidth();
        final int height = canvas.getHeight();
        paint.setAntiAlias(true);

        // Draw the exterior (i.e. outside the framing rect) darkened
        paint.setColor(mMaskColor);
        canvas.drawRect(0, 0, width, frame.top, paint);
        canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);
        canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
        canvas.drawRect(0, frame.bottom + 1, width, height, paint);

        //Draw the Rect side
        RectF sideRect = new RectF(frame.left-mRectPaint.getStrokeWidth()/2,frame.top-mRectPaint.getStrokeWidth()/2,
                frame.right+mRectPaint.getStrokeWidth()/2,frame.bottom+mRectPaint.getStrokeWidth()/2);
        canvas.drawRect(sideRect,mRectPaint);

        //Draw the Rect corner
        float mSideLeft = frame.left - mRectPaint.getStrokeWidth();
        float mSideRight = frame.right + mRectPaint.getStrokeWidth();
        float mSlideTop = frame.top - mRectPaint.getStrokeWidth();
        float mSlideBottom = frame.bottom + mRectPaint.getStrokeWidth();

        canvas.drawLine(mSideLeft-mCornerWidth,mSlideTop-mCornerWidth/2,
                mSideLeft+mCornerHeight,mSlideTop-mCornerWidth/2,cornerPaint);
        canvas.drawLine(mSideRight+mCornerWidth,mSlideTop-mCornerWidth/2,
                mSideRight-mCornerHeight,mSlideTop-mCornerWidth/2,cornerPaint);

        canvas.drawLine(mSideLeft-mCornerWidth/2,mSlideTop,
                mSideLeft-mCornerWidth/2,mSlideTop+mCornerHeight,cornerPaint);
        canvas.drawLine(mSideRight+mCornerWidth/2,mSlideTop,
                mSideRight+mCornerWidth/2,mSlideTop+mCornerHeight,cornerPaint);

        canvas.drawLine(mSideLeft-mCornerWidth/2,mSlideBottom,
                mSideLeft-mCornerWidth/2,mSlideBottom-mCornerHeight,cornerPaint);
        canvas.drawLine(mSideRight+mCornerWidth/2,mSlideBottom,
                mSideRight+mCornerWidth/2,mSlideBottom-mCornerHeight,cornerPaint);

        canvas.drawLine(mSideLeft-mCornerWidth,mSlideBottom+mCornerWidth/2,
                mSideLeft+mCornerHeight,mSlideBottom+mCornerWidth/2,cornerPaint);
        canvas.drawLine(mSideRight+mCornerWidth,mSlideBottom+mCornerWidth/2,
                mSideRight-mCornerHeight,mSlideBottom+mCornerWidth/2,cornerPaint);

        //Draw the scan line
        if (mLineBitmap == null){
                mLineBitmap = BitmapFactory.decodeResource(getResources(),mScanLineResId);
        }

        if (mLineBitmap != null){

            if (mScanTop == -1){
                mScanTop = frame.top;
            }

            if (mScanTop >= frame.bottom - dp2px(2)){
                mScanTop = frame.top;
            }

            RectF destRect = new RectF(frame.left+dp2px(2),mScanTop,frame.right-dp2px(2),
                    mScanTop + dp2px(2));
            canvas.drawBitmap(mLineBitmap,null,destRect,cornerPaint);

            mScanTop = mScanTop +dp2px(4);
            postInvalidateDelayed(60,frame.left+dp2px(2),mScanTop,frame.right-dp2px(2),
                    mScanTop + dp2px(2));

        }

    }

    protected int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, getResources().getDisplayMetrics());
    }
}

最后的运行效果:


扫码界面

你可能感兴趣的:(快速集成扫码功能(定制扫描框))