Xamarin.Forms 二維碼掃描實(shí)踐

印度阿三17 2020-02-19

展開全文

開發(fā)環(huán)境：

Visual Studio 2019 版本 16.4.5

公用平臺(tái)nuget

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

Android項(xiàng)目環(huán)境nuget

Xamarin.Forms 4.4.0.991640
Ideine.ZXing.Net.Mobile 2.4.2
Plugin.Permissions 5.0.0-beta
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

一、新建項(xiàng)目

選擇項(xiàng)目模板為：移動(dòng)應(yīng)用(Xamarin.Forms)

點(diǎn)擊下一步：輸入項(xiàng)目名稱ScanBarCode，選擇好項(xiàng)目存儲(chǔ)位置，點(diǎn)擊“創(chuàng)建”按鈕

在彈出的窗體中選擇：模板-詳細(xì)信息平臺(tái)選擇Andrdeoid和iOS 其他保持未選中狀態(tài)，點(diǎn)擊“OK”按鈕，等待新建項(xiàng)目加載完成。

項(xiàng)目創(chuàng)建完成后，會(huì)有三個(gè)項(xiàng)目：

ScanBarCode
ScanBarCode.Android
ScanBarCode.iOS

二、在項(xiàng)目中添加NuGet程序包

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

出現(xiàn)tab頁(yè)面：

更新中出現(xiàn)有一項(xiàng)可更新內(nèi)容，進(jìn)行更新，Xamarin.Forms更新到4.4.0.991640版本。

點(diǎn)擊“瀏覽”選項(xiàng)，添加必要的NuGet程序包

ZXing.Net.Mobile.Forms添加到項(xiàng)目ScanBarCode中

Ideine.ZXing.Net.Mobile添加到ScanBarCode.Android項(xiàng)目中

Plugin.Permissions 添加到項(xiàng)目：ScanBarCode和ScanBarCode.Android項(xiàng)目中

在ScanBarCode.Android項(xiàng)目中安裝Xamarin.Android.Support.* 的NuGet程序包（至關(guān)重要）

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中添加初始化代碼
在項(xiàng)目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);
    }
}

}
```

在項(xiàng)目ScanBarCode.Android中的AssemblyInfo.cs中添加相關(guān)權(quán)限。

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

四、實(shí)現(xiàn)掃碼功能

4.1 在`ScanBarCode`中添加內(nèi)容頁(yè)

在ScanBarCode中的Views添加內(nèi)容頁(yè)：ScanQrCodePage.xaml
在xaml中添加如下代碼：

<!--?xml version="1.0" encoding="utf-8" ?-->
<contentpage x:class="ScanBarCode.Views.ScanQrCodePage" xmlns="http:///schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http:///schemas/2014/forms/design" xmlns:mc="http://schemas./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="生產(chǎn)二維碼">
            </button>
            <grid x:name="QrCodeSite" heightrequest="300">
            </grid>
        </label></stacklayout>
    </contentpage.content>
</contentpage>

掃碼功能實(shí)現(xiàn)

ScanBarCodeBtn_OnClicked方法中實(shí)現(xiàn)掃碼功能：

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;
       }
   }
}

檢查權(quán)限代碼：

/// <summary>
/// 檢查權(quán)限
/// </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;
}

這樣就實(shí)現(xiàn)了掃碼功能，可以是條形碼，二維碼等。

4.2 自定義掃碼功能

使用默認(rèn)掃描器雖可以完成掃描功能，但是其樣式過于簡(jiǎn)陋，下面通過自定義ScanPage和ScanOverlay更改掃描器樣式。

4.2.1 自定義ZXingScanOverlay。

4.2.2 自定義ZXingCustomScanPage

4.2.3 實(shí)現(xiàn)點(diǎn)擊實(shí)現(xiàn)

4.3、生成二維碼功能

在點(diǎn)擊事件中直接進(jìn)行生成二維碼的功能

五、側(cè)邊欄菜單實(shí)現(xiàn)

在ScanBarCode項(xiàng)目的Models文件夾的HomeMenuItem文件的enum中添加

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

在ScanBarCode項(xiàng)目的Views文件夾的MenuPage.xaml.cs文件中添加菜單項(xiàng)：

在ScanBarCode項(xiàng)目的Views文件夾的MainPage.xaml.cs文件中的NavigateFromMenu方法中內(nèi)容：

源碼

https://github.com/mzy666888/ScanBarCodeXamarin

參考

全部的掃碼的代碼全部來源于此BLOG：https://www.jianshu.com/p/a200de28597b
https://github.com/HisCodeness/MvvmCross.Plugin.QRCode

結(jié)束語

小編用了3天的時(shí)間，終于把掃碼功能研究出來了。在VS生成的項(xiàng)目中沒有引用Xamarin.Android.Support 相關(guān)包，導(dǎo)致個(gè)人一直認(rèn)為需要把ZXing.Net.Mobile的相關(guān)庫(kù)升級(jí)到.netstandard 2.0才能使用呢。
各位如果喜歡請(qǐng)給個(gè)關(guān)注，點(diǎn)個(gè)在看

來源：https://www./content-4-634551.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：印度阿三17 > 《開發(fā)》

舉報(bào)/認(rèn)領(lǐng)