实现一个自定义布局的扫码功能

本文介绍了如何在Android应用中集成ZXingLite库实现扫码功能,包括直接使用CaptureActivity、自定义布局、使用CameraScan以及高级扩展。提供了代码示例展示如何启动扫码界面、生成和解析二维码/条形码,以及自定义布局和手电筒功能。
摘要由CSDN通过智能技术生成
  1. 开源项目地址:https://github.com/jenly1314/ZXingLite
  2. 在Project的 build.gradle 里面添加远程仓库
    allprojects {
        repositories {
            //...
            mavenCentral()
        }
    }
  3. 在Module的 build.gradle 里面添加引入依赖项
    implementation 'com.github.jenly1314:zxing-lite:2.1.1'

快速实现扫码有以下几种方式:

1、直接使用CaptureActivity或者CaptureFragment。(纯洁的扫码,无任何添加剂)

2、通过继承CaptureActivity或者CaptureFragment并自定义布局。(适用于大多场景,并无需关心扫码相关逻辑,自定义布局时需覆写getLayoutId方法)实现示例:CustomCaptureActivity 和 QRCodeActivity

3、在你项目的Activity或者Fragment中实例化一个CameraScan即可。(适用于想在扫码界面写交互逻辑,又因为项目架构或其它原因,无法直接或间接继承CaptureActivity或CaptureFragment时使用)实现示例:CustomActivity

4、继承CameraScan自己实现一个,可参照默认实现类DefaultCameraScan,其它步骤同方式3。(扩展高级用法,谨慎使用)

布局示例

可自定义布局(覆写getLayoutId方法),布局内至少要保证有PreviewView。

PreviewView 用来预览,布局内至少要保证有PreviewView,如果是继承CaptureActivity或CaptureFragment,控件id可覆写getPreviewViewId方法自定义

ViewfinderView 用来渲染扫码视图,给用户起到一个视觉效果,本身扫码识别本身没有关系,如果是继承CaptureActivity或CaptureFragment,控件id可复写getViewfinderViewId方法自定义,默认为previewView,返回0表示无需ViewfinderView

ivFlashlight 用来内置手电筒,如果是继承CaptureActivity或CaptureFragment,控件id可复写getFlashlightId方法自定义,默认为ivFlashlight。返回0表示无需内置手电筒。您也可以自己去定义

代码示例 (二维码/条形码)

    //跳转的默认扫码界面
    startActivityForResult(new Intent(context,CaptureActivity.class),requestCode);

    //生成二维码
    CodeUtils.createQRCode(content,600,logo);
    //生成条形码
    CodeUtils.createBarCode(content, BarcodeFormat.CODE_128,800,200);
    //解析条形码/二维码
    CodeUtils.parseCode(bitmap);
    //解析二维码
    CodeUtils.parseQRCode(bitmap);

个人做法记录:

新建一个activity继承CaptureActivity。

package com.efuture.androidmvvmdemo.activity;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.annotation.Nullable;

import com.efuture.androidmvvmdemo.R;
import com.gyf.immersionbar.ImmersionBar;
import com.king.zxing.CaptureActivity;
import com.king.zxing.util.CodeUtils;

import java.io.FileNotFoundException;

public class QrCodeActivity extends CaptureActivity implements View.OnClickListener {

    // 相册
    private ImageView iv_photo;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 设置状态栏颜色为白色
        ImmersionBar.with(this).statusBarColor(R.color.black)
                .fitsSystemWindows(true).init();
        iv_photo = findViewById(R.id.iv_photo);
        iv_photo.setOnClickListener(this);
    }

    @Override
    public int getLayoutId() {
        return R.layout.activity_qr_code;
    }

    @Override
    public int getFlashlightId() {
        return R.id.ll_Flashlight;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            // 相册
            case R.id.iv_photo:
                //打开相册
                Intent intent = new  Intent(Intent.ACTION_PICK);
                //指定获取的是图片
                intent.setType("image/*");
                startActivityForResult(intent, 1);
                break;
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode != Activity.RESULT_OK) {
            return;
        }
        switch (requestCode) {
            // 从相册返回得话
            case 1:
                if (data != null) {
                    Uri uris;
                    uris = data.getData();
                    Bitmap bitmap = null;
                    // Uri转化为Bitmap
                    try {
                        bitmap = getBitmapFromUri(uris);
                    } catch (FileNotFoundException e) {
                        e.printStackTrace();
                    }
                    //生成二维码
                    CodeUtils.createQRCode("aaaaa", 600, bitmap);
                    //解析二维码
                    String s = CodeUtils.parseQRCode(bitmap);
                    Toast.makeText(this, s, Toast.LENGTH_SHORT).show();
                }

                break;
        }
    }

    // Uri转化为Bitmap
    private Bitmap getBitmapFromUri(Uri uri) throws FileNotFoundException {
        Bitmap bitmap = BitmapFactory.decodeStream(getContentResolver().openInputStream(uri));
        return bitmap;
    }
}

这个是布局文件:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>

    <androidx.camera.view.PreviewView
        android:id="@+id/previewView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <com.king.zxing.ViewfinderView
        android:id="@+id/viewfinderView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <androidx.appcompat.widget.AppCompatImageView
        android:layout_marginTop="21dp"
        android:id="@+id/iv_new_back"
        android:layout_width="24dp"
        android:layout_height="22dp"
        android:layout_marginStart="12dp"
        android:src="@mipmap/return_white"/>
    <TextView
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打开预多宝,一点就能扫码付款"
        android:textColor="@color/personal_word_color"
        android:textSize="17sp"
        android:gravity="center"
        android:layout_gravity="center" />

    <LinearLayout
        android:id="@+id/ll_Flashlight"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:layout_marginTop="120dp"
            android:id="@+id/ivFlashlight"
            android:layout_width="30dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:src="@drawable/zxl_flashlight_selector"/>
        <TextView
            android:layout_below="@+id/ivFlashlight"
            android:layout_centerHorizontal="true"
            android:id="@+id/tv_illuminate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="轻触照亮"
            android:textColor="@color/white"
            android:textSize="17sp"
            android:gravity="center"
            android:layout_gravity="center" />
    </LinearLayout>

    <RelativeLayout
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/iv_Payment"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@mipmap/icon_detail_star" />
        <TextView
            android:textColor="@color/white"
            android:layout_below="@+id/iv_Payment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="付款码" />

        <ImageView
            android:layout_alignParentEnd="true"
            android:id="@+id/iv_photo"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@mipmap/icon_detail_star" />
        <TextView
            android:layout_alignParentEnd="true"
            android:textColor="@color/white"
            android:layout_below="@+id/iv_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="相册" />
    </RelativeLayout>
</RelativeLayout>

跳转到这个activity,就会打开扫码界面了。

// 跳转的扫码界面
startActivityForResult(new Intent(requireContext(), QrCodeActivity.class), 1);
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Uniapp是一个跨平台的开发框架,可以使用Vue.js语法进行开发。在Uniapp中实现自定义扫码界面,可以通过以下步骤进行操作: 1. 首先,需要在项目中引入相关扫码插件,例如uni-app扫码插件。 2. 在需要显示扫码界面的页面中,使用`<view>`标签创建一个容器,用于显示扫码界面。 3. 在页面的`<script>`标签中,通过`import`关键字引入扫码插件的相关功能。 4. 在页面的`data`中定义一个变量,用于保存扫码结果。 5. 在页面的`methods`中,创建一个函数,用于调用扫码插件的功能,并将结果保存到之前定义的变量中。 6. 在页面的`onShow`或其它适当的生命周期函数中,调用上一步定义的函数,启动扫码功能。 7. 在页面的`<template>`中,将定义的容器组件放置在适当的位置,用于展示扫码界面。 8. 在扫码插件的回调函数中,获取扫码结果,可以进行后续的处理操作,例如跳转到指定页面或展示扫码结果等。 以上是一个基本的思路,具体的实现步骤可能会有所差异,根据具体的扫码插件和需求来进行操作。希望对你有所帮助! ### 回答2: Uniapp 是一款基于 Vue.js 的跨平台开发框架,可以用于开发多个平台上的应用程序。要自定义 Uniapp 中的扫码界面,可以按照以下步骤进行操作: 1. 首先,在 Uniapp 项目中创建一个新的页面,用于扫码界面的展示和处理。可以使用 `uni.navigateTo` 方法跳转到该页面。 2. 在扫码界面的页面中使用 `uni.scanCode` 方法调用原生的扫码功能。该方法会返回扫描到的二维码信息。 3. 可以在扫码界面的页面中自定义展示扫码界面的样式。可以使用 `uni.createCameraContext` 方法创建相机对象,通过设置对象的属性和方法来定制相机的显示效果,包括界面的大小、颜色等等。 4. 可以在扫码界面的页面中添加自定义的业务逻辑。例如,可以在扫码成功后对扫描到的二维码信息进行解析和处理,然后进行相应的业务跳转或数据展示。 5. 在扫码界面的页面中监听用户的操作和反馈。例如,可以监听相机的点击事件,在用户点击相机时执行拍照或者开始扫码的动作。 6. 最后,在需要扫码的页面或者组件中调用自定义扫码界面。可以使用 `uni.navigateTo` 方法跳转到自定义扫码界面,并在指定的页面中处理扫码结果。 总的来说,要自定义 Uniapp 的扫码界面,需要创建一个新页面,调用原生的扫码功能,定制扫码界面的样式和行为,并在其他页面中使用该自定义扫码界面进行扫码操作。 ### 回答3: 要自定义uniapp的扫码界面,可以按照以下步骤进行: 1. 创建一个新的uniapp项目,可以使用HBuilderX等IDE工具。 2. 在项目目录中创建一个新的页面用于扫码功能,比如命名为ScanCode.vue。 3. 在ScanCode.vue页面中,使用`<view>`等标签结构布局扫码界面的UI样式。 4. 在ScanCode.vue中引入uni-app的扫码插件,可以使用uni.scanCode()方法进行扫码操作。 5. 在扫码成功的回调函数中,可以获取到扫码结果,可以将扫描结果显示在界面上,或者进行其他自定义操作。 6. 可以根据需要添加一些额外的功能,比如闪光灯控制、相册选取图片扫码等。 7. 在其他页面中,可以通过导航跳转或路由跳转到ScanCode.vue页面,从而实现调用自定义扫码界面。 需要注意的是,uniapp是基于Vue的跨平台框架,其自定义扫码界面的实现方式与普通的Vue项目稍有区别,需要使用uni-app提供的插件来进行扫码操作。同时,自定义扫码界面的样式和功能可以根据具体需求进行调整和扩展。希望以上回答能够对您有帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值