Xamarin.Forms 바코드 QR 코드 스캐너를 .NET MAUI로 포팅

지난 주에 Android 및 iOS용 Xamarin.Forms Barcode QR code scanner을 만들었습니다. .NET MAUI가 진행 중이므로 Xamarin.Forms는 C#에서 플랫폼 간 모바일 앱 개발의 끝이 아닙니다. Microsoft는 .NET MAUI가 Xamarin.Forms의 진화이며 모바일 및 데스크톱 개발을 모두 지원한다고 언급합니다. .NET MAUI가 곧 출시될 예정이므로 이 기사에서는 Xamarin.Forms 프로젝트를 이식하여 .NET MAUI 바코드 QR 코드 스캐너를 구현하는 방법을 보여줍니다.

.NET MAUI 바코드 QR 코드 스캐너 포팅 단계

Migrating from Xamarin.Forms (Preview)을 참조할 수 있지만 빌드 오류가 많이 발생하지 않도록 하려면 새 .NET MAUI 프로젝트를 만들고 프로젝트 구성 및 코드를 단계별로 마이그레이션하는 것이 좋습니다.

*.csproj 파일 업데이트

.NET MAUI 프로젝트를 생성하려면 Visual Studio 2022 Preview를 미리 설치해야 합니다.

새로운 .NET MAUI 프로젝트 스캐폴드에는 Windows, macOS, Tizen, Android 및 iOS용 템플릿이 포함되어 있습니다. Android 및 iOS 프레임워크만 csproj 파일에 보관합니다.

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>BarcodeQrScanner</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
</Project>

NuGet 패키지 설치

스키아샤프

SkiaSharp는 그림을 그리고 오버레이하는 데 사용됩니다. NuGet 패키지 관리자를 통해 SkiaSharp.Views.Maui.Controls 대신 SkiaSharp.Views.Forms를 설치합니다.

Dynamsoft 바코드 리더

Dynamsoft Barcode Reader는 바코드 및 QR 코드를 해독하는 데 사용됩니다.



Android 및 iOS SDK는 모두 .NET 6.0으로 빌드되지 않았습니다. 설치를 시도한 후 Xamarin Android 바코드 SDK가 .NET MAUI 프로젝트와 호환되지만 Xamarin iOS 바코드 SDK를 설치하면 호환성 오류가 반환되는 것을 확인했습니다.



따라서 다음 단락에서 바코드 QR 코드 스캔 기능은 Android 앱에서만 사용할 수 있습니다. iOS 앱의 동일한 논리 코드는 모두 주석 처리됩니다.

코드 업데이트

Xamarin.Forms에서 .NET MAUI로 코드를 마이그레이션하는 것은 예상만큼 쉽지 않습니다. 변경 사항을 살펴 보겠습니다.

플랫폼 코드 호출

특정 플랫폼 API를 호출하기 위해 Xamarin.Forms의 인터페이스를 사용합니다.

public interface IBarcodeQRCodeService
{
    Task<int> InitSDK(string license);
    Task<BarcodeQrData[]> DecodeFile(string filePath);
}

.NET MAUI에서는 부분 클래스와 부분 메서드를 사용합니다.

public partial class BarcodeQRCodeService
{
    public partial void InitSDK(string license);
    public partial BarcodeQrData[] DecodeFile(string filePath);
}

해당 구현은 다음과 같습니다.

Xamarin.Forms

public class BarcodeQRCodeService: IBarcodeQRCodeService
{
    Task<int> IBarcodeQRCodeService.InitSDK(string license)
    {
        ...
        TaskCompletionSource<int> taskCompletionSource = new TaskCompletionSource<int>();
        taskCompletionSource.SetResult(0);
        return taskCompletionSource.Task;
    }

    Task<BarcodeQrData[]> IBarcodeQRCodeService.DecodeFile(string filePath) 
    {
        ...
TaskCompletionSource<BarcodeQrData[]> taskCompletionSource = new TaskCompletionSource<BarcodeQrData[]>();
        taskCompletionSource.SetResult(output);
        return taskCompletionSource.Task;
    }
}

.NET 마우이

public partial class BarcodeQRCodeService
{
    public partial void InitSDK(string license)
    {
        ...
    }

    public partial BarcodeQrData[] DecodeFile(string filePath)
    {
        BarcodeQrData[] output = null;
        ...
        return output;
    }
}

콘텐츠 페이지의 네임스페이스 변경

콘텐츠 페이지 템플릿은 Xamarin.Forms와 .NET MAUI 간에 다릅니다.


xmlns는 http://schemas.microsoft.com/dotnet/2021/maui로 변경되고 xmlns:skia는 clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls로 변경됩니다.

Xamarin.Forms

xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"

.NET 마우이

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"

커스텀 렌더러의 네임스페이스 변경

또한 사용자 지정 렌더러의 네임스페이스를 변경해야 합니다.

기계적 인조 인간

- using Xamarin.Forms;
- using Xamarin.Forms.Platform.Android.FastRenderers;
+ using Microsoft.Maui.Controls.Compatibility;
+ using Microsoft.Maui.Controls.Compatibility.Platform.Android.FastRenderers;

아이폰 OS

- using Xamarin.Forms;
- using Xamarin.Forms.Platform.iOS;
+ using Microsoft.Maui.Controls.Compatibility;
+ using Microsoft.Maui.Controls.Handlers.Compatibility;

핸들러 등록

마지막 단계는 MauiProgram.cs에서 SkiaSharp 및 사용자 정의 렌더러가 작동하도록 구성하는 것입니다.

using Microsoft.Maui.Controls.Compatibility.Hosting;
using SkiaSharp.Views.Maui.Controls.Hosting;

namespace BarcodeQrScanner;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseSkiaSharp()
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            }).UseMauiCompatibility()
            .ConfigureMauiHandlers((handlers) => {

#if ANDROID
                handlers.AddCompatibilityRenderer(typeof(CameraPreview), typeof(BarcodeQrScanner.Platforms.Android.CameraPreviewRenderer));
#endif

#if IOS
                                        handlers.AddHandler(typeof(CameraPreview), typeof(BarcodeQrScanner.Platforms.iOS.CameraPreviewRenderer));
#endif
            });


        return builder.Build();
    }
}

비디오 데모

.NET MAUI 바코드 QR 코드 스캐너가 어떻게 작동하는지 보려면 비디오를 보십시오.

.NET MAUI 문제

AVCaptureDevice.DevicesWithMediaType은 null을 반환합니다.

AVCaptureDevice.DevicesWithMediaType를 사용하여 iOS 카메라 장치를 가져오려고 하면 .NET MAUI에서 null을 반환합니다. AVCaptureDevice.Devices를 사용하여 모든 장치를 반환한 다음 원하는 장치를 필터링할 수 있습니다.

- var videoDevices = AVCaptureDevice.DevicesWithMediaType(AVMediaTypes.Video.ToString()); 
+ AVCaptureDevice[] videoDevices = AVCaptureDevice.Devices;

레이블 텍스트는 전체 문자열을 표시할 수 없습니다.

이 문제는 이상합니다. 기본 텍스트 길이는 레이블 텍스트 표시에 영향을 주는 것 같습니다. 임시 해결 방법은 공백이 많은 기본 텍스트를 설정하는 것입니다.

<Label FontSize="18"
                FontAttributes="Bold"
                x:Name="ResultLabel"
                   Text="                                        "
                   TextColor="Red"
                HorizontalOptions="Center"
               VerticalOptions="Center"/>

소스 코드

https://github.com/yushulx/maui-barcode-qrcode-scanner