Cómo leer códigos de barra desde Xamarin

Hoy vamos a explicar como leer códigos de barra en C# desde Xamarin, una forma muy sencilla con una de las librerías más conocida para escanear códigos y la que yo recomiendo.

Instalamos los paquetes ZXing para leer códigos de barra

Empezamos por instalar los paquetes Nuget que vamos a necesitar en tu Visual Studio.

La librería se llama ZXING ya conocida por muchos donde su estabilidad y robustet están más que demostradas.

Para ellos hacemos clic derecho sobre nuestra solución y elegimos Administrar paquetes Nuget para la solución.

Buscamos ZXing y instamos los que se llaman ZXing.Net.Mobile y ZXing.Net.Mobile.Forms

Paquete Nuget ZXing xamarin

Si instalas solo una de estos paquetes al compilar te dará un error y te dirá que falta la otra, así que para evitar problemas, recomiendo instalar ambas antes de comenzar.

Preparativos antes de implementar la librería

Si necesitas lanzar tu aplicación en IOS necesitaras ir al archivo AppDelegate.cs de tu proyecto IOS y meter la siguiente línea antes de tu LoadApplication.

            ZXing.Net.Mobile.Forms.iOS.Platform.Init();
Leer códigos de barra en xamarin IOS

Hacemos lo mismo en el proyecto Android, para ello en este caso abrimos el archivo MainActivity.cs y añadimos la misma línea pera cambiamos la parte que dice IOS por Android tal que así:

ZXing.Net.Mobile.Forms.Android.Platform.Init();

Al igual que hicimos antes, esta línea se mete antes del LoadApplication

Leer códigos de barra en android

Y para acabar con esta parte le tenemos que decir al teléfono que nuestra librería ZXing va a gestionar los permisos de la cámara por nosotros así que en el mismo MainActivity.cs más abajo añadimos lo siguiente:

            global::ZXing.Net.Mobile.Android.PermissionsHandler.OnRequestPermissionsResult(requestCode, permissions, grantResults);

Quedando nuestro MainActivity de esta forma:

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            ZXing.Net.Mobile.Forms.Android.Platform.Init(); //libreria para los Barcode 

            LoadApplication(new App());
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
            global::ZXing.Net.Mobile.Android.PermissionsHandler.OnRequestPermissionsResult(requestCode, permissions, grantResults); //Permisos para la cámara

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }

Y lo mismo con IOS pero en este caso se hace agregando una nueva entrada en info.plist, así que no vamos a este archivo botón derecho y seleccionamos Ver Diseñador.

Al final agregamos la nueva entrada colocándolo como Privacy – Camera Usage Description y en descripción lo que queráis.

Usando la cámara para escanear códigos de barra

Llegados a este punto ya está todo listo, ahora tenemos que ver en que página vamos a hacer que se abra la cámara.

Puede ser directamente en el mainpage o puede ser otro nuevo page diferente.

Sea cuál sea abre el xaml y agregamos arriba el espacio de nombre:

xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"

Y en el cuerpo del código lo siguiente:

    <zxing:ZXingScannerView IsScanning="True" />

Quedando todo así:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             x:Class="EjemploBarcode.View.Barcode">
        <StackLayout>
        <Label Text="Escanear Código" FontSize="32"/>
        <Label x:Name="scanResultText" />
        <zxing:ZXingScannerView IsScanning="True" OnScanResult="ZXingScannerView_OnScanResult"/>
    </StackLayout>
</ContentPage>

Hasta este momento la aplicación mostraría un mensaje pidiéndonos permisos para usar la cámara y si aceptamos la iniciaría, pero no sería capaz de escanear nada.

Por lo tanto, antes necesitamos un evento que al abrir la cámara pueda escanear el código, y un label donde va a mostrar lo leído.

Por lo tanto añadimos a la línea el evento como muestro a contianuación.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             x:Class="EjemploBarcode.View.Barcode">
        <StackLayout>
        <Label Text="Escanear Código" FontSize="32"/>
        <Label x:Name="scanResultText" />
        <zxing:ZXingScannerView IsScanning="True" OnScanResult="ZXingScannerView_OnScanResult"/>
    </StackLayout>
</ContentPage>

Ahora en la parte de C# se habrá creado un nuevo método llamado ZXingScannerView_OnScanResult y lo dejamos tal que así:

private void ZXingScannerView_OnScanResult(ZXing.Result result)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                scanResultText.Text = result.Text + " (type: " + result.BarcodeFormat.ToString() + ")";
            });
        }

Y eso es todo, si has seguido todo al pie de la letra deberías poder escanear códigos de barra sin problema.

Ahora se abre un mundo de posibilidades para tus aplicaciones, tanto para hacer una app de inventario e ir guardando códigos de barra en una base de datos firebase etc.

Y si aún no conoces firebase te recomiendo nuestro articulo de Cómo crear base de datos Firebase.

Espero que te haya ayudado este tutorial y si tienes algún comentario éejamelo saber más abajo.

Deja un comentario