Xamarin.Forms 二維碼掃描實踐

開發環境：

Visual Studio 2019 版本 16.4.5

公用平台nuget

1. ZXing.Net.Mobile.Forms 2.4.1
2. Plugin.Permissions 5.0.0-beta

Android項目環境nuget

1. Xamarin.Forms 4.4.0.991640
2. Ideine.ZXing.Net.Mobile 2.4.2
3. Plugin.Permissions 5.0.0-beta
4. Xamarin.Android.Support.Compat 28.0.0.3
5. Xamarin.Android.Support.Core.UI 28.0.0.3
6. Xamarin.Android.Support.Core.Utils 28.0.0.3
7. Xamarin.Android.Support.CustomTabs 28.0.0.3
8. Xamarin.Android.Support.Design 28.0.0.3
9. Xamarin.Android.Support.Fragment 28.0.0.3
10. Xamarin.Android.Support.v4 28.0.0.3
11. Xamarin.Android.Support.v7.AppCompat 28.0.0.3
12. Xamarin.Android.Support.v7.CardView 28.0.0.3

一、新建項目

選擇項目模板為：移動應用(Xamarin.Forms)

點擊下一步：輸入項目名稱ScanBarCode，選擇好項目存儲位置，點擊“創建”按鈕

在彈出的窗體中選擇：模板-詳細信息 平台選擇Andrdeoid和iOS 其他保持未選中狀態，點擊“OK”按鈕，等待新建項目加載完成。

項目創建完成后，會有三個項目：

• ScanBarCode
• ScanBarCode.Android
• ScanBarCode.iOS
  

二、在項目中添加NuGet程序包

點擊解決方案名稱，右鍵，選擇“管理解決方案的 NuGet 程序包”

出現tab頁面：

更新中出現有一項可更新內容，進行更新，Xamarin.Forms更新到4.4.0.991640版本。

點擊“瀏覽”選項，添加必要的NuGet程序包

ZXing.Net.Mobile.Forms添加到項目ScanBarCode中

Ideine.ZXing.Net.Mobile添加到ScanBarCode.Android項目中

Plugin.Permissions 添加到項目：ScanBarCode和ScanBarCode.Android項目中

在ScanBarCode.Android項目中安裝Xamarin.Android.Support.* 的NuGet程序包（至關重要）

Xamarin.Android.Support.Compat 28.0.0.3（必要）
Xamarin.Android.Support.Core.UI 28.0.0.3（必要）
Xamarin.Android.Support.Core.Utils 28.0.0.3（必要）
Xamarin.Android.Support.CustomTabs 28.0.0.3
Xamarin.Android.Support.Design 28.0.0.3
Xamarin.Android.Support.Fragment 28.0.0.3（必要）
Xamarin.Android.Support.v4 28.0.0.3（必要）
Xamarin.Android.Support.v7.AppCompat 28.0.0.3（必要）
Xamarin.Android.Support.v7.CardView 28.0.0.3

三、在OnCreate中添加初始化代碼

在項目ScanBarCode.Android中的MainActivity.cs文件中OnCreate方法中添加初始化代碼，並重寫OnRequestPermissionsResult方法

namespace ScanBarCode.Droid
{
   [Activity(Label = "ScanBarCode", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
   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);
           
           //初始化代碼
           CrossCurrentActivity.Current.Init(this, savedInstanceState);
           MobileBarcodeScanner.Initialize(Application);
           
           LoadApplication(new App());
       }
       public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
       {
           Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

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

在項目ScanBarCode.Android中的AssemblyInfo.cs中添加相關權限。

[assembly:UsesPermission(Android.Manifest.Permission.Camera)] //相機
[assembly:UsesPermission(Android.Manifest.Permission.Flashlight)] //閃光燈

四、實現掃碼功能

4.1 在ScanBarCode中添加內容頁

在ScanBarCode中的Views添加內容頁：ScanQrCodePage.xaml
在xaml中添加如下代碼：

<!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="ScanBarCode.Views.ScanQrCodePage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d">
    <contentpage.content>
        <stacklayout>
            <button x:name="ScanBarCodeBtn" clicked="ScanBarCodeBtn_OnClicked" text="掃描二維碼">
            </button>
            <label x:name="ScanTextResult" text="Hello Xamarin.Forms!">
            <button x:name="CustomScanBarCodeBtn" clicked="CustomScanBarCodeBtn_OnClicked" text="自定義掃描二維碼">
            </button>
            <label x:name="CustomScanResult" horizontaloptions="CenterAndExpand">
            </label>
            <button x:name="BuildQrCdoeBtn" clicked="BuildQrCdoeBtn_OnClicked" text="生產二維碼">
            </button>
            <grid x:name="QrCodeSite" heightrequest="300">
            </grid>
        </label></stacklayout>
    </contentpage.content>
</contentpage>

掃碼功能實現

ScanBarCodeBtn_OnClicked方法中實現掃碼功能：

private async void ScanBarCodeBtn_OnClicked(object sender, EventArgs e)
{
   if (await CheckPerssion())
   {
      var scanner = new MobileBarcodeScanner();
      var result = await scanner.Scan();
      if (null != result)
      {
        ScanTextResult.Text = result.Text;
       }
   }
}

檢查權限代碼：

/// <summary>
/// 檢查權限
/// </summary>
/// <returns></returns>
private async Task<bool> CheckPerssion()
{
   var current = CrossPermissions.Current;
   var status = await current.CheckPermissionStatusAsync<camerapermission>();
   if (PermissionStatus.Granted != status)
   {
      status = await current.RequestPermissionAsync<camerapermission>();       
   }
   return status == PermissionStatus.Granted;
}

這樣就實現了掃碼功能，可以是條形碼，二維碼等。

4.2 自定義掃碼功能

使用默認掃描器雖可以完成掃描功能，但是其樣式過於簡陋，下面通過自定義ScanPage和ScanOverlay更改掃描器樣式。

4.2.1 自定義ZXingScanOverlay。

4.2.2 自定義ZXingCustomScanPage

4.2.3 實現點擊實現

4.3、生成二維碼功能

在點擊事件中直接進行生成二維碼的功能

五、側邊欄菜單實現

在ScanBarCode項目的Models文件夾的HomeMenuItem文件的enum中添加

public enum MenuItemType
    {
        Browse,
        About,
        ScanQrCode //二維碼掃碼菜單
    }

在ScanBarCode項目的Views文件夾的MenuPage.xaml.cs文件中添加菜單項：

在ScanBarCode項目的Views文件夾的MainPage.xaml.cs文件中的NavigateFromMenu方法中內容：

源碼

https://github.com/mzy666888/ScanBarCodeXamarin

參考

1. 全部的掃碼的代碼全部來源於此BLOG：https://www.jianshu.com/p/a200de28597b

2. https://github.com/HisCodeness/MvvmCross.Plugin.QRCode

結束語

小編用了3天的時間，終於把掃碼功能研究出來了。在VS生成的項目中沒有引用Xamarin.Android.Support 相關包，導致個人一直認為需要把ZXing.Net.Mobile的相關庫升級到.netstandard 2.0才能使用呢。
各位如果喜歡請給個關注，點個在看