如何為L(zhǎng)inuxARM設(shè)備構(gòu)建跨平臺(tái)UI

這篇文章給大家分享的是有關(guān)如何為L(zhǎng)inux ARM設(shè)備構(gòu)建跨平臺(tái)UI的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

我們提供的服務(wù)有：網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、景縣ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的景縣網(wǎng)站制作公司

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

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

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

選擇 Android Studio

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

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

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

構(gòu)建 UI

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

Home appliance application to control thermostat

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

Android XML 為 UI 創(chuàng)建增加了很多靈活性，使得為應(yīng)用程序構(gòu)建豐富的用戶體驗(yàn)變得容易。在下面的 XML 中，我們使用了兩個(gè)主要組件：ImageView 和 TextView。

<ImageViewandroid: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" /><TextViewandroid: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ù)，比如建筑物內(nèi)的溫度。大多數(shù) ImageView 都用作用戶與 UI 交互的按鈕，但它們也需要實(shí)現(xiàn)屏幕上組件提供的事件。

用 TotalCross 整合

這個(gè) PoC 中的第二項(xiàng)技術(shù)是 TotalCross。我們不想在設(shè)備上使用 Android 的任何東西，因?yàn)椋?/p>

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

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

Home Appliance file structure

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

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

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

TotalCross simulator running temperature application

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

添加事件

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

例如，為了使用戶能夠改變家中或其他建筑物的溫度，我們?cè)?UI 底部放置了加號(hào)和減號(hào)按鈕，并在每次單擊按鈕時(shí)都會(huì)出現(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 上測(cè)試

最后一步！我們?cè)谝慌_(tái)設(shè)備上運(yùn)行了應(yīng)用程序并檢查了結(jié)果。我們只需要打包應(yīng)用程序并在目標(biāo)設(shè)備上部署和運(yùn)行它。VNC 也可用于檢查設(shè)備上的應(yīng)用程序。

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

下面是應(yīng)用程序的演示：

感謝各位的閱讀！關(guān)于“如何為L(zhǎng)inux ARM設(shè)備構(gòu)建跨平臺(tái)UI”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站標(biāo)題：如何為L(zhǎng)inuxARM設(shè)備構(gòu)建跨平臺(tái)UI
路徑分享：http://muchs.cn/article34/igeese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、服務(wù)器托管、外貿(mào)建站、、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)