ZXing条码扫描器在片段中自定义布局

时间:2015-09-17 09:41:07

标签: android android-fragments zxing barcode-scanner

我在Android Studio上this page之后开发了ZXing条形码连续扫描仪。

我的应用build.gradle包括:

repositories {
    mavenCentral()

    maven {
        url "https://raw.github.com/embarkmobile/zxing-android-minimal/mvn-repo/maven-repository/"
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile files('src/main/jniLibs/scanditsdk-android-4.7.5.jar')
    compile files('src/main/jniLibs/httpclient-4.0.jar')

    compile 'com.journeyapps:zxing-android-embedded:3.0.3@aar'
    compile 'com.google.zxing:core:3.2.0'
}

我的Fragment.xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#00CC00"
    android:orientation="vertical"
    android:weightSum="100">

    <com.journeyapps.barcodescanner.CompoundBarcodeView
        android:id="@+id/barcode_scanner"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="40"
        >

    </com.journeyapps.barcodescanner.CompoundBarcodeView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="100"
        style="?android:attr/buttonBarStyle"
        >


        <Button
            android:id="@+id/btnStartScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Start"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>

        <Button
            android:id="@+id/btnStopScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Stop"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>

        <Button
            android:id="@+id/btnPauseScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Pause"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>

        <Button
            android:id="@+id/btnResumeScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Resume"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>
    </LinearLayout>

</LinearLayout>

然后,我的Fragment代码如下所示:

public class CMCSMOFragment extends Fragment implements View.OnClickListener {

    private CompoundBarcodeView barcodeView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if (container == null) {
            return null;
        }

        View v;
        v = inflater.inflate(R.layout.cmcsmo_layout, container, false);

        barcodeView = (CompoundBarcodeView) v.findViewById(R.id.barcode_scanner);
        barcodeView.decodeContinuous(callback);

        return v;
    }

    private BarcodeCallback callback = new BarcodeCallback() {
        @Override
        public void barcodeResult(BarcodeResult result) {
            if (result.getText() != null) {
                barcodeView.setStatusText(result.getText());
            }

            //Do something with code result
        }

        @Override
        public void possibleResultPoints(List<ResultPoint> resultPoints) {
        }
    };
}

当我构建我的应用时,CompoundBarcodeView仅显示带有ZXing文字的黑色视图

  

在取景器矩形内放置条形码进行扫描。

修改

按照 Lennon 建议,我使用了zxing-minimum,但它不允许在纵向模式下工作:(。

我该怎么做才能解决这个问题?谢谢大家的帮助!

6 个答案:

答案 0 :(得分:10)

这很简单,ZXing的所有者表示只会将以下代码添加到onResumeonPause覆盖的方法中:

@Override
public void onResume() {
    barcodeView.resume();
    super.onResume();
}

@Override
public void onPause() {
    barcodeView.pause();
    super.onPause();
}

答案 1 :(得分:1)

尝试使用zxing的最小库,如下面的链接:https://github.com/andreipro/zxing-android-minimal

这很容易。您只需将这些行添加到gradle

中即可
repositories {
    mavenCentral()

    maven {
        url "https://raw.github.com/embarkmobile/zxing-android-minimal/mvn-repo/maven-repository/"
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:support-v13:22.2.0'

    // Zxing minimal libraries
    compile 'com.embarkmobile:zxing-android-minimal:2.0.0@aar'
    compile 'com.embarkmobile:zxing-android-integration:2.0.0@aar'
    compile 'com.google.zxing:core:3.0.1'
}

然后使用此

调用条形码
new IntentIntegrator(this).initiateScan(); // `this` is the current Activity

在您的情况下,您想要使用自定义布局,因此您必须按照一些参数创建自定义布局,例如下面的布局:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <SurfaceView android:id="@+id/zxing_preview_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <com.google.zxing.client.android.ViewfinderView
        android:id="@+id/zxing_viewfinder_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <LinearLayout
        android:id="@+id/zxing_result_view"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/zxing_result_view"
        android:visibility="gone"
        android:baselineAligned="false">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="@dimen/zxing_standard_padding">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="right|center_vertical">

                <ImageView android:id="@+id/zxing_barcode_image_view"
                    android:layout_width="160dip"
                    android:layout_height="wrap_content"
                    android:maxWidth="160dip"
                    android:maxHeight="160dip"
                    android:layout_marginBottom="@dimen/zxing_half_padding"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    tools:ignore="ContentDescription"/>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_format"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_format_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_type"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_type_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_time"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_time_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:id="@+id/zxing_meta_text_view_label"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_meta"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_meta_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

            </LinearLayout>

            <ScrollView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView android:id="@+id/zxing_contents_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_text"
                        android:textColorLink="@color/zxing_result_text"
                        android:textSize="22sp"
                        android:paddingLeft="12dip"
                        android:autoLink="web"
                        android:textIsSelectable="true"/>

                    <TextView android:id="@+id/zxing_contents_supplement_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_text"
                        android:textColorLink="@color/zxing_result_text"
                        android:paddingLeft="12dip"
                        android:autoLink="web"
                        android:textIsSelectable="true"/>

                </LinearLayout>

            </ScrollView>

        </LinearLayout>

        <LinearLayout android:id="@+id/zxing_result_button_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_gravity="bottom|center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView android:id="@+id/zxing_status_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:background="@color/zxing_transparent"
            android:text="@string/zxing_msg_default_status"
            android:textColor="@color/zxing_status_text"/>

        <Button android:id="@id/zxing_back_button"
            android:layout_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:height="60dp"
            android:textAlignment="center"
            android:layout_gravity="bottom|center_horizontal"
            android:text="@string/zxing_button_cancel"/>

    </LinearLayout>

</merge>

之后,您可以将上述布局设置为integrator

IntentIntegrator integrator = new IntentIntegrator(this);
integrator.setCaptureLayout(R.layout.custom_layout);
integrator.initiateScan();

但请记住,你必须遵循这些参数。这意味着您必须为所有视图使用相同的名称。

答案 2 :(得分:1)

您必须初始化barcodeView。

试试这段代码:

IntentIntegrator integrator = IntentIntegrator.forSupportFragment(this);
barcodeView.initializeFromIntent(integrator.createScanIntent());

https://github.com/journeyapps/zxing-android-embedded

答案 3 :(得分:0)

Does your app have permission to use the device camera? Add that permission in your manifest, and then after installing the app, go to your phone settings > apps > your app > permissions. And then grant the camera permission

答案 4 :(得分:0)

我遇到了同样的问题(黑屏,即屏幕上没有摄像头输出)。这是因为你没有权限。我通过征求许可来解决这个问题,请参阅https://developer.android.com/training/permissions/requesting

我使用了https://github.com/dlazaro66/QRCodeReaderView,David Lazaro的代码,它是对Zxing库的修改。

答案 5 :(得分:0)

我遇到了刚刚删除的问题

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light nav">
  <div class="logo">

  </div>
  <div id="launchPad" class="pull-right">
    <div id="zarazka" style="cursor:move; z-index:1031;">
      <h6 class="h5">Zarážka</h6>
    </div>
  </div>
</nav>


<div class="main-content">

  <div id="zpravy" class="pb-3">
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="1">asdasd</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="2">asdasd</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="3">asdasd</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="4">asdasd</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="zprava" id="5">asdasd</div>
      </div>
    </div>
  </div>

</div>

从清单起,就行了!