QRCodeDemo

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

目录

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

基本概述

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

优势

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

缺点

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

开发过程

ZXing集成

导入ZXing.jar包

Alt text

  • 导入以后记得右键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核心类文件夹拷贝到你的工程包名目录下就可以了 Alt text

主要包类简述

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

  • 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;
            }
        }
    }