如何在 Android 中设计动态 UI 元素

问题描述

我有一个关于如何在 Android(使用 Java)中设计动态 UI 元素的一般问题。

我想在我的应用程序中有一个温度计,它根据一些外部信息增加或减少红色条(如下所示)。

enter image description here

。我如何在 Android 中设计这样的东西?

例如,我可以使用一些绘图程序将没有红条的温度计设计为 jpeg,然后以某种方式将 Android 中的红条实现为可以通过编程方式更改的对象,而温度计的“边缘”不会改变. 我看到这种方法的问题是,我认为对于不同的屏幕尺寸和分辨率,将温度计的边缘与红色条相匹配是极其困难的。你对我如何做这样的事情还有其他建议吗?可能有一个图书馆吗?

感谢您的每一条评论,因为我没有任何设计此类动态 UI 对象的经验。

解决方法

更新答案:

我在 Github here 上创建了一个演示项目。该项目具有温度计自定义视图,其中外部温度计是从图像文件中绘制的,而温度计的内部水银视图是从代码中绘制的。您可以查看我在之前的其他自定义回答中分享的用户 kofigyan 的项目。

上一个答案:

我认为您要寻找的是在 Android 中创建 Custom Views

您可以扩展 Android View 类并创建您的自定义视图。 View 有一个 Canvas 对象,您可以在该对象上绘制温度计的形状,并且可以构建功能来更改子类本身中形状的状态。此外,使用 Paint 对象,您可以绘制绘制的形状。

我在 Github 上发现了用户 kofigyanthis 项目。

,

要获得动态用户界面,您可以采取两种方法。

  1. Jetpack Compose(尚未讨论,因为它仍处于测试阶段)
  2. LiveData 和观察者模式

在 LiveData 和观察者模式中。将温度作为 LiveData 变量(在您的 ViewModel 中)并在您的 MainActivity 中实现一个观察者,当温度实时数据的值发生变化时,该观察者会自动触发。

为了获得输出图形,您可以使用画布,然后在其上绘制并将其绑定到温度变量。 例如,您可以使用 Canvas.drawRect 函数根据温度创建短矩形或长矩形。 (从圆圈到温度计顶部的部分可以是矩形)