如何将 PageRenderer/Fragment/View 中的 ZXing 扫描仪嵌入 Xamarin.Forms ContentPage？

Posted 2023-03-31

【中文标题】如何将 PageRenderer/Fragment/View 中的 ZXing 扫描仪嵌入 Xamarin.Forms ContentPage？

【英文标题】：How to embed ZXing scanner in PageRenderer/Fragment/View into Xamarin.Forms ContentPage?

【发布时间】：2020-04-29 12:36:24

【问题描述】：

我希望 ZXing.Net.Mobile 条码扫描仪具有自定义覆盖和一些在 Xamarin.Forms 中实现的 UI 组件在一个视图中。 有可能吗？

我认为这是可能的并实现了这个： 1. android.Support.V4.App.FragmentActivity 带有自定义覆盖 ZXing 扫描仪。 2. Android Activity，带有 ZXing 扫描仪的自定义叠加层。 3. Android PageRenderer 带有自定义覆盖 ZXing 扫描仪。

我能够运行所有这些变体，但无法将它们与 Xamarin.Forms UI 混合使用。

示例： 这是我在共享项目中的 ZXingScannerRendererPage.xaml。我想在 Zxing 扫描仪视图上方有“测试按钮”按钮。

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Name="RootPage"
    BackgroundColor="StaticResource BackgroundColor"
    xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:DataCollector" x:Class="DataCollector.ZXingScannerRendererPage">
    <ContentPage.Content>
        <StackLayout>
            <Button Text="TEST BUTTON" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

但是，当我使用 PageRenderer 运行应用程序时，我可以使用“TEST BUTTON”查看我的布局，然后查看跳转到 ZXing 扫描仪。 当我“按下返回”按钮时，我可以看到带有“测试按钮”的 XAML 布局。我觉得ZXing开了个新活动什么的。

所以，我需要的是： 1. 将带有自定义叠加层的 ZXing.Net.Mobile 条码扫描仪与其他 Xamarin.Forms UI 一起嵌入到我的 Xamarin.Forms ContentPage 中。 要么 2. 使用 ZXing.Net.Mobile 条码扫描器在视图上方嵌入 Xamarin.Forms UI，并带有自定义叠加层。

如何做到这一点？是否可以将 PageRenderer/Fragment/View 嵌入 Xamarin.Forms XAML？

谢谢！

【参考方案1】：

如何做到这一点？是否可以将 PageRenderer/Fragment/View 嵌入 Xamarin.Forms XAML？

您可以将扫描仪视图嵌入到其他冗余 BoxView 之间。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ZXingSample.PartialScreenScanning"
                    xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
                    Title="Partial screen">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <BoxView Grid.Row="0" BackgroundColor="Chocolate"/>
    <zxing:ZXingScannerView Grid.Row="1" x:Name="_scanView" OnScanResult="Handle_OnScanResult" IsScanning="true"
                            WidthRequest="200" HeightRequest="200" />
    <BoxView Grid.Row="2" BackgroundColor="Blue" />
</Grid>

您可以从 GitHub 下载源文件。 https://github.com/jfversluis/ZXingSample

这个博客也会很有帮助。 https://blog.verslu.is/xamarin/xamarin-forms-xamarin/scanning-generating-barcodes-zxing/

【参考方案2】：

我认为 XF 论坛中有一个相同的主题。 您可能会从我的回复中找到一些提示 https://forums.xamarin.com/discussion/176704/how-to-embed-zxing-scanner-in-pagerenderer-fragment-view-into-xamarin-forms-contentpage#latest