构建 Linux ARM 设备跨平台 UI 的新方法

使用 AndroidXML 和 TotalCross 的概念验证，为 Raspberry Pi 和其他设备创建 UI 提供了一种更简便的方法。

图片来源：

Opensource.com

为您的应用程序创建出色的用户体验 (UX) 是一项艰巨的任务，尤其是当您开发嵌入式应用程序时。如今，通常有两种图形用户界面 (GUI) 工具可用于开发嵌入式软件：要么它们涉及复杂的技术，要么它们非常昂贵。

然而，我们为一种新方法创建了一个概念验证 (PoC)，该方法使用现有的、成熟的工具为在桌面、移动设备、嵌入式设备和低功耗 Linux ARM 设备上运行的应用程序构建用户界面 (UI)。我们的方法使用 Android Studio 绘制 UI；TotalCross 在设备上渲染 Android XML；一个新的 TotalCross API 称为 KnowCode；以及一个 Raspberry Pi 4 来执行应用程序。

选择 Android Studio

可以使用 TotalCross API 为应用程序构建响应式且美观的 UX，但在 Android Studio 中创建 UI 可以缩短原型设计和实际应用程序之间的时间。

有很多工具可用于为应用程序构建 UI，但 Android Studio 是全球开发人员最常使用的工具。除了被广泛采用之外，这个工具也非常直观易用，并且在创建简单和复杂的应用程序方面都非常强大。在我看来，唯一的缺点是使用该工具所需的计算能力，这比其他集成开发环境 (IDE)（如 VSCode 或其开源替代品 VSCodium）要重得多。

通过考虑这些问题，我们创建了一个概念验证，使用 Android Studio 绘制 UI，并使用 TotalCross 直接在设备上运行 Android XML。

构建 UI

对于我们的 PoC，我们想要创建一个家用电器应用程序来控制温度和其他东西，并且该应用程序将在 Linux ARM 设备上运行。

Home appliance application to control thermostat

图片来源：

^{(Bruno Muniz, CC BY-SA 4.0)}

我们想为 Raspberry Pi 开发我们的应用程序，因此我们使用了 Android 的 ConstraintLayout 来构建一个 848x480（Raspberry Pi 的分辨率）的固定屏幕尺寸 UI，但您可以使用其他布局构建响应式 UI。

Android XML 为 UI 创建增加了很大的灵活性，使其易于为应用程序构建丰富的用户体验。在下面的 XML 中，我们使用了两个主要组件：ImageView 和 TextView。

<ImageView
android:id="@+id/imageView6"
android:layout_width="273dp"
android:layout_height="291dp"
android:background="@drawable/Casa"
tools:layout_editor_absoluteX="109dp"
tools:layout_editor_absoluteY="95dp" />
<TextView
android:id="@+id/insideTempEdit"
android:layout_width="94dp"
android:layout_height="92dp"
android:background="#F5F5F5"
android:text="20"
android:textAlignment="center"
android:gravity="center"
android:textColor="#000000"
android:textSize="67dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="196dp"
tools:layout_editor_absoluteY="246dp" />

TextView 元素用于向用户显示一些数据，例如建筑物内部的温度。大多数 ImageViews 用作用户与 UI 交互的按钮，但它们也需要实现屏幕上组件提供的事件。

与 TotalCross 集成

此 PoC 中的第二项技术是 TotalCross。我们不想在设备上使用任何来自 Android 的东西，因为

我们的目标是为 Linux ARM 提供出色的 UI。
我们希望在设备上实现低占用空间。
我们希望应用程序在计算能力低的低端硬件设备上运行（例如，没有 GPU，低 RAM 等）。

首先，我们使用我们的 VSCode 插件创建了一个空的 TotalCross 项目。接下来，我们将图像的副本保存在 drawable 文件夹中，并将 Android XML 文件的副本保存在 XML 文件夹中——两者都位于 Resources 文件夹中

图片来源：

^{(Bruno Muniz, CC BY-SA 4.0)}

为了使用 TotalCross Simulator 运行 XML 文件，我们添加了一个名为 KnowCode 的新 TotalCross API 和一个用于加载 XML 的 MainWindow。下面的代码使用该 API 加载和渲染 XML

public void initUI() {
    XmlScreenAbstractLayout xmlCont = XmlScreenFactory.create(“xml / homeApplianceXML.xml”);
    swap(xmlCont);
}

就是这样！只需两个命令，我们就可以使用 TotalCross 运行 Android XML 文件。以下是 XML 在 TotalCross 模拟器上的表现

TotalCross simulator running temperature application

图片来源：

^{(Bruno Muniz, CC BY-SA 4.0)}

完成此 PoC 还剩下两件事：添加一些事件以提供用户交互并在 Raspberry Pi 上运行它。

添加事件

KnowCode API 提供了一种通过其 ID (getControlByID) 获取 XML 元素并更改其行为的方法，以执行诸如添加事件、更改可见性等操作。

例如，为了让用户能够更改他们家或其他建筑物中的温度，我们在 UI 底部放置了加号和减号按钮，以及一个“点击”事件，每次单击按钮时，温度都会升高或降低一度

Button plus = (Button) xmlCont.getControlByID("@+id/plus");
Label insideTempLabel = (Label) xmlCont.getControlByID("@+id/insideTempLabel");
plus.addPressListener(new PressListener() {
    @Override
    public void controlPressed(ControlEvent e) {
        try {
            String tempString = insideTempLabel.getText();
            int temp;
            temp = Convert.toInt(tempString);
            insideTempLabel.setText(Convert.toString(++temp));
        } catch (InvalidNumberException e1) {
            e1.printStackTrace();
        }
    }
});