--- title: "开发能够自动支持深色模式的移动应用程序" date: "2020-12-28" categories: - "app-development" - "mobile-development" tags: - "app-development" - "dark-theme" - "mobile-development-tools" - "mobiletogether" description: 了解如何使用 Altova MobileTogether 开发能够自动适应深色主题的移动应用程序，从而提升用户体验并有效延长电池续航时间。 --- Status: #blog Tags: #app-development #dark-theme #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md) # 开发能够自动支持深色模式的移动应用程序 Android和Apple移动设备都支持一种名为“深色模式”的显示选项，您可以将其视为一种与普通屏幕显示几乎相反的显示效果。在深色模式下，白色会变成黑色，黑色会变成白色，并且整体的色彩饱和度会进行调整。深色模式可以降低功耗，从而延长电池续航时间，并且在光线较暗的环境下更容易观看。 Altova MobileTogether 包含功能，允许开发者创建移动应用程序，这些应用程序能够自动支持深色主题。当应用程序启动时，它会检测用户的设置，并相应地应用深色主题。 我们来看一个例子： ![](/blog/images/mt_darktheme_blog_1.jpg) 以下展示了两个界面，它们是同一个移动应用程序在同一移动设备上，分别以浅色主题和深色主题运行的效果。 [![同一款移动应用程序在浅色主题和深色主题下的界面展示](/blog/images/image-1-1.png)](image-1-1.png) 这款应用程序允许用户记录太阳能电池板的发电量以及通过电表读取的用电量，并生成图表来展示这些数据，并跟踪一段时间内的电力盈余情况。 许多住宅太阳能发电系统会连接到公共电力网络，采用“净计量”计费方式。安装在屋顶的太阳能板只在阳光照射时为家庭供电。在夜间或当用电需求超过发电量时，电力将从电网供应。当系统产生的电力超过家庭的用电量时，多余的电力会反馈到电网，从而补充电网的发电能力。 Altova MobileTogether 旨在帮助移动应用开发者轻松地 [创建跨平台的移动应用程序](https://www.altova.com/zh/mobiletogether)。它使用 MobileTogether Designer，该工具集成了拖放式用户界面设计工具、强大的 Action Tree 视觉编程语言（用于事件处理），以及标准化的函数式编程方法，用于数据选择和处理。 该应用程序的每个组件都具有高度的可定制性，但默认情况下，文本颜色、按钮、规则、边框，甚至窗口背景等元素都采用设备自身的默认设置。MobileTogether Designer 包含一个“样式”辅助窗口，开发者可以在其中指定项目的整体设置，包括选择浅色或深色主题。 [![设置样式和属性，以自动支持移动应用程序中的深色主题。](/blog/images/styles-window.png)](styles-window.png) 主题设置选项有三种：使用系统设置、强制使用浅色主题或强制使用深色主题。默认选项是“使用系统设置”，因此开发者无需进行任何特殊操作，即可自动支持深色主题。 ### 自动支持图表中的深色主题，并可自定义颜色 某些元素可能需要自定义颜色设置，开发者可以为浅色主题和深色主题分别指定备用颜色方案。第一步是检测当前生效的用户设置。 MobileTogether 包含全局变量，允许开发者在运行时检测用户设备的设置，并根据设备的功能执行相应的操作。MobileTogether 设计器中的“全局变量”对话框列出了所有全局变量及其对应于所选模拟设备的取值。 [![一个全局变量用于在运行时确定用户设备的背景颜色。](/blog/images/global-variables-1.png)](global-variables-1.png) 特定Android手机的默认页面背景颜色已在上方标出。如果设备处于深色模式，此值会发生变化。较小的十六进制数值表示颜色更深，而较大的数值表示颜色更浅。 十六进制值 #808080 对应于 50% 灰度。我们可以创建一个 XPath 表达式，在运行时测试该值，并假设任何比 50% 灰度更深的默认背景颜色都表明设备处于深色主题模式。设计器模拟窗口中的 XPath 评估器是一个很好的工具，可以用来确定表达式的确切语法： [![一个 XPath 表达式，用于根据移动设备的默认背景颜色，返回黑色或白色的颜色代码](/blog/images/xpath-expression.png)](xpath-expression.png) 这个表达式会将十六进制字符串转换为整数，然后将其与50%灰度的值进行比较，并根据比较结果选择黑色或白色的字符串值。这是一个很好的表达式，可以自动选择适合浅色主题或深色主题的文本颜色，接下来我们将其应用到一个用户函数中： ![在用户自定义函数中实现该表达式。](/blog/images/user-function.png) MobileTogether 包含功能，可以轻松地 [创建美观的图表和图形](https://www.altova.com/zh/mobiletogether/enterprise-apps)，并且这些图表在所有平台上都具有相同的外观。 如图所示的“太阳能工具”示例应用程序，使用柱状图来展示每日的太阳能发电量，并叠加在一个面积图上，该面积图显示了用电量。 开发人员可以通过一系列“图表创建”对话框来设置这些图表的样式，例如这里显示的“更改外观”对话框： [![“图表外观”对话框，用于在所有平台上创建相同外观的图表](/blog/images/chart-creation.png)](chart-creation.png) 许多这些对话框会设置颜色，例如在这个例子中设置的背景颜色和边框颜色。但是，我们拥有完全的控制权，可以根据动态XPath设置来覆盖这些默认设置，这些设置会在客户端设备运行时进行评估。 [![动态 XPath 选项，用于精细调整图表控件。](/blog/images/chart-config.png)](chart-config.png) 点击此按钮会打开一个对话框，其中包含用于为每个图表元素设置 XPath 值或表达式的选项。在下面的图片中，我们为所有在“图表设置”对话框中指定为黑色或白色的元素设置了值。我们将原本为白色元素的默认背景色设置为白色，并将黑色元素，如文本和边框，设置为使用我们的 `AutoTextColor()` 函数。 ![利用全局变量和用户自定义函数，自动支持深色主题](/blog/images/dynamic-xpath.png) 我们在“创建设置”对话框中，将每个轴的网格线设置为浅灰色，这样适用于任何主题。每个图表的每一层都有一个独立的“动态 XPath 设置”对话框，但一旦所有设置都完成编辑，就完成了。图表将自动正确地为浅色主题和深色主题进行创建。 以下是一部安卓手机，它展示了在深色主题和浅色主题下显示的累计盈余图表： [![以下是该应用程序在深色主题和浅色主题下的两种不同显示效果](/blog/images/android-app-1.png)](android-app-1.png) 如果您准备好创建易于使用的移动应用程序，并且希望这些应用程序能够根据用户的设置自动支持深色主题，只需下载免费的 [MobileTogether Designer](https://www.altova.com/zh/mobiletogether/download) 即可。 此外，请务必访问 [MobileTogether 演示](https://www.altova.com/zh/mobiletogether/demos) 页面，其中包含视频、教程以及更多演示应用程序的链接。