美文网首页Android简书精选Android扫描Android知识
新手快速集成ZXing的扫描二维码,自定义界面功能实现

新手快速集成ZXing的扫描二维码,自定义界面功能实现

作者: Rayhaha | 来源:发表于2017-03-05 12:35 被阅读4053次

    QRCodeDemo

    新手快速集成ZXing的扫描二维码,同时自定义封装实现

    目录

    • 基本概述(项目资源地址)
      • 优点
      • 缺点
      • 界面展示
    • 二维码模块开发过程
      • ZXing集成
        • 导入ZXing.jar包
        • 拷贝资源文件到工程中
        • 拷贝扫码核心类到工程中
      • 主要包类简述
      • 自定义扫码页面布局文件
      • 自定义功能代码

    基本概述

    最老牌的二维码框架
    博客地址
    Github地址
    需要的资源可以直接从这个项目里面提取

    优势

    • Google的开源框架,高度的可定制性
    • 除了二维码还可以识别其他码,如条形码
    • 不依赖第三方,使用简单

    缺点

    • 相对Gradle依赖,ZXing的集成更为繁琐
    • 高度的可定制性也表示这更高的学习成本

    开发过程

    ZXing集成

    导入ZXing.jar包

    [图片上传失败...(image-58147a-1522833930690)]

    • 导入以后记得右键add as library

    拷贝资源文件到工程中

    将下面资源拷贝到自己工程下

    • layout包:

      • activity_qrcode_capture_layout.xml :主要扫码界面的布局,自定义布局的核心文件
    • raw包:(没有就新建)

      • beep.ogg :这个就是扫码成功的提示音效,也可以用自己的音效,不过名字要一样
    • values包:

      • colors.xml中添加如下的资源:
    <!-- QR_Code -->
        <color name="viewfinder_mask">#60000000</color>
        <color name="result_view">#b0000000</color>
        <color name="possible_result_points">#c0ffff00</color>
        <color name="result_image_border">#ffffffff</color>
        <color name="result_minor_text">#ffc0c0c0</color>
        <color name="result_points">#c000ff00</color>
        <color name="system_bar_color">#fed952</color>
    
    • ids.xml下添加如下资源:(没有就新建)
     <!-- QR_Code -->
        <item name="auto_focus" type="id"/>
        <item name="decode" type="id"/>
        <item name="decode_failed" type="id"/>
        <item name="decode_succeeded" type="id"/>
        <item name="encode_failed" type="id"/>
        <item name="encode_succeeded" type="id"/>
        <item name="launch_product_query" type="id"/>
        <item name="quit" type="id"/>
        <item name="restart_preview" type="id"/>
        <item name="return_scan_result" type="id"/>
        <item name="search_book_contents_failed" type="id"/>
        <item name="search_book_contents_succeeded" type="id"/>
        <item name="gridview" type="id"/>
        <item name="webview" type="id"/>
        <item name="about_version_code" type="id">false</item>
        <item name="split" type="id">false</item>
    
    • strings.xml 资源添加一下字符串资源:
       <!-- QR_Code -->
        <string name="button_ok">OK</string>
        <string name="msg_camera_framework_bug">Sorry, the Android camera encountered a problem. You may need to restart the
            device.
        </string>
        <string name="msg_bulk_mode_scanned">Bulk mode: barcode scanned and saved</string>
        <string name="scan_text">放入框中即可进行二维码扫描</string>
        <string name="contents_contact">Contact info</string>
        <string name="contents_email">Email address</string>
        <string name="contents_location">Geographic coordinates</string>
        <string name="contents_phone">Phone number</string>
        <string name="contents_sms">SMS address</string>
        <string name="contents_text">Plain text</string>
        <string name="preferences_vibrate">preferences_vibrate</string>
        <string name="preferences_play_beep">preferences_play_beep</string>
        <string name="preferences_actions_title">When a barcode is found\u2026</string>
        <string name="preferences_copy_to_clipboard_title">Copy to clipboard</string>
        <string name="preferences_decode_1D_title">1D barcodes</string>
        <string name="preferences_decode_Data_Matrix_title">Data Matrix</string>
        <string name="preferences_decode_QR_title">QR Codes</string>
        <string name="preferences_play_beep_title">Beep</string>
        <string name="preferences_remember_duplicates_summary">Store multiple scans of the same barcode in History</string>
        <string name="preferences_remember_duplicates_title">Remember duplicates</string>
        <string name="preferences_scanning_title">When scanning for barcodes, decode\u2026</string>
        <string name="preferences_supplemental_summary">Try to retrieve more information about the barcode contents</string>
        <string name="preferences_supplemental_title">Retrieve more info</string>
        <string name="preferences_vibrate_title">Vibrate</string>
        <string name="preview_msg">&#160;preview pages available,click Download for more.</string>
    
    • xml包: 新建 xml包
      • 添加:preferences.xml

    拷贝扫码核心类到工程中

    这个过程很简单,直接将ZXing的Java核心类文件夹拷贝到你的工程包名目录下就可以了
    [图片上传失败...(image-bbd546-1522833930690)]

    主要包类简述

    对核心功能类的了解,就是我们自定义扫码功能的基础

    • CaptureActivity :整个扫码的界面活动类

    • PreferencesActivity : 扫码功能的配置类,不会对其作出修改

    • CameraManager

      • 扫码的预览闪光灯等一系列功能,主要提供给我们调用,也不会对它作出修改
      • Camera类中暴露其他Manager的实现接口而已
    • DecodeThread : 解码的线程

    • DecodeHandler : 中转类,将线程的消息转发到 下面的CaptureActivityHandler

    • CaptureActivityHandler : 异步回传消息真正的逻辑处理实现类

    • Util :获取屏幕宽高和IMEI

    • ViewfinderView 扫码自定义框最主要的类,自定义扫码框主要在这里完成

    自定义扫码页面布局文件

    主要在activity_qrcode_capture_layout.xml中操作:
    本来的文件布局:
    只有一个简单的摄像头预览的SurfaceView和扫码框ViewfinderView

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:app="http://schemas.android.com/apk/res-auto"
                 android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
    
            <SurfaceView
                android:id="@+id/preview_view"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="center" />
    
            <com.rayhahah.qrcodedemo.zxing.view.ViewfinderView
                android:id="@+id/viewfinder_view"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
    
                <RelativeLayout
                    android:background="@color/transparent"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_50">
    
    
                    <ImageView
                        android:visibility="visible"
                        android:layout_alignParentLeft="true"
                        android:id="@+id/iv_qrcode_back"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:src="@drawable/ic_svg_arrow_left_color_primary_24"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"/>
    
                    <TextView
                        android:layout_centerInParent="true"
                        android:textSize="@dimen/sp_20"
                        android:gravity="center"
                        android:text="@string/decode_qrcode"
                        android:textColor="?attr/colorPrimary"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"/>
    
                </RelativeLayout>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1" />
    
                <include
                    android:id="@+id/include2"
                    layout="@layout/layout_qrcode_bottom_feature"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_60" />
    
            </LinearLayout>
    
        </RelativeLayout>
    
    </FrameLayout>
    

    然后加入我们自己的元素:

    1. 底部功能栏:相册、闪光的、生成二维码
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_60"
        android:background="@color/transparent"
        android:orientation="horizontal"
        android:padding="@dimen/dp_5">
    
        <TextView
            android:id="@+id/qrcode_btn_photo"
            style="@style/text_middle_center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_ic_photo"
            android:text="@string/photo_album"
            android:textColor="?attr/colorPrimary"
            android:textSize="@dimen/sp_16"/>
    
        <TextView
            android:id="@+id/qrcode_btn_flash"
            style="@style/text_middle_center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_ic_flash"
            android:text="@string/flash_light"
            android:textColor="?attr/colorPrimary"
            android:textSize="@dimen/sp_16"/>
    
        <TextView
            android:id="@+id/qrcode_btn_encode"
            style="@style/text_middle_center"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_ic_qrcode"
            android:text="@string/qrcode"
            android:textColor="?attr/colorPrimary"
            android:textSize="@dimen/sp_16"/>
    
    </LinearLayout>
    

    扫码框的自定义实现主要在ViewfinderView.java中onDraw动态绘制:
    主要原理就是获取他本来的扫码框大小,然后在他的四个角分别绘制两个长方形来包裹,同时在中间实现一个不断移动的扫码条

       @Override
         public void onDraw(Canvas canvas) {
             Rect frame = CameraManager.get().getFramingRect();
             if (frame == null) {
                 return;
             }
     
             if (!isFirst) {
                 isFirst = true;
                 slideTop = frame.top;
                 slideBottom = frame.bottom;
             }
             int width = canvas.getWidth();
             int height = canvas.getHeight();
     
             // Draw the exterior (i.e. outside the framing rect) darkened
             paint.setColor(resultBitmap != null ? resultColor : maskColor);
             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);
     
             //这里开始是自定义的部分
             if (resultBitmap != null) {
                 // Draw the opaque result bitmap over the scanning rectangle
                 paint.setAlpha(OPAQUE);
                 canvas.drawBitmap(resultBitmap, null, frame, paint);
             } else {
     
                 //画出8个正方形,组成括住扫码框
                 paint.setColor(scanColor);
                 canvas.drawRect(frame.left, frame.top, frame.left + ScreenRate,
                         frame.top + CORNER_WIDTH, paint);
                 canvas.drawRect(frame.left, frame.top, frame.left + CORNER_WIDTH,
                         frame.top + ScreenRate, paint);
                 canvas.drawRect(frame.right - ScreenRate, frame.top, frame.right,
                         frame.top + CORNER_WIDTH, paint);
                 canvas.drawRect(frame.right - CORNER_WIDTH, frame.top, frame.right,
                         frame.top + ScreenRate, paint);
                 canvas.drawRect(frame.left, frame.bottom - CORNER_WIDTH, frame.left
                         + ScreenRate, frame.bottom, paint);
                 canvas.drawRect(frame.left, frame.bottom - ScreenRate, frame.left
                         + CORNER_WIDTH, frame.bottom, paint);
                 canvas.drawRect(frame.right - ScreenRate, frame.bottom
                         - CORNER_WIDTH, frame.right, frame.bottom, paint);
                 canvas.drawRect(frame.right - CORNER_WIDTH, frame.bottom
                         - ScreenRate, frame.right, frame.bottom, paint);
     
                 /**
                  * 一直在移动的扫描条
                  */
                 slideTop += SPEEN_DISTANCE;
                 if (slideTop >= frame.bottom) {
                     slideTop = frame.top;
                 }
                 Rect lineRect = new Rect();
                 lineRect.left = frame.left;
                 lineRect.right = frame.right;
                 lineRect.top = slideTop;
                 lineRect.bottom = slideTop + 18;
                 canvas.drawBitmap(((BitmapDrawable) (getResources()
                                 .getDrawable(R.drawable.blue_line))).getBitmap(), null, lineRect,
                         paint);
     
                 paint.setColor(Color.WHITE);
                 paint.setTextSize(TEXT_SIZE * density);
                 paint.setAlpha(0x40);
                 paint.setTypeface(Typeface.create("System", Typeface.BOLD));
                 String text = getResources().getString(R.string.scan_text);
                 float textWidth = paint.measureText(text);
     
                 canvas.drawText(
                         text,
                         (width - textWidth) / 2,
                         (float) (frame.bottom + (float) TEXT_PADDING_TOP * density),
                         paint);
     
                 //自定义部分结束
     
                 Collection<ResultPoint> currentPossible = possibleResultPoints;
                 Collection<ResultPoint> currentLast = lastPossibleResultPoints;
                 if (currentPossible.isEmpty()) {
                     lastPossibleResultPoints = null;
                 } else {
                     possibleResultPoints = new HashSet<ResultPoint>(5);
                     lastPossibleResultPoints = currentPossible;
                     paint.setAlpha(OPAQUE);
                     paint.setColor(resultPointColor);
                     for (ResultPoint point : currentPossible) {
                         canvas.drawCircle(frame.left + point.getX(), frame.top
                                 + point.getY(), 6.0f, paint);
                     }
                 }
                 if (currentLast != null) {
                     paint.setAlpha(OPAQUE / 2);
                     paint.setColor(resultPointColor);
                     for (ResultPoint point : currentLast) {
                         canvas.drawCircle(frame.left + point.getX(), frame.top
                                 + point.getY(), 3.0f, paint);
                     }
                 }
     
                 postInvalidateDelayed(ANIMATION_DELAY, frame.left, frame.top,
                         frame.right, frame.bottom);
             }
         }
    

    自定义功能代码

    CaptureActivity.Java中完成:

    1. 首先找到我们的控件:
      btnBack = ((ImageView) findViewById(R.id.iv_qrcode_back));
            btnPhoto = ((TextView) findViewById(R.id.qrcode_btn_photo));
            btnFlash = ((TextView) findViewById(R.id.qrcode_btn_flash));
            btnEncode = ((TextView) findViewById(R.id.qrcode_btn_encode));
            btnBack.setOnClickListener(this);
            btnPhoto.setOnClickListener(this);
            btnFlash.setOnClickListener(this);
            btnEncode.setOnClickListener(this);
    
    
    1. 监听实现:
     
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.iv_qrcode_back:
                    finish();
                    break;
                case R.id.qrcode_btn_photo:
                    //跳转到系统相册选择图片
                    Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
                    intent.setType("image/*");
                    Intent wrapperIntent = Intent.createChooser(intent, "选择二维码图片");
                    startActivityForResult(wrapperIntent, REQUEST_CODE);
                    break;
                case R.id.qrcode_btn_flash:
                    if (isFlash) {
                        //关闭闪光灯
                        CameraManager.get().turnLightOff();
                        isFlash=false;
                    } else {
                        //开启闪光灯
                        CameraManager.get().turnLightOn();
                        isFlash=true;
                    }
                    break;
                case R.id.qrcode_btn_encode:
                    // 跳转到生成二维码页面
                    Bitmap b = createQRCode();
                    Intent intentEncode = getIntent();
                    intentEncode.putExtra(EXTRA_DATA, b);
    //                intentEncode.putExtra("QR_CODE", b);
                    setResult(RESULT_CODE_ENCODE, intentEncode);
                    finish();
                    break;
                default:
                    break;
            }
        }
    
    1. CaptureActivity中获取相册中选择的图片来扫码:
         @Override
          protected void onActivityResult(int requestCode, int resultCode, Intent data) {
              super.onActivityResult(requestCode, resultCode, data);
              //返回选择的需要扫描二维码的图片
              if (resultCode == RESULT_OK) {
                  //被选择的二维码图片的uri
                  uri = data.getData();
                  new Thread(new Runnable() {
                      @Override
                      public void run() {
                          //扫描
                          Result result = scanningImage(uri);
                          if (result == null) {
                              Looper.prepare();
                              Toast.makeText(getApplicationContext(), "图片格式有误", Toast.LENGTH_SHORT).show();
                              Looper.loop();
                          } else {
                              // 数据返回,在这里去处理扫码结果
                              String recode = (result.toString());
                              Intent data = new Intent();
                              data.putExtra(EXTRA_DATA, recode);
                              setResult(RESULT_CODE_DECODE, data);
                              finish();
                          }
                      }
                  }).start();
              }
          }
    
    1. 最后只要在我们启动的Activity中的获取二维码扫描后的内容并做自己的处理就可以了,MainActivity中的使用
    
       private static final int REQUEST_QRCODE = 0x01;
       
      public void onQRCodeClick(View view) {
            //启动二维码扫描的页面功能
            Intent intent = new Intent(this, CaptureActivity.class);
            startActivityForResult(intent, REQUEST_QRCODE);
        }
    
        @Override
        public void onActivityResult(int requestCode, int resultCode, Intent data) {
            if (requestCode == REQUEST_QRCODE) {
                switch (resultCode) {
                    case CaptureActivity.RESULT_CODE_DECODE:
                    case Activity.RESULT_OK:
                        String codeData = data.getStringExtra(CaptureActivity.EXTRA_DATA);
                        Toast.makeText(this, codeData, Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
            }
        }
    
    

    相关文章

      网友评论

      • 如你所喜欢:为什么我下载的zxing.jar包add as library后的文件没有你上面说的那些
      • 七岁就狠拽:需要仿微信效果的可以看看这个项目
      • 风舞尘起:github上有封装好的zxing,不过貌似识别效果好差,不知道是不是我哪里配置有问题
        Rayhaha:@GEM_80a7 是不是动态权限没申请
        GEM_80a7:楼主,我弄完了之后点击扫描就秒退了,为嘛啊,萌新
        Rayhaha:@风舞尘起 封装好的自然很多,主要是一步一步了解一下核心类和方法的实现,你的配置的话我也看不到。。。。

      本文标题:新手快速集成ZXing的扫描二维码,自定义界面功能实现

      本文链接:https://www.haomeiwen.com/subject/okbsgttx.html