您的位置:首页 > Web前端 > CSS

自定义ZXing扫码框样式

2017-12-28 16:29 676 查看
新接手的项目里面使用了ZXing扫码框架,使用的库为zxing-android-embedded.

接到需求要求修改扫码框样式,如图:





主要有3个问题:

1.修改扫码框之外的样式.

2.动态改变扫码框大小

3.修改扫码框样式,给四周添加圆角

框架的基本使用参考:
http://blog.csdn.net/u010618194/article/details/77891313
问题1:

扫码框之外的样式自定义就是修改扫码界面Activity的布局.

扫码框的自定义样式参考:
https://www.jianshu.com/p/922b8e970838
查看ViewFinderView源码后发现变量framingRect为扫码框大小参数 

新建了一个ViewFinderView的子类,重写了其中的refreshSizes()方法和onDraw().

问题2:

在refreshSizes()方法中指定了条形码框和二维码框的大小:

@Override
protected void refreshSizes() {
if(cameraPreview == null) {
return;
}
// Rect framingRect = cameraPreview.getFramingRect();

//切换扫描框大小
Rect framingRect;
if (isBarcode){
framingRect=new Rect(30,582,1050,1032);//条形码框
}else{
framingRect=new Rect(165,432,915,1182);//二维码框
}

Rect previewFramingRect = cameraPreview.getPreviewFramingRect();
if(framingRect != null && previewFramingRect != null) {
this.framingRect = framingRect;
this.previewFramingRect = previewFramingRect;
}
}切换方法:
//切换扫描框大小方法
public void switchScanModel(boolean isBarcode){
this.isBarcode=isBarcode;
refreshSizes();
}可以根据获取屏幕参数去设置框的大小,做适配,时间紧,我直接写死的.

问题3:
在onDraw()方法中绘制扫码框4个圆角:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//绘制扫码框4个边角弧形

//左上角
Path ltPath1=new Path();
Path ltPath2=new Path();
ltPath1.addRect(frame.left,frame.top,frame.left+20,frame.top+20, Path.Direction.CCW);
ltPath2.addCircle(frame.left+20,frame.top+20,20, Path.Direction.CCW);
ltPath1.op(ltPath2, Path.Op.DIFFERENCE);
canvas.drawPath(ltPath1,paint);
//右上角
Path rtPath1=new Path();
Path rtPath2=new Path();
rtPath1.addRect(frame.right-20,frame.top,frame.right+1,frame.top+20, Path.Direction.CCW);
rtPath2.addCircle(frame.right-20,frame.top+20,20, Path.Direction.CCW);
rtPath1.op(rtPath2, Path.Op.DIFFERENCE);
canvas.drawPath(rtPath1,paint);
//左下角
Path lbPath1=new Path();
Path lbPath2=new Path();
lbPath1.addRect(frame.left,frame.bottom-20,frame.left+20,frame.bottom+1, Path.Direction.CCW);
lbPath2.addCircle(frame.left+20,frame.bottom-20,20, Path.Direction.CCW);
lbPath1.op(lbPath2, Path.Op.DIFFERENCE);
canvas.drawPath(lbPath1,paint);
//右下角
Path rbPath1=new Path();
Path rbPath2=new Path();
rbPath1.addRect(frame.right-20,frame.bottom-20,frame.right+1,frame.bottom+1, Path.Direction.CCW);
rbPath2.addCircle(frame.right-20,frame.bottom-20,20, Path.Direction.CCW);
rbPath1.op(rbPath2, Path.Op.DIFFERENCE);
canvas.drawPath(rbPath1,paint);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息