Como añadir un lector de códigos de barras en una app

En el desarrollo de ciertos proyectos podemos encontrarnos con la necesidad de utilizar un escáner de códigos de barras, ya sea para un control de inventario de productos, venta, logística etc…

 

Hoy veremos como podemos implementarlo de una manera sencilla en nuestra app utilizando para ello ‘MVBarcodeReader‘. Con esta librería podremos abrir fácilmente un nuevo Activity para escanear códigos, recuperando el valor en el método ‘onActivityResult‘. Además nos da la posibilidad de escanear múltiples códigos a la vez. Para el ejemplo, crearemos un nuevo proyecto en Android Studio con una actividad en blanco para posteriormente definir la interfaz y la lógica.

 

 

Creando un nuevo proyecto

 

Ejemplo Lerctor-1

Ejemplo Lerctor-1

Ejemplo Lerctor-3

Ejemplo Lerctor-4

 

Paquetes de dependencias

 

Una vez tenemos el proyecto creado, el primer paso será añadir los paquetes correspondientes de la librería, junto con los paquetes de Google necesarios para utilizarla. Para ello, abrimos el archivo ‘build-gradle’ (Module: App) y añadimos la siguientes líneas en el apartado ‘dependencies’ debajo de las que ya hay.

compile 'online.devliving:mvbarcodereader:1.0.9'

    //Dependencia de la librería mvbarcodereader
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.google.android.gms:play-services-basement:10.0.1'
    compile 'com.google.android.gms:play-services-vision:10.0.1'
    compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:support-annotations:25.0.1'

Al añadir código en este archivo, deberemos volver a sincronizar los paquetes de dependencias que utilizará la aplicación. En el caso que una de estas librería de Google no esté instalada, se nos ofrecerá la opción de instalarla mediante el SDK de Android.

Para re-sincronizar las dependencias bastará con pulsar en el texto ‘Sync now’ de color azul que aparece al modificar el archivo ‘build-gradle’.

Botón SYNC Android Studio

 

 

Layout : activity_main.xml

Cuando lo tengamos todo listo, pasaremos a editar el layout del Activity Principal, de nombre activity_main.xml. De manera que quede igual a este:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="es.mscdroidlabs.lector.MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:gravity="center"
        android:padding="0dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/modo_auto"
            android:id="@+id/btn_m_auto"
            android:layout_gravity="center_horizontal"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/modo_manual"
            android:id="@+id/btn_m_manual"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="15dp"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/modo_multiple"
            android:id="@+id/btn_m_multiple"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="15dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="@string/ultimo_codigo_Escaneado"
            android:id="@+id/textView"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="50dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:id="@+id/cod_escaneo"
            android:layout_gravity="center_horizontal"/>
    </LinearLayout>
</RelativeLayout>

 

Obteniendo como resultado la interfaz gráfica siguiente:

UI-lector

 

 

 

MainActivity.java

 

Con la interfaz de usuario definida, pasamos al archivo MainActivity.java para empezar a darle la lógica a los botones.

Copio todo el código y pasamos a comentarlo debajo.

 

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button b_auto, b_manual, b_multiple;
    private MVBarcodeScanner.ScanningMode modo_Escaneo;
    private TextView text_cod_escaneado;
    private int CODE_SCAN = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        UI();

    }

    private void UI(){
        b_auto = (Button)findViewById(R.id.btn_m_auto);
        b_manual = (Button)findViewById(R.id.btn_m_manual);
        b_multiple = (Button)findViewById(R.id.btn_m_multiple);
        text_cod_escaneado= (TextView)findViewById(R.id.cod_escaneo);

        b_auto.setOnClickListener(this);
        b_manual.setOnClickListener(this);
        b_multiple.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_m_auto:
                modo_Escaneo = MVBarcodeScanner.ScanningMode.SINGLE_AUTO;
                break;
            case R.id.btn_m_manual:
                modo_Escaneo = MVBarcodeScanner.ScanningMode.SINGLE_MANUAL;
                break;
            case R.id.btn_m_multiple:
                modo_Escaneo = MVBarcodeScanner.ScanningMode.MULTIPLE;
                break;
        }

        new MVBarcodeScanner.Builder().setScanningMode(modo_Escaneo).setFormats(Barcode.ALL_FORMATS)
                .build()
                .launchScanner(this, CODE_SCAN);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == CODE_SCAN) {
            if (resultCode == RESULT_OK && data != null
                    && data.getExtras() != null) {

                if (data.getExtras().containsKey(MVBarcodeScanner.BarcodeObject)) {
                    Barcode mBarcode = data.getParcelableExtra(MVBarcodeScanner.BarcodeObject);
                    text_cod_escaneado.setText(mBarcode.rawValue);
                } else if (data.getExtras().containsKey(MVBarcodeScanner.BarcodeObjects)) {
                    List<Barcode> mBarcodes = data.getParcelableArrayListExtra(MVBarcodeScanner.BarcodeObjects);
                    StringBuilder s = new StringBuilder();
                    for (Barcode b:mBarcodes){
                        s.append(b.rawValue + "\n");
                    }
                    text_cod_escaneado.setText(s.toString());
                }
            }
        }
    }
}

 

En las primeras líneas (de la 3 a la 6) de nuestra clase principal definimos los componentes de la interfaz, botones y textviews, junto a 2 variables:

  1. modo_Escaneo: Que nos permitirá controlar qué tipo de escaneo vamos a utilizar. (Lo concretaremos más adelante).
  2. CODE_SCAN: Valor entero constante que nos identificará el Intent lanzado para posteriormente recoger el valor devuelto.

En el método onCreate, llamamos al método UI() para definir los componentes gráficos y asociarlos al evento onClick() que implementa la actividad a partir de la línea 30.

 

Hasta aquí la implementación de la interfaz de usuario. Ahora pasamos al evento de pulsado de los botones (línea 30). En él, filtramos con un switch el id del componente que se ha pulsado (View.getId()). En función del botón que sea, asignamos el valor correspondiente a la variable ‘modo_Escaneo’. La librearía MVBarcodeReader nos permite hasta 3 tipos de escaneo diferentes:

 

  • MVBarcodeScanner.ScanningMode.SINGLE

Es el modo de detección más rápido. Devuelve 1 solo código, el primero que sea capaz de identificar.

  • MVBarcodeScanner.ScanningMode.SINGLE_MANUAL

Es capaz de identificar varios códigos, pero solo devuelve el que es pulsado por el usuario.

  • MVBarcodeScanner.ScanningMode.MULTIPLE

Idenifica varios códigos y los devuelve todos al pulsar sobre la pantalla.

Una vez tenemos el tipo de escaneo definido, pasamos a crear un nuevo objeto ‘MVBarcodeScanner.Builder()’ (línea 43), pasándole como parámetros :

  • .setScanningMode(Nuestra variable modo_Escaneo que contiene uno de los 3 modos descritos arriba)
  • .setFormats(Utilizamos BARCODE.ALL_FORMATS para leer todos los tipos disponibles. Que tipos son? Respuesta en la Barcode API).
  • .build()
  • .launchScanner(Contexto, y cualquier valor entero [en este caso la variable antes definida]).

 

Una vez se define este objeto, se abre un nuevo activity con la cámara ya preparada para escanear los códigos, además contamos con un pequeño botón que nos permitirá encender el flash para capturar códigos en situaciones de falta de luminosidad. Cuando esta nueva actividad captura el/los código/s, se cerrará y nos devolverá el resultado de los códigos capturados en el método onActivityResult() (línea 49).

 

Al recuperar el intent del activity recientemente cerrado, comprobamos que el código de respuesta corresponde al nuestro ‘CODE_SCAN’, que el resultado sea ‘RESULT_OK’ y que la variable ‘data’ no es nula y contiene extras. Sí estas condiciones se cumplen, pasamos a filtrar el tipo de objeto que devuelve la variable ‘data’ (líneas 56 y 59) :

 

  • MVBarcodeScanner.BarcodeObject : Solo ha devuelto 1 solo código, lo recuperamos con :

Barcode mBarcode = data.getParcelableExtra(MVBarcodeScanner.BarcodeObject);

mBarcode.rawValue();

  • MVBarcodeScanner.BarcodeObjects : Devuelve una lista de objetos Barcode List<Barcode> . Los recorremos de la manera que mejor nos parezca, en este caso con:
for(Barcode b:mBarcodes){}

 

Video del ejemplo


Y hasta aquí este pequeño apunte. Sin duda esta librería nos permite grandes funciones con unas pocas líneas de código para su implementación. La parte mala se la lleva el paquete .apk resultante, ya que el número de dependencias que utilizamos provoca un aumento de peso de la aplicación.

Si os surge alguna duda en algun paso, no dudéis en comentarlo más abajo.

También te podría gustar...

Ads Blocker Image Powered by Code Help Pro

Bloqueador de anuncios detectado

Por favor, desactiva tu bloqueador de anuncios para este sitio web. Sabemos que la publicidad puede resultarte molesta, pero esta es la única manera de mantener la web de forma gratuita y accesible para todo el mundo.