[[382113]]

AndroidXML 和 TotalCross 的運用為樹莓派和其他設備創(chuàng)建 UI 提供了更簡單的方法。

為應用程序創(chuàng)建良好的用戶體驗（UX）是一項艱巨的任務，尤其是在開發(fā)嵌入式應用程序時。今天，有兩種圖形用戶界面（GUI）工具通常用于開發(fā)嵌入式軟件：它們要么涉及復雜的技術，要么非常昂貴。

然而，我們已經(jīng)創(chuàng)建了一個概念驗證（PoC），它提供了一種新的方法來使用現(xiàn)有的、成熟的工具為運行在桌面、移動、嵌入式設備和低功耗 ARM 設備上的應用程序構建用戶界面（UI）。我們的方法是使用 Android Studio 繪制 UI；使用 TotalCross 在設備上呈現(xiàn) Android XML；采用被稱為 KnowCode 的新 TotalCross API；以及使用 樹莓派 4 來執(zhí)行應用程序。

選擇 Android Studio

可以使用 TotalCross API 為應用程序構建一個美觀的響應式用戶體驗，但是在 Android Studio 中創(chuàng)建 UI 縮短了制作原型和實際應用程序之間的時間。

有很多工具可以用來為應用程序構建 UI，但是 Android Studio 是全世界開發(fā)者最常使用的工具。除了它被大量采用以外，這個工具的使用也非常直觀，而且它對于創(chuàng)建簡單和復雜的應用程序都非常強大。在我看來，唯一的缺點是使用該工具所需的計算機性能，它比其他集成開發(fā)環(huán)境 （IDE） 如 VSCode 或其開源替代方案 VSCodium 要龐大得多。

通過思考這些問題，我們創(chuàng)建了一個概念驗證，使用 Android Studio 繪制 UI，并使用 TotalCross 直接在設備上運行 AndroidXML。

構建 UI

對于我們的 PoC，我們想創(chuàng)建一個家用電器應用程序來控制溫度和其他東西，并在 Linux ARM 設備上運行。

Home appliance application to control thermostat

我們想為樹莓派開發(fā)我們的應用程序，所以我們使用 Android 的 ConstraintLayout 來構建 848x480（樹莓派的分辨率）的固定屏幕大小的 UI，不過你可以用其他布局構建響應性 UI。

Android XML 為 UI 創(chuàng)建增加了很多靈活性，使得為應用程序構建豐富的用戶體驗變得容易。在下面的 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 元素用于向用戶顯示一些數(shù)據(jù)，比如建筑物內的溫度。大多數(shù) ImageView 都用作用戶與 UI 交互的按鈕，但它們也需要實現(xiàn)屏幕上組件提供的事件。

用 TotalCross 整合

這個 PoC 中的第二項技術是 TotalCross。我們不想在設備上使用 Android 的任何東西，因為：

1。我們的目標是為 Linux ARM 提供一個出色的 UI。 2。我們希望在設備上實現(xiàn)低占用。 3。我們希望應用程序在低計算能力的低端硬件設備上運行（例如，沒有 GPU、 低 RAM 等）。

首先，我們使用 VSCode 插件 創(chuàng)建了一個空的 TotalCross 項目。接下來，我們保存了 drawable 文件夾中的圖像副本和 xml 文件夾中的 Android XML 文件副本，這兩個文件夾都位于 resources 文件夾中：

Home Appliance file structure

為了使用 TotalCross 模擬器運行 XML 文件，我們添加了一個名為 KnowCode 的新 TotalCross API 和一個主窗口來加載 XML。下面的代碼使用 API 加載和呈現(xiàn) XML：

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

就這樣！只需兩個命令，我們就可以使用 TotalCross 運行 Android XML 文件。以下是 XML 如何在 TotalCross 的模擬器上執(zhí)行：

TotalCross simulator running temperature application

完成這個 PoC 還有兩件事要做：添加一些事件來提供用戶交互，并在樹莓派上運行它。

添加事件

KnowCode API 提供了一種通過 ID（getControlByID） 獲取 XML 元素并更改其行為的方法，如添加事件、更改可見性等。

例如，為了使用戶能夠改變家中或其他建筑物的溫度，我們在 UI 底部放置了加號和減號按鈕，并在每次單擊按鈕時都會出現(xiàn)“單擊”事件，使溫度升高或降低一度：

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

在樹莓派 4 上測試

最后一步！我們在一臺設備上運行了應用程序并檢查了結果。我們只需要打包應用程序并在目標設備上部署和運行它。VNC 也可用于檢查設備上的應用程序。

整個應用程序，包括資源（圖像等）、Android XML、TotalCross 和 Knowcode API，在 Linux ARM 上大約是 8MB。

下面是應用程序的演示：

Application demo

在本例中，該應用程序僅為 Linux ARM 打包，但同一應用程序可以作為 Linux 桌面應用程序運行，在Android 設備 、Windows、windows CE 甚至 iOS 上運行。

所有示例源代碼和項目都可以在 HomeApplianceXML GitHub 存儲庫中找到。

現(xiàn)有工具的新玩法

為嵌入式應用程序創(chuàng)建 GUI 并不需要像現(xiàn)在這樣困難。這種概念證明為如何輕松地完成這項任務提供了新的視角，不僅適用于嵌入式系統(tǒng)，而且適用于所有主要的操作系統(tǒng)，所有這些系統(tǒng)都使用相同的代碼庫。

我們的目標不是為設計人員或開發(fā)人員創(chuàng)建一個新的工具來構建 UI 應用程序；我們的目標是為使用現(xiàn)有的最佳工具提供新的玩法。