扫码功能在我们的app中已经很常见了，提到二维码扫描，大家首先会想到著名的开源库ZXing。ZXing固然好，功能也很强大，但是我们在集成ZXing这个开源库的时候需要将其精简化，抽离出只与Android相关的部分。还好GitHub上一些开源作者已经帮我们进行了精简处理，在Android Studio中我们只需要添加相关的依赖即可，有没有很简单哈哈，在这里我们要感谢开源作者我们做出的贡献。在这里我选取了zxing-android-embedded这个开源库，下面我们一起学习下如何在我们的项目中快速集成扫码功能。
- 添加依赖
compile('com.journeyapps:zxing-android-embedded:3.6.0') { transitive = false }
compile 'com.google.zxing:core:3.3.0'
- 支持硬件加速
根据GitHub上面的文档，“Hardware accelation is required since TextureView is used.”意思就是说自从使用TextureView之后，硬件加速是有需要的。在manifest文件的application节点下添加：android:hardwareAccelerated="true"。
这样子我们就可以在代码中使用扫码功能了，关于扫码的API我在这里就不介绍了，大家可以点击GitHub文档进行查看，当然我们也可以将这个开源库的代码下载到本地，上面有一些常用sample。代码运行后我们会发现，扫码界面是不是有些“简陋”了点，这样子UI小姐姐肯定不会放过我们的，下面我们一起学习下怎么定制扫描框。
相信你在查看sample的时候会发现在布局文件中会出现DecoratedBarcodeView：
<com.journeyapps.barcodescanner.DecoratedBarcodeView
android:id="@+id/zxing_barcode_scanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:zxing_scanner_layout="@layout/custom_barcode_scanner">
</com.journeyapps.barcodescanner.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就是我们定制扫码界面所使用到的。下面我们一起来尝试下：
- 新建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效果完全一样，下面我们就要自己定制扫码界面了。
- 定制扫码界面
定制扫码界面其实就是一个简单的自定义效果，我们自己“绘制”出来自己想要的界面。
新建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());
}
}
最后的运行效果：
扫码界面
网友评论