How to make Zebra Xing (Zxing) customs overlay as subview in Xamarin iOS

Question

I want to scan a barcode and return the result. I'm using ZXing for that. For Zxing when its default overlay, it would navigate to a new page and scan works perfectly. I want to stay on the same page and want a subview to enable camera and start scanning. Can anyone advise how to do that?

MyCode:

    MobileBarcodeScanner scanner;
    CustomOverlayView customOverlay;
    ZXingScannerView scannerView;
    UIActivityIndicatorView loadingView;
    UIView loadingBg;
    public event Action<ZXing.Result> OnScannedResult;
    public MobileBarcodeScanningOptions ScanningOptions { get; set; }

    public override void ViewDidLoad()
    {
        camView = new UIView(new CGRect(0, 0, this.View.Frame.Width, this.View.Frame.Height / 4)) { BackgroundColor = UIColor.Clear };
        scanner = new MobileBarcodeScanner();

        Root = new RootElement("ZXingDwatNet.Mobile") {
            new Section {


                camView
            }
        };


        scannerView = new ZXingScannerView();

        camView = scannerView;
        loadingBg = camView;// new UIView(this.View.Frame) { BackgroundColor = UIColor.Purple, AutoresizingMask = UIViewAutoresizing.FlexibleDimensions };
        loadingView = new UIActivityIndicatorView(UIActivityIndicatorViewStyle.Gray)
        {
            AutoresizingMask = UIViewAutoresizing.FlexibleMargins
        };
        loadingView.Frame = new CGRect((this.View.Frame.Width - loadingView.Frame.Width) / 4,
            (this.View.Frame.Height - loadingView.Frame.Height) / 4,
            loadingView.Frame.Width / 4,
            loadingView.Frame.Height / 4);

        loadingBg.AddSubview(loadingView);
        View.AddSubview(loadingBg);
        loadingView.StartAnimating();

        this.View.InsertSubviewBelow(scannerView, loadingView);

        this.View.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;

        scanner.UseCustomOverlay = true;
        scanner.CustomOverlay = camView;
        var options = new MobileBarcodeScanningOptions
        {
            AutoRotate = false,
            TryHarder = true
        };
        Task.Run( async () => 
        { 
            var result = await scanner.Scan(options, false);
            HandleScanResult(result);
        } );


    }

    void HandleScanResult(ZXing.Result result)
    {
        string msg = "";

        if (result != null && !string.IsNullOrEmpty(result.Text))
            msg = "Found Barcode: " + result.Text;
        else
            msg = "Scanning Canceled!";

        this.InvokeOnMainThread(() =>
        {
            var av = new UIAlertView("Barcode Result", msg, null, "OK", null);
            av.Show();
        });
    }

    public override void ViewDidAppear(bool animated)
    {
        scannerView.OnScannerSetupComplete += HandleOnScannerSetupComplete;
        camView = scannerView;
        //originalStatusBarStyle = UIApplication.SharedApplication.StatusBarStyle;
        var opt = new MobileBarcodeScanningOptions();
        opt.DelayBetweenContinuousScans = 3000;
        ScanningOptions = opt;

        if (UIDevice.CurrentDevice.CheckSystemVersion(7, 0))
        {
            UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.Default;
            SetNeedsStatusBarAppearanceUpdate();
        }
        else
            UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.BlackTranslucent, false);

        Console.WriteLine("Starting to scan...");

        Task.Factory.StartNew(() =>
       {
           BeginInvokeOnMainThread(() => scannerView.StartScanning(result =>
           {

               //if (!ContinuousScanning)
               //{
                  // Console.WriteLine("Stopping scan...");
                  // scannerView.StopScanning();
               //}

               var evt = this.OnScannedResult;
               if (evt != null)
                   evt(result);

           }, this.ScanningOptions));
       });
    }

    void HandleOnScannerSetupComplete()
    {
        BeginInvokeOnMainThread(() =>
       {
           if (loadingView != null && loadingBg != null && loadingView.IsAnimating)
           {
               loadingView.StopAnimating();

               UIView.BeginAnimations("zoomout");

               UIView.SetAnimationDuration(2.0f);
               UIView.SetAnimationCurve(UIViewAnimationCurve.EaseOut);

               loadingBg.Transform = CGAffineTransform.MakeScale(2.0f, 2.0f);
               loadingBg.Alpha = 0.0f;

               UIView.CommitAnimations();


               loadingBg.RemoveFromSuperview();
           }
       });
    }

Answer 1

For those who are interested in code;

// Variable declaration
private ZXingScannerView m_scannerView;

   // Below code snippet goes inside a method body
    var mobileBarcodeScanner = new MobileBarcodeScanner(this);
    m_scannerView =
        new ZXingScannerView(
            new CGRect(
                0,
                0,
                m_findPatientsView.CustomScannerView.ScannerView.Frame.Width,
                m_findPatientsView.CustomScannerView.ScannerView.Frame.Height))
        {
            AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight,
            UseCustomOverlayView = mobileBarcodeScanner.UseCustomOverlay,
            CustomOverlayView = mobileBarcodeScanner.CustomOverlay
        };

    // Adding scanner view as a subview
    m_findPatientsView.CustomScannerView.ScannerView.Add(m_scannerView);

    m_scannerView.StartScanning(
        async result =>
        {
            if (result != null)
            {
                // Handle scaneed result
            }
        });

Answer 2

You have to use ZXingScannerView and add it to your view. You can see how to use ZXingScannerView in ZXingScannerViewController