Xamarin.Forms Barcode QR Code Reader

Merhaba,

Geliştirdiğimiz Xamarin uygulamalarında Barcode, QR Code gibi kaynakları tüketmek isteyebiliriz. Bu gibi durumlar için Redth'in geliştirdiği ücretsiz ve son derece iyi çalışan bir plugin'i var.

ZXing.Net.Mobile for Forms

C# ve .Net kütüphaneleri kullanarak Xamarin.iOS, Xamarin.Android, Windows Phone Silverlight, Windows Universal ve Xamarin.Forms uygulamalarında kullanabileceğiniz Barcode kütüphanesidir.

Şimdiye kadar geliştirdiğim uygulamlarda ne zaman "Barcode veya QR" okutma ihtiyacım olsa bu plugin'i kullandım ve hiç sorun yaşamadım.

Yeni bir Xamarin.Forms (PCL) projesi açarak başlayalım..

xamarin-qr-barcode-reader

Plugin'i kullanabilmeniz için güncel Xamarin.Forms stable update'i almanız gerekiyor. (2.3.2.127)

xamarinforms-update

Xamarin.Forms update yaptıktan sonra Plugin'i projemize dahil edelim.

install-plugin

Bildiğiniz gibi her pluginin çalışması için platform özelinde render edilmesi gerekiyor.

Droid için : ZXing.Net.Mobile.Forms.Android.Platform.Init();

iOS için : ZXing.Net.Mobile.Forms.iOS.Platform.Init();

WinPhone için : ZXing.Net.Mobile.Forms.WindowsPhone.ZXingScannerViewRenderer.Init();

UWP için : ZXing.Net.Mobile.Forms.WindowsUniversal.ZXingScannerViewRenderer.Init();

Basit bir sayfa hazırlayarak hemen plugin'i tanımaya başlayalım.

scanpage-instance

Burada dikkat etmemiz gereken nokta AutomationId değeri. Set ettiğimiz string değere göre sayfanın çalışma yapısı oluşuyor.

  1. scanWithDefaultOverlay : Bunun yerine Scan yazsanız da değişiklik olmayacaktır. Default olarak çalışmaya devam edecektir.
  2. scanWithCustomOverlay : Custom ekran tasarımı yapmak isterseniz .
  3. scanContinuously : Tarama işlemini ekran geçişi olmadan ve durmadan yapmak isterseniz .
  4. scanWithCustomPage : Sizin hazırladığınız bir sayfa içerisinde kullanmak isterseniz.
  5. barcodeGenerator : Verdiğiniz string değere göre barcode üretmek isterseniz.

Plugin'i kullanabilmek için, plugin ile beraber gelen kendi sayfasını kullanıyoruz. (ZXingScannerPage)

Senaryomuz ekran üzerindeki button'a bastığımızda ZXingScannerPage'i açıp kamera yardımıyla Barcode veya QR kodumuzu okutmak.

Buradaki en önemli nokta plugin'in bize verdiği OnScanResult event'i. Bu event'i kullanarak scan işlemi bittiğinde ilgili veriyi kolay bir şekilde yakalayabiliyoruz.

scanpage-methods

Scan cevabını alırken Device.BeginInvokeOnMainThread içerisinde kullanmamızın amacı, olayı main thread içinde yakalamak istememiz.

Çok basit bir örnekle başladık fakat plugin'in yetenekleri çok fazla.

mobilebarcodescanningoptions

MobileBarcodeScanningOptions sınıfı içerisinde ihtiyacımızdan çok daha fazla ayar mevcut.

Burada bizim için en önemli özelliklerden biri PossibleFormats enum sabiti

possibleformats

Evet, istemediğiniz kadar seçenek mevcut! 🙂

Bunun yanında eğer scan yapacağınız sayfayı custom bir tasarımla güzelleştirmek isterseniz ZXingScannerView sınıfından yardım alabilirsiniz.

Flash Button, TopText, BottomText gibi özellikler verebiliyorsunuz.

Barcode üretme özelliği ise son derece kusursuz çalışıyor.

barcodegenerator

zxingbarcodeimageview

xamarintr

Yapmamız gereken tek olay plugin'in AutomationId üzerinden nasıl davranacağını söyleyip işlemi gerçekleştirmek.

github üzerinden kaynak kodlara ulaşabilirsiniz.

Görüşmek üzere

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

2 Comments

You can post comments in this post.


  • Merhaba Yiğit Hocam,

    Verdiğiniz örnekteki gibi uygulamayı kendi projeme dahil ettim çalışıyor fakat uygulamayı ilk kez çalıştırdığımda kamera için izin istiyor. İzni onaylamama rağmen scan ekranı açılmıyor ve uygulama crash oluyor. Uygulamayı tekrar açtığımda bu sefer izin istemeden kullanabiliyorum.

    Sizin github’ a attığınız projeyi de telefonumda denedim aynı sorunla yine karşılaştım. Bu konuda yardımcı olabilir misiniz?

    Teşekkürler

    Caner Balcancı 2 sene ago Reply


  • Qr barkod ürettiğimde bulanık bir görüntü oluşuyordu,

    barcode.BarcodeOptions = new EncodingOptions() { Height = 100, Width = 100, PureBarcode = true };

    ekleyerek net bir görüntü elde edebildim. Çok güzel bir yazı olmuş çok faydalandım teşekkür ederim.

    Volkan ŞELALE 1 sene ago Reply


Post A Reply