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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,387评论 25 707
  • 前言 现在的应用中二维码扫描已经成为一个应用必不可少的功能,现在大部分Android二维码扫描都是基于zxing和...
    g小志阅读 5,126评论 1 5
  • Zxing已经是一个很成熟的框架了,但它是用maven构建的项目,在以gradle为基础的AS中集成起来总感觉不太...
    雾中的影子阅读 46,193评论 7 28
  • 音乐,电影,书籍,这些信仰在现实面前被击得粉碎。 和过去说再见。 和企业文化是否契合,能不能适应企业的发展。 我们...
    骁龙阅读 159评论 0 0