使用 XML 和 Java 为 Raspberry Pi 构建打印机 UI

图片来源

opensource.com

从头开始创建 GUI 是一个非常耗时的过程，对于一些程序员来说，在硬代码中处理所有位置和对齐方式可能非常困难。在本文中，我将演示如何使用 XML 加速此过程。

本项目使用 TotalCross 作为目标框架。TotalCross 是一个开源、跨平台软件开发工具包 (SDK)，旨在更快地为嵌入式设备创建 GUI。TotalCross 提供了 Java 的开发优势，而无需在设备上运行 Java，因为它使用自己的字节码和虚拟机（TC 字节码和 TCVM）来增强性能。

我还使用了 Knowcode-XML，这是一个用于 TotalCross 框架的开源 XML 解析器，它可以将 XML 文件转换为 TotalCross 组件。

项目要求

要重现此项目，您需要

KnowCode-XML
VSCode 或 VSCodium
Android 开发环境
TotalCross VSCode 插件
适用于您的开发平台的 Java 11 或更高版本（Linux、Mac 或 Windows）
Git

构建嵌入式应用程序

此应用程序由一个嵌入式 GUI 组成，具有基本的打印功能，例如扫描、打印和复印。

图片来源

^{（Edson Holanda Teixeira Jr，CC BY-SA 4.0）}

创建此 GUI 需要几个步骤，包括使用 Android-XML 生成 GUI，然后使用 Knowcode-XML 解析器在 TotalCross Framework 上运行它。

1. 生成 Android XML

要创建 XML 文件，首先创建一个简单的 Android 屏幕，然后对其进行自定义。如果您不知道如何编写 Android-XM，或者您只是想快速入门，您可以从此 GitHub 项目下载此应用程序的 XML。此项目还包含渲染 GUI 所需的图像。

2. 调整 XML

生成 XML 文件后，您需要进行一些微调，以确保一切都对齐、比例正确，并且具有正确的图像路径。

将 XML 布局添加到 Layouts 文件夹，并将所有资源添加到 Drawable 文件夹。然后您可以开始自定义 XML。

例如，如果您想更改 XML 对象的背景，请更改 android:background 属性

android:background="@drawable/scan"

您可以使用 tools:layout_editor_absoluteX 和 tools:layout_editor_absoluteY 更改对象的位置

tools:layout_editor_absoluteX="830dp"
tools:layout_editor_absoluteY="511dp"

使用 android:layout_width 和 android:layout_height 更改对象的大小

android:layout_width="70dp"
android:layout_height="70dp"

如果您想在对象上放置文本，可以使用 android:textSize、android:text、android:textStyle 和 android:textColor

android:textStyle="bold"
android:textColor="#000000"
android:textSize="20dp"
android:text="2:45PM"

这是一个完整的 XML 对象示例

    <ImageButton
            android:id="@+id/ImageButton"
            android:layout_width="70dp"
            android:layout_height="70dp"
            tools:layout_editor_absoluteX="830dp"
            tools:layout_editor_absoluteY="511dp"
            android:background="@drawable/home_config" />

3. 在 TotalCross 上运行 GUI

在您完成所有 XML 调整后，就可以在 TotalCross 上运行它了。在 TotalCross 扩展上创建一个新项目，并将 XML 和 Drawable 文件夹添加到 Main 文件夹。如果您不确定如何创建 TotalCross 项目，请参阅我们的入门指南。

配置环境后，使用 totalcross.knowcode.parse.XmlContainerFactory 和 import totalcross.knowcode.parse.XmlContainerLayout 以在 TotalCross 框架上使用 XML GUI。您可以在其 GitHub 页面上找到有关使用 KnowCode-XML 的更多信息。

4. 添加过渡效果

此项目的平滑过渡效果由 SlidingNavigator 类创建，该类使用 TotalCross 的 ControlAnimation 类从一个屏幕滑动到另一个屏幕。

在 XMLpresenter 类上调用 SlidingNavigator

new SlidingNavigator(this).present(HomePresenter.class);

在 SlidingNavigator 类上实现 present 函数

public void present(Class<? extends XMLPresenter> presenterClass)
         throws InstantiationException, IllegalAccessException {
      final XMLPresenter presenter = cache.containsKey(presenterClass) ? cache.get(presenterClass)
            : presenterClass.newInstance();
      if (!cache.containsKey(presenterClass)) {
         cache.put(presenterClass, presenter);
      }

      if (presenters.isEmpty()) {
         window.add(presenter.content, LEFT, TOP, FILL, FILL);
      } else {
         XMLPresenter previous = presenters.lastElement();

         window.add(presenter.content, AFTER, TOP, SCREENSIZE, SCREENSIZE, previous.content);

动画控制中的 PathAnimation 创建从一个屏幕到另一个屏幕的滑动动画

         PathAnimation.create(previous.content, -Settings.screenWidth, 0, new ControlAnimation.AnimationFinished() {
            @Override
            public void onAnimationFinished(ControlAnimation anim) {
               window.remove(previous.content);
            }
         }, 1000).with(PathAnimation.create(presenter.content, 0, 0, new ControlAnimation.AnimationFinished() {
            @Override
            public void onAnimation Finished(Control Animation anim) {
               presenter.content.setRect(LEFT, TOP, FILL, FILL);
            }
         }, 1000)).start();
      }
      presenter.setNavigator(this);
      presenters.push(presenter);
      presenter.bind2();
      if (presenter.isFirstPresent) {
         presenter.onPresent();
         presenter.isFirstPresent = false;
      }

5. 加载微调器

打印机应用程序中的另一个不错的功能是加载屏幕动画，它显示进度。它包括文本和旋转动画。

图片来源

^{（Edson Holanda Teixeira Jr，CC BY-SA 4.0）}

通过添加计时器和计时器侦听器来更新进度标签，然后调用函数 spinner.start() 来实现此功能。所有动画均由 TotalCross 和 KnowCode 自动生成

public void startSpinner() {
        time = content.addTimer(500);
        content.addTimerListener((e) -> {
            try {
                progress(); // Updates the Label
            } catch (InstantiationException | IllegalAccessException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
        });
        Spinner spinner = (Spinner) ((XmlContainerLayout) content).getControlByID("@+id/spinner");
        spinner.start();
    }

微调器被实例化为对 XML 文件中描述的 XmlContainerLayout 微调器的引用

<ProgressBar
android:id="@+id/spinner"
android:layout_width="362dp"
android:layout_height="358dp"
tools:layout_editor_absoluteX="296dp"
tools:layout_editor_absoluteY="198dp"
    android:indeterminateTint="#2B05C7"
style="?android:attr/progressBarStyle" />