用 XML 和 Java 构建树莓派打印机的用户界面

2024年 7月 16日 52.3k 0

使用 TotalCross 来快速构建嵌入式系统程序的用户界面。

用 XML 和 Java 构建树莓派打印机的用户界面-1

从头开始构建 GUI 是一个非常耗时的过程,以硬编码的方式处理所有的位置和对齐对于一些程序员来说确实很困难。所以在本文中,我将演示如何使用 XML 加快这一过程。

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

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

项目需求

要重现此项目,你需要:

  • KnowCode-XML
  • VSCode 或 VSCodium
  • 一个 Android 开发环境
  • 用于 VSCode 的 TotalCross 插件
  • 适用于你的开发平台(Linux、Mac 或 Windows)的 Java,需要 Java 11(或更高版本)
  • Git

制作嵌入式应用程序

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

用 XML 和 Java 构建树莓派打印机的用户界面-2

构建这个 GUI 需要几个步骤,包括使用 Android-XML 生成 GUI,然后使用 Knowcode-XML 解析器在 TotalCross 框架上运行它。

1、生成 Android XML

要创建 XML 文件,首先构建一个简单的 Android 屏幕,然后对其进行自定义。如果你不知道如何编写 Android-XML,或者你只是想简单尝试一下,你可以从这个 GitHub 项目 中下载这个应用程序的 XML。该项目还包含渲染 GUI 要用到的图片。

2、调整 XML

生成 XML 文件后,你需要进行一些微调以确保所有内容都已经对齐、比例正确并且图像的路径正确。

将 XML 布局添加到 Layouts 文件夹,将所有资源添加到 Drawable 文件夹。然后你就可以开始自定义 XML 了。

例如,如果想要更改 XML 对象的背景,可以更改 android:background 属性:

android:background="@drawable/scan"

你也可以使用 tools:layout_editor_absoluteXtools:layout_editor_absoluteY 更改对象的位置:

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

或者使用 android:layout_widthandroid:layout_height 更改对象的大小:

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

如果要在对象上放置文本,可以使用 android:textSizeandroid:textandroid:textStyleandroid:textColor

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

下面是一个完整的 XML 对象的示例:

    

3、在 TotalCross 上运行 GUI

完成所有 XML 调整后,就可以在 TotalCross 上运行它了。在 TotalCross 扩展(LCTT 译注:在 VSCode 里面)上创建一个新项目,并将 XMLDrawable 文件夹添加到 Main 文件夹里。如果你仍然不确定如何创建 TotalCross 项目,请参阅我们的 入门指南。

配置好环境后,使用 totalcross.knowcode.parse.XmlContainerFactoryimport 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

相关文章

Linux 命令行的聊天工具 CenterIM
Linux 桌面年仍未到来 但 Linux 移动之年已到来
12 个在线学习 Linux 技能网站
Linux Mint : 会是另一个新的 Ubuntu 吗?
W3Conf 开发者大会将于下周召开
Ubuntu 10.04 ARM 处理器上网本版本结束服务期

发布评论